stream-chat-react 12.13.1 → 13.0.0-rc.1

package/dist/components/Reactions/ReactionsListModal.d.ts

@@ -1,15 +1,14 @@
 import React from 'react';
 import type { ReactionDetailsComparator, ReactionSummary, ReactionType } from './types';
-import { ModalProps } from '../Modal';
-import { MessageContextValue } from '../../context';
-import { DefaultStreamChatGenerics } from '../../types/types';
-import { ReactionSort } from 'stream-chat';
-export type ReactionsListModalProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = ModalProps & Partial<Pick<MessageContextValue<StreamChatGenerics>, 'handleFetchReactions' | 'reactionDetailsSort'>> & {
+import type { ModalProps } from '../Modal';
+import type { MessageContextValue } from '../../context';
+import type { ReactionSort } from 'stream-chat';
+export type ReactionsListModalProps = ModalProps & Partial<Pick<MessageContextValue, 'handleFetchReactions' | 'reactionDetailsSort'>> & {
     reactions: ReactionSummary[];
-    selectedReactionType: ReactionType<StreamChatGenerics>;
-    onSelectedReactionTypeChange?: (reactionType: ReactionType<StreamChatGenerics>) => void;
-    sort?: ReactionSort<StreamChatGenerics>;
+    selectedReactionType: ReactionType;
+    onSelectedReactionTypeChange?: (reactionType: ReactionType) => void;
+    sort?: ReactionSort;
     /** @deprecated use `sort` instead */
-    sortReactionDetails?: ReactionDetailsComparator<StreamChatGenerics>;
+    sortReactionDetails?: ReactionDetailsComparator;
 };
-export declare function ReactionsListModal<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ handleFetchReactions, onSelectedReactionTypeChange, reactionDetailsSort: propReactionDetailsSort, reactions, selectedReactionType, sortReactionDetails: propSortReactionDetails, ...modalProps }: ReactionsListModalProps<StreamChatGenerics>): React.JSX.Element;
+export declare function ReactionsListModal({ handleFetchReactions, onSelectedReactionTypeChange, reactionDetailsSort: propReactionDetailsSort, reactions, selectedReactionType, sortReactionDetails: propSortReactionDetails, ...modalProps }: ReactionsListModalProps): React.JSX.Element;

package/dist/components/Reactions/SimpleReactionsList.d.ts

@@ -1,11 +1,10 @@
 import React from 'react';
 import type { ReactionGroupResponse, ReactionResponse } from 'stream-chat';
-import { MessageContextValue } from '../../context/MessageContext';
-import type { DefaultStreamChatGenerics } from '../../types/types';
+import type { MessageContextValue } from '../../context/MessageContext';
 import type { ReactionOptions } from './reactionOptions';
-export type SimpleReactionsListProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = Partial<Pick<MessageContextValue, 'handleFetchReactions' | 'handleReaction'>> & {
+export type SimpleReactionsListProps = Partial<Pick<MessageContextValue, 'handleFetchReactions' | 'handleReaction'>> & {
     /** An array of the own reaction objects to distinguish own reactions visually */
-    own_reactions?: ReactionResponse<StreamChatGenerics>[];
+    own_reactions?: ReactionResponse[];
     /**
      * An object that keeps track of the count of each type of reaction on a message
      * @deprecated This override value is no longer taken into account. Use `reaction_groups` to override reaction counts instead.
@@ -16,6 +15,6 @@ export type SimpleReactionsListProps<StreamChatGenerics extends DefaultStreamCha
     /** A list of the currently supported reactions on a message */
     reactionOptions?: ReactionOptions;
     /** An array of the reaction objects to display in the list */
-    reactions?: ReactionResponse<StreamChatGenerics>[];
+    reactions?: ReactionResponse[];
 };
-export declare const SimpleReactionsList: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: SimpleReactionsListProps<StreamChatGenerics>) => React.JSX.Element | null;
+export declare const SimpleReactionsList: (props: SimpleReactionsListProps) => React.JSX.Element | null;

package/dist/components/Reactions/StreamEmoji.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SpriteImageProps } from './SpriteImage';
+import type { SpriteImageProps } from './SpriteImage';
 import type { Readable } from '../../types/types';
 declare const StreamSpriteEmojiPositions: {
     angry: number[];

package/dist/components/Reactions/hooks/useFetchReactions.d.ts

@@ -1,14 +1,13 @@
-import { ReactionResponse, ReactionSort } from 'stream-chat';
-import { MessageContextValue } from '../../../context';
-import { DefaultStreamChatGenerics } from '../../../types/types';
-import { ReactionType } from '../types';
-export interface FetchReactionsOptions<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> {
-    reactionType: ReactionType<StreamChatGenerics>;
+import type { ReactionResponse, ReactionSort } from 'stream-chat';
+import type { MessageContextValue } from '../../../context';
+import type { ReactionType } from '../types';
+export interface FetchReactionsOptions {
+    reactionType: ReactionType;
     shouldFetch: boolean;
-    handleFetchReactions?: MessageContextValue<StreamChatGenerics>['handleFetchReactions'];
-    sort?: ReactionSort<StreamChatGenerics>;
+    handleFetchReactions?: MessageContextValue['handleFetchReactions'];
+    sort?: ReactionSort;
 }
-export declare function useFetchReactions<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(options: FetchReactionsOptions<StreamChatGenerics>): {
+export declare function useFetchReactions(options: FetchReactionsOptions): {
     isLoading: boolean;
-    reactions: ReactionResponse<StreamChatGenerics>[];
+    reactions: ReactionResponse[];
 };

package/dist/components/Reactions/hooks/useProcessReactions.d.ts

@@ -1,12 +1,11 @@
 import type { ReactionsListProps } from '../ReactionsList';
-import type { DefaultStreamChatGenerics } from '../../../types/types';
 import type { ReactionsComparator, ReactionSummary } from '../types';
 type SharedReactionListProps = 'own_reactions' | 'reaction_counts' | 'reaction_groups' | 'reactionOptions' | 'reactions';
 type UseProcessReactionsParams = Pick<ReactionsListProps, SharedReactionListProps> & {
     sortReactions?: ReactionsComparator;
 };
 export declare const defaultReactionsSort: ReactionsComparator;
-export declare const useProcessReactions: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(params: UseProcessReactionsParams) => {
+export declare const useProcessReactions: (params: UseProcessReactionsParams) => {
     existingReactions: ReactionSummary[];
     hasReactions: boolean;
     totalReactionCount: number;

package/dist/components/Reactions/types.d.ts

@@ -1,6 +1,5 @@
 import type { ComponentType } from 'react';
-import type { DefaultGenerics, ExtendableGenerics, ReactionResponse } from 'stream-chat';
-import { DefaultStreamChatGenerics } from '../../types';
+import type { ReactionResponse } from 'stream-chat';
 export interface ReactionSummary {
     EmojiComponent: ComponentType | null;
     firstReactionAt: Date | null;
@@ -12,5 +11,5 @@ export interface ReactionSummary {
     unlistedReactedUserCount: number;
 }
 export type ReactionsComparator = (a: ReactionSummary, b: ReactionSummary) => number;
-export type ReactionDetailsComparator<StreamChatGenerics extends ExtendableGenerics = DefaultGenerics> = (a: ReactionResponse<StreamChatGenerics>, b: ReactionResponse<StreamChatGenerics>) => number;
-export type ReactionType<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = ReactionResponse<StreamChatGenerics>['type'];
+export type ReactionDetailsComparator = (a: ReactionResponse, b: ReactionResponse) => number;
+export type ReactionType = ReactionResponse['type'];

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

@@ -1,3 +1,3 @@
-import { ForwardedRef, MutableRefObject } from 'react';
+import type { ForwardedRef, MutableRefObject } from 'react';
 export declare const isMutableRef: <T>(ref: ForwardedRef<T> | null) => ref is MutableRefObject<T>;
 export declare const getImageDimensions: (source: string) => Promise<[number, number]>;

package/dist/components/SafeAnchor/SafeAnchor.d.ts

@@ -1,4 +1,5 @@
-import React, { PropsWithChildren } from 'react';
+import type { PropsWithChildren } from 'react';
+import React from 'react';
 /**
  * Similar to a regular anchor tag, but it sanitizes the href value and prevents XSS
  */

package/dist/components/{CommandItem → TextareaComposer/SuggestionList}/CommandItem.d.ts

@@ -1,4 +1,5 @@
-import React, { PropsWithChildren } from 'react';
+import type { PropsWithChildren } from 'react';
+import React from 'react';
 export type CommandItemProps = {
     entity: {
         /** Arguments of command */

package/dist/components/{CommandItem → TextareaComposer/SuggestionList}/CommandItem.js

@@ -1,5 +1,5 @@
 import React from 'react';
-const UnMemoizedCommandItem = (props) => {
+export const CommandItem = (props) => {
     const { entity } = props;
     return (React.createElement("div", { className: 'str-chat__slash-command' },
         React.createElement("span", { className: 'str-chat__slash-command-header' },
@@ -9,4 +9,3 @@ const UnMemoizedCommandItem = (props) => {
         React.createElement("br", null),
         React.createElement("span", { className: 'str-chat__slash-command-description' }, entity.description)));
 };
-export const CommandItem = React.memo(UnMemoizedCommandItem);

package/dist/components/{EmoticonItem → TextareaComposer/SuggestionList}/EmoticonItem.d.ts

@@ -1,17 +1,17 @@
 import React from 'react';
 export type EmoticonItemProps = {
     entity: {
+        /** Name for emoticon */
+        name: string;
+        /** Native value or actual emoticon */
+        native: string;
         /** The parts of the Name property of the entity (or id if no name) that can be matched to the user input value.
          * Default is bold for matches, but can be overwritten in css.
          * */
-        itemNameParts: {
-            match: string;
+        tokenizedDisplayName: {
+            token: string;
             parts: string[];
         };
-        /** Name for emoticon */
-        name: string;
-        /** Native value or actual emoticon */
-        native: string;
     };
 };
-export declare const EmoticonItem: (props: EmoticonItemProps) => React.JSX.Element;
+export declare const EmoticonItem: (props: EmoticonItemProps) => React.JSX.Element | null;

package/dist/components/TextareaComposer/SuggestionList/EmoticonItem.js

@@ -0,0 +1,12 @@
+import React from 'react';
+export const EmoticonItem = (props) => {
+    const { entity } = props;
+    const hasEntity = Object.keys(entity).length;
+    if (!hasEntity)
+        return null;
+    const { parts, token } = entity.tokenizedDisplayName ?? {};
+    const renderName = () => parts?.map((part, i) => part.toLowerCase() === token ? (React.createElement("span", { className: 'str-chat__emoji-item--highlight', key: `part-${i}` }, part)) : (React.createElement("span", { className: 'str-chat__emoji-item--part', key: `part-${i}` }, part))) ?? null;
+    return (React.createElement("div", { className: 'str-chat__emoji-item' },
+        React.createElement("span", { className: 'str-chat__emoji-item--entity' }, entity.native),
+        React.createElement("span", { className: 'str-chat__emoji-item--name' }, renderName())));
+};

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { SuggestionItemProps } from './SuggestionListItem';
+export type SuggestionListProps = Partial<{
+    SuggestionItem: React.ComponentType<SuggestionItemProps>;
+    className?: string;
+    closeOnClickOutside?: boolean;
+    containerClassName?: string;
+    focusedItemIndex: number;
+    setFocusedItemIndex: (index: number) => void;
+}>;
+export declare const defaultComponents: {
+    '/': (props: React.PropsWithChildren<import("./CommandItem").CommandItemProps>) => React.JSX.Element;
+    ':': (props: import("./EmoticonItem").EmoticonItemProps) => React.JSX.Element | null;
+    '@': ({ Avatar, entity }: import("./UserItem").UserItemProps) => React.JSX.Element | null;
+};
+export declare const SuggestionList: ({ className, closeOnClickOutside, containerClassName, focusedItemIndex, setFocusedItemIndex, }: SuggestionListProps) => React.JSX.Element | null;

package/dist/components/TextareaComposer/SuggestionList/SuggestionList.js

@@ -0,0 +1,49 @@
+import clsx from 'clsx';
+import React, { useEffect, useState } from 'react';
+import { CommandItem } from './CommandItem';
+import { EmoticonItem } from './EmoticonItem';
+import { SuggestionListItem as DefaultSuggestionListItem } from './SuggestionListItem';
+import { UserItem } from './UserItem';
+import { useComponentContext } from '../../../context/ComponentContext';
+import { useStateStore } from '../../../store';
+import { InfiniteScrollPaginator } from '../../InfiniteScrollPaginator/InfiniteScrollPaginator';
+import { useMessageComposer } from '../../MessageInput';
+const textComposerStateSelector = (state) => ({
+    suggestions: state.suggestions,
+});
+const searchSourceStateSelector = (nextValue) => ({
+    items: nextValue.items ?? [],
+});
+export const defaultComponents = {
+    '/': CommandItem,
+    ':': EmoticonItem,
+    '@': UserItem,
+};
+export const SuggestionList = ({ className, closeOnClickOutside = true, containerClassName, focusedItemIndex, setFocusedItemIndex, }) => {
+    const { AutocompleteSuggestionItem = DefaultSuggestionListItem } = useComponentContext();
+    const messageComposer = useMessageComposer();
+    const { textComposer } = messageComposer;
+    const { suggestions } = useStateStore(textComposer.state, textComposerStateSelector);
+    const { items } = useStateStore(suggestions?.searchSource.state, searchSourceStateSelector) ?? {};
+    const [container, setContainer] = useState(null);
+    // @ts-expect-error component type mismatch
+    const component = suggestions?.trigger && defaultComponents[suggestions?.trigger];
+    useEffect(() => {
+        if (!closeOnClickOutside || !suggestions || !container)
+            return;
+        const handleClick = (event) => {
+            if (container.contains(event.target))
+                return;
+            textComposer.closeSuggestions();
+        };
+        document.addEventListener('click', handleClick);
+        return () => {
+            document.removeEventListener('click', handleClick);
+        };
+    }, [closeOnClickOutside, suggestions, container, textComposer]);
+    if (!suggestions || !items?.length || !component)
+        return null;
+    return (React.createElement("div", { className: clsx('str-chat__suggestion-list-container', containerClassName), ref: setContainer },
+        React.createElement(InfiniteScrollPaginator, { loadNextOnScrollToBottom: suggestions.searchSource.search, threshold: 100 },
+            React.createElement("ul", { className: clsx('str-chat__suggestion-list str-chat__suggestion-list--react', className) }, items.map((item, i) => (React.createElement(AutocompleteSuggestionItem, { component: component, focused: focusedItemIndex === i, item: item, key: item.id.toString(), onMouseEnter: () => setFocusedItemIndex?.(i) })))))));
+};

package/dist/components/TextareaComposer/SuggestionList/SuggestionListItem.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import type { CommandResponse, TextComposerSuggestion, UserResponse } from 'stream-chat';
+import type { EmojiSearchIndexResult } from '../../MessageInput';
+export type SuggestionCommand = CommandResponse;
+export type SuggestionUser = UserResponse;
+export type SuggestionEmoji = EmojiSearchIndexResult;
+export type SuggestionItem = SuggestionUser | SuggestionCommand | SuggestionEmoji;
+export type SuggestionItemProps = {
+    component: React.ComponentType<{
+        entity: SuggestionItem;
+        focused: boolean;
+    }>;
+    item: TextComposerSuggestion;
+    focused: boolean;
+    className?: string;
+    onMouseEnter?: () => void;
+};
+export declare const SuggestionListItem: React.ForwardRefExoticComponent<SuggestionItemProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/TextareaComposer/SuggestionList/SuggestionListItem.js

@@ -0,0 +1,25 @@
+import clsx from 'clsx';
+import { useLayoutEffect } from 'react';
+import React, { useCallback, useRef } from 'react';
+import { useMessageComposer } from '../../MessageInput';
+export const SuggestionListItem = React.forwardRef(function SuggestionListItem({ className, component: Component, focused, item, onMouseEnter }, innerRef) {
+    const { textComposer } = useMessageComposer();
+    const containerRef = useRef(null);
+    const handleSelect = useCallback(() => {
+        textComposer.handleSelect(item);
+    }, [item, textComposer]);
+    useLayoutEffect(() => {
+        if (!focused)
+            return;
+        containerRef.current?.scrollIntoView({ behavior: 'instant', block: 'nearest' });
+    }, [focused, containerRef]);
+    return (React.createElement("li", { className: clsx('str-chat__suggestion-list-item', className, {
+            'str-chat__suggestion-item--selected': focused,
+        }), onMouseEnter: onMouseEnter, ref: containerRef },
+        React.createElement("button", { onClick: handleSelect, onKeyDown: (event) => {
+                if (event.key === 'Enter') {
+                    handleSelect();
+                }
+            }, ref: innerRef },
+            React.createElement(Component, { entity: item, focused: focused }))));
+});

package/dist/components/{UserItem → TextareaComposer/SuggestionList}/UserItem.d.ts

@@ -1,13 +1,13 @@
 import React from 'react';
-import { AvatarProps } from '../Avatar';
+import type { AvatarProps } from '../../Avatar';
 export type UserItemProps = {
     /** The user */
     entity: {
         /** The parts of the Name property of the entity (or id if no name) that can be matched to the user input value.
          * Default is bold for matches, but can be overwritten in css.
          * */
-        itemNameParts: {
-            match: string;
+        tokenizedDisplayName: {
+            token: string;
             parts: string[];
         };
         /** Id of the user */
@@ -20,4 +20,7 @@ export type UserItemProps = {
     /** Custom UI component to display user avatar, defaults to and accepts same props as: [Avatar](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Avatar/Avatar.tsx) */
     Avatar?: React.ComponentType<AvatarProps>;
 };
-export declare const UserItem: ({ Avatar, entity }: UserItemProps) => React.JSX.Element;
+/**
+ * UI component for mentions rendered in suggestion list
+ */
+export declare const UserItem: ({ Avatar, entity }: UserItemProps) => React.JSX.Element | null;

package/dist/components/TextareaComposer/SuggestionList/UserItem.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import clsx from 'clsx';
+import { Avatar as DefaultAvatar } from '../../Avatar';
+/**
+ * UI component for mentions rendered in suggestion list
+ */
+export const UserItem = ({ Avatar = DefaultAvatar, entity }) => {
+    const hasEntity = !!Object.keys(entity).length;
+    if (!hasEntity)
+        return null;
+    const { parts, token } = entity.tokenizedDisplayName;
+    const renderName = () => parts.map((part, i) => {
+        const matches = part.toLowerCase() === token;
+        const partWithHTMLSpacesAround = part.replace(/^\s+|\s+$/g, '\u00A0');
+        return (React.createElement("span", { className: clsx({
+                'str-chat__emoji-item--highlight': matches,
+                'str-chat__emoji-item--part': !matches,
+            }), key: `part-${i}` }, partWithHTMLSpacesAround));
+    });
+    return (React.createElement("div", { className: 'str-chat__user-item' },
+        React.createElement(Avatar, { className: 'str-chat__avatar--autocomplete-item', image: entity.image, name: entity.name || entity.id }),
+        React.createElement("span", { className: 'str-chat__user-item--name', "data-testid": 'user-item-name' }, renderName()),
+        React.createElement("div", { className: 'str-chat__user-item-at' }, "@")));
+};

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

@@ -0,0 +1,5 @@
+export * from './CommandItem';
+export * from './EmoticonItem';
+export * from './SuggestionList';
+export * from './SuggestionListItem';
+export * from './UserItem';

package/dist/components/TextareaComposer/SuggestionList/index.js

@@ -0,0 +1,5 @@
+export * from './CommandItem';
+export * from './EmoticonItem';
+export * from './SuggestionList';
+export * from './SuggestionListItem';
+export * from './UserItem';

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

@@ -0,0 +1,13 @@
+import type { TextareaHTMLAttributes } from 'react';
+import React from 'react';
+export type TextComposerProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'style' | 'defaultValue' | 'disabled'> & {
+    closeSuggestionsOnClickOutside?: boolean;
+    containerClassName?: string;
+    dropdownClassName?: string;
+    grow?: boolean;
+    itemClassName?: string;
+    listClassName?: string;
+    maxRows?: number;
+    shouldSubmit?: (event: React.KeyboardEvent<HTMLTextAreaElement>) => boolean;
+};
+export declare const TextareaComposer: ({ className, closeSuggestionsOnClickOutside, containerClassName, grow: growProp, listClassName, maxRows: maxRowsProp, onBlur, onChange, onKeyDown, onScroll, placeholder: placeholderProp, shouldSubmit: shouldSubmitProp, ...restProps }: TextComposerProps) => React.JSX.Element;

package/dist/components/TextareaComposer/TextareaComposer.js

@@ -0,0 +1,155 @@
+import clsx from 'clsx';
+import React, { useCallback, useEffect, 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,
+});
+/**
+ * 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, 
+// dropdownClassName, // todo: X find a different way to prevent prop drilling
+grow: growProp, 
+// itemClassName, // todo: X find a different way to prevent prop drilling
+listClassName, maxRows: maxRowsProp = 1, onBlur, onChange, onKeyDown, onScroll, placeholder: placeholderProp, shouldSubmit: shouldSubmitProp, ...restProps }) => {
+    const { t } = useTranslationContext();
+    const { AutocompleteSuggestionList = DefaultSuggestionList } = useComponentContext();
+    const { additionalTextareaProps, cooldownRemaining, grow: growContext, handleSubmit, maxRows: maxRowsContext, onPaste, shouldSubmit: shouldSubmitContext, textareaRef, } = useMessageInputContext();
+    const grow = growProp ?? growContext;
+    const maxRows = maxRowsProp ?? maxRowsContext;
+    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 { 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 (event.key === 'Enter') {
+            // allow next line only on Shift + Enter. Enter is reserved for submission.
+            event.preventDefault();
+        }
+        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') {
+                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) {
+            handleSubmit();
+            textareaRef.current.selectionEnd = 0;
+        }
+    }, [
+        focusedItemIndex,
+        handleSubmit,
+        onKeyDown,
+        shouldSubmit,
+        suggestions,
+        textComposer,
+        textareaRef,
+    ]);
+    const scrollHandler = useCallback((event) => {
+        if (onScroll) {
+            onScroll(event);
+        }
+        else {
+            textComposer.closeSuggestions();
+        }
+    }, [onScroll, textComposer]);
+    useEffect(() => {
+        // FIXME: find the real reason for cursor being set to the end on each change
+        // This is a workaround to prevent the cursor from jumping
+        // to the end of the textarea when the user is typing
+        // at the position that is not at the end of the textarea value.
+        if (textareaRef.current && !isComposing) {
+            textareaRef.current.selectionStart = selection.start;
+            textareaRef.current.selectionEnd = selection.end;
+        }
+    }, [text, textareaRef, selection.start, selection.end, isComposing]);
+    useEffect(() => {
+        if (textComposer.suggestions) {
+            setFocusedItemIndex(0);
+        }
+    }, [textComposer.suggestions]);
+    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, { ...restProps, "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: grow ? maxRows : 1, onBlur: onBlur, onChange: changeHandler, onCompositionEnd: onCompositionEnd, onCompositionStart: onCompositionStart, onKeyDown: keyDownHandler, onPaste: onPaste, onScroll: scrollHandler, placeholder: placeholder || t('Type your message'), ref: (ref) => {
+                textareaRef.current = ref;
+            }, value: text }),
+        !isComposing && (React.createElement(AutocompleteSuggestionList, { className: listClassName, closeOnClickOutside: closeSuggestionsOnClickOutside, focusedItemIndex: focusedItemIndex, setFocusedItemIndex: setFocusedItemIndex }))));
+};

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

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

package/dist/components/TextareaComposer/index.js

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

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

@@ -1,18 +1,18 @@
 import React from 'react';
-import { MessageInputProps } from '../MessageInput';
-import { MessageListProps, VirtualizedMessageListProps } from '../MessageList';
+import type { MessageInputProps } from '../MessageInput';
+import type { MessageListProps, VirtualizedMessageListProps } from '../MessageList';
 import type { MessageProps, MessageUIComponentProps } from '../Message/types';
 import type { MessageActionsArray } from '../Message/utils';
-import type { CustomTrigger, DefaultStreamChatGenerics } from '../../types/types';
-export type ThreadProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics, V extends CustomTrigger = CustomTrigger> = {
+import type { LocalMessage } from 'stream-chat';
+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<StreamChatGenerics, V>;
+    additionalMessageInputProps?: MessageInputProps;
     /** Additional props for `MessageList` component: [available props](https://getstream.io/chat/docs/sdk/react/core-components/message_list/#props) */
-    additionalMessageListProps?: MessageListProps<StreamChatGenerics>;
+    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<StreamChatGenerics>>;
+    additionalParentMessageProps?: Partial<MessageProps>;
     /** Additional props for `VirtualizedMessageList` component: [available props](https://getstream.io/chat/docs/sdk/react/core-components/virtualized_list/#props) */
-    additionalVirtualizedMessageListProps?: VirtualizedMessageListProps<StreamChatGenerics>;
+    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 */
@@ -20,13 +20,16 @@ export type ThreadProps<StreamChatGenerics extends DefaultStreamChatGenerics = D
     /** 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<StreamChatGenerics>>;
+    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;
 };
+export declare const useLegacyThreadContext: () => {
+    legacyThread: LocalMessage | undefined;
+};
 /**
  * The Thread component renders a parent Message with a list of replies
  */
-export declare const Thread: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics, V extends CustomTrigger = CustomTrigger>(props: ThreadProps<StreamChatGenerics, V>) => React.JSX.Element | null;
+export declare const Thread: (props: ThreadProps) => React.JSX.Element | null;