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

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

@@ -24,7 +24,7 @@ export const useChat = ({ client, defaultLanguage = 'en', i18nInstance, initialN
     useEffect(() => {
         if (!client)
             return;
-        const version = "13.0.0-rc.1";
+        const version = "13.0.0-rc.2";
         const userAgent = client.getUserAgent();
         if (!userAgent.includes('stream-chat-react')) {
             // result looks like: 'stream-chat-react-2.3.2-stream-chat-javascript-client-browser-2.2.2'

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

@@ -1,13 +1,7 @@
 import type { PropsWithChildren } from 'react';
 import React from 'react';
+import type { CommandResponse } from 'stream-chat';
 export type CommandItemProps = {
-    entity: {
-        /** Arguments of command */
-        args?: string;
-        /** Description of command */
-        description?: string;
-        /** Name of the command */
-        name?: string;
-    };
+    entity: CommandResponse;
 };
 export declare const CommandItem: (props: PropsWithChildren<CommandItemProps>) => React.JSX.Element;

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

@@ -1,16 +1,14 @@
 import React from 'react';
-import type { SuggestionItemProps } from './SuggestionListItem';
+import type { SuggestionListItemComponentProps } from './SuggestionListItem';
+type SuggestionTrigger = '/' | ':' | '@' | string;
 export type SuggestionListProps = Partial<{
-    SuggestionItem: React.ComponentType<SuggestionItemProps>;
+    suggestionItemComponents: Record<SuggestionTrigger, React.ComponentType<SuggestionListItemComponentProps>>;
     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;
+export declare const defaultComponents: Record<SuggestionTrigger, React.ComponentType<SuggestionListItemComponentProps>>;
+export declare const SuggestionList: ({ className, closeOnClickOutside, containerClassName, focusedItemIndex, setFocusedItemIndex, suggestionItemComponents, }: SuggestionListProps) => React.JSX.Element | null;
+export {};

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

@@ -15,19 +15,20 @@ const searchSourceStateSelector = (nextValue) => ({
     items: nextValue.items ?? [],
 });
 export const defaultComponents = {
-    '/': CommandItem,
-    ':': EmoticonItem,
-    '@': UserItem,
+    '/': (props) => (React.createElement(CommandItem, { entity: props.entity })),
+    ':': (props) => (React.createElement(EmoticonItem, { entity: props.entity })),
+    '@': (props) => (React.createElement(UserItem, { entity: props.entity })),
 };
-export const SuggestionList = ({ className, closeOnClickOutside = true, containerClassName, focusedItemIndex, setFocusedItemIndex, }) => {
+export const SuggestionList = ({ className, closeOnClickOutside = true, containerClassName, focusedItemIndex, setFocusedItemIndex, suggestionItemComponents = defaultComponents, }) => {
     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];
+    const component = suggestions?.trigger
+        ? suggestionItemComponents[suggestions?.trigger]
+        : undefined;
     useEffect(() => {
         if (!closeOnClickOutside || !suggestions || !container)
             return;

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

@@ -1,15 +1,15 @@
 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;
+import type { TextComposerSuggestion } from 'stream-chat';
+import type { UserItemProps } from './UserItem';
+import type { CommandItemProps } from './CommandItem';
+import type { EmoticonItemProps } from './EmoticonItem';
+export type DefaultSuggestionListItemEntity = UserItemProps['entity'] | CommandItemProps['entity'] | EmoticonItemProps['entity'];
+export type SuggestionListItemComponentProps = {
+    entity: DefaultSuggestionListItemEntity | unknown;
+    focused: boolean;
+};
 export type SuggestionItemProps = {
-    component: React.ComponentType<{
-        entity: SuggestionItem;
-        focused: boolean;
-    }>;
+    component: React.ComponentType<SuggestionListItemComponentProps>;
     item: TextComposerSuggestion;
     focused: boolean;
     className?: string;

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

@@ -1,6 +1,5 @@
 import clsx from 'clsx';
-import { useLayoutEffect } from 'react';
-import React, { useCallback, useRef } from 'react';
+import React, { useCallback, useLayoutEffect, useRef } from 'react';
 import { useMessageComposer } from '../../MessageInput';
 export const SuggestionListItem = React.forwardRef(function SuggestionListItem({ className, component: Component, focused, item, onMouseEnter }, innerRef) {
     const { textComposer } = useMessageComposer();