feat: replace SuggestionItem prop with suggestionItemComponents prop for SuggestionList

Author: MartinCupela

src/components/MessageInput/__tests__/EditMessageForm.test.js

@@ -926,7 +926,7 @@ describe(`EditMessageForm`, () => {
       const CustomStateSetter = () => {
         const composer = useMessageComposerMock();
         useEffect(() => {
-          composer.customDataManager.setData(customMessageData);
+          composer.customDataManager.setMessageData(customMessageData);
         }, [composer]);
       };
       const { container, submit } = await renderComponent({
@@ -954,7 +954,7 @@ describe(`EditMessageForm`, () => {
       const CustomStateSetter = () => {
         const composer = useMessageComposerMock();
         useEffect(() => {
-          composer.customDataManager.setData(customMessageData);
+          composer.customDataManager.setMessageData(customMessageData);
         }, [composer]);
       };
       const { container, submit } = await renderComponent({

src/components/MessageInput/__tests__/MessageInput.test.js

@@ -794,7 +794,7 @@ describe(`MessageInputFlat`, () => {
       const customMessageData = { customX: 'customX' };
       const CustomStateSetter = null;
 
-      customChannel.messageComposer.customDataManager.setData(customMessageData);
+      customChannel.messageComposer.customDataManager.setMessageData(customMessageData);
       const { container, submit } = await renderComponent({
         customChannel,
         customClient,
@@ -823,7 +823,7 @@ describe(`MessageInputFlat`, () => {
       const overrideMock = jest.fn().mockImplementation(() => Promise.resolve());
       const { customChannel, customClient } = await setup();
       const customMessageData = { customX: 'customX' };
-      customChannel.messageComposer.customDataManager.setData(customMessageData);
+      customChannel.messageComposer.customDataManager.setMessageData(customMessageData);
       const { container, submit } = await renderComponent({
         customChannel,
         customClient,

src/components/TextareaComposer/SuggestionList/CommandItem.tsx

@@ -1,15 +1,9 @@
 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 const CommandItem = (props: PropsWithChildren<CommandItemProps>) => {

src/components/TextareaComposer/SuggestionList/SuggestionList.tsx

@@ -1,7 +1,10 @@
 import clsx from 'clsx';
 import React, { useEffect, useState } from 'react';
+import type { CommandItemProps } from './CommandItem';
 import { CommandItem } from './CommandItem';
+import type { EmoticonItemProps } from './EmoticonItem';
 import { EmoticonItem } from './EmoticonItem';
+import type { SuggestionListItemComponentProps } from './SuggestionListItem';
 import { SuggestionListItem as DefaultSuggestionListItem } from './SuggestionListItem';
 import { UserItem } from './UserItem';
 import { useComponentContext } from '../../../context/ComponentContext';
@@ -13,10 +16,15 @@ import type {
   TextComposerState,
   TextComposerSuggestion,
 } from 'stream-chat';
-import type { SuggestionItemProps } from './SuggestionListItem';
+import type { UserItemProps } from './UserItem';
+
+type SuggestionTrigger = '/' | ':' | '@' | string;
 
 export type SuggestionListProps = Partial<{
-  SuggestionItem: React.ComponentType<SuggestionItemProps>;
+  suggestionItemComponents: Record<
+    SuggestionTrigger,
+    React.ComponentType<SuggestionListItemComponentProps>
+  >;
   className?: string;
   closeOnClickOutside?: boolean;
   containerClassName?: string;
@@ -34,18 +42,28 @@ const searchSourceStateSelector = (
   items: nextValue.items ?? [],
 });
 
-export const defaultComponents = {
-  '/': CommandItem,
-  ':': EmoticonItem,
-  '@': UserItem,
-};
+export const defaultComponents: Record<
+  SuggestionTrigger,
+  React.ComponentType<SuggestionListItemComponentProps>
+> = {
+  '/': (props: SuggestionListItemComponentProps) => (
+    <CommandItem entity={props.entity as CommandItemProps['entity']} />
+  ),
+  ':': (props: SuggestionListItemComponentProps) => (
+    <EmoticonItem entity={props.entity as EmoticonItemProps['entity']} />
+  ),
+  '@': (props: SuggestionListItemComponentProps) => (
+    <UserItem entity={props.entity as UserItemProps['entity']} />
+  ),
+} as const;
 
 export const SuggestionList = ({
   className,
   closeOnClickOutside = true,
   containerClassName,
   focusedItemIndex,
   setFocusedItemIndex,
+  suggestionItemComponents = defaultComponents,
 }: SuggestionListProps) => {
   const { AutocompleteSuggestionItem = DefaultSuggestionListItem } =
     useComponentContext();
@@ -56,8 +74,9 @@ export const SuggestionList = ({
     useStateStore(suggestions?.searchSource.state, searchSourceStateSelector) ?? {};
   const [container, setContainer] = useState<HTMLDivElement | null>(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;

src/components/TextareaComposer/SuggestionList/SuggestionListItem.tsx

@@ -1,21 +1,24 @@
 import clsx from 'clsx';
 import type { Ref } from 'react';
-import { useLayoutEffect } from 'react';
-import React, { useCallback, useRef } from 'react';
+import React, { useCallback, useLayoutEffect, useRef } from 'react';
 import { useMessageComposer } from '../../MessageInput';
-import type { CommandResponse, TextComposerSuggestion, UserResponse } from 'stream-chat';
-import type { EmojiSearchIndexResult } from '../../MessageInput';
+import type { TextComposerSuggestion } from 'stream-chat';
+import type { UserItemProps } from './UserItem';
+import type { CommandItemProps } from './CommandItem';
+import type { EmoticonItemProps } from './EmoticonItem';
 
-export type SuggestionCommand = CommandResponse;
-export type SuggestionUser = UserResponse;
-export type SuggestionEmoji = EmojiSearchIndexResult;
-export type SuggestionItem = SuggestionUser | SuggestionCommand | SuggestionEmoji;
+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;