stream-chat-react-native-core 3.10.2 → 4.0.0-beta.1

package/src/contexts/messagesContext/MessagesContext.tsx

@@ -7,7 +7,7 @@ import type { TouchableOpacityProps } from 'react-native';
 import type { ChannelState, MessageResponse } from 'stream-chat';
 
 import type { Alignment } from '../messageContext/MessageContext';
-import type { MessageAction } from '../messageOverlayContext/MessageOverlayContext';
+import type { MessageActionType } from '../../components/MessageOverlay/MessageActionListItem';
 import type { SuggestionCommand } from '../suggestionsContext/SuggestionsContext';
 import type { DeepPartial } from '../themeContext/ThemeContext';
 import type { Theme } from '../themeContext/utils/theme';
@@ -29,12 +29,14 @@ import type { MessageAvatarProps } from '../../components/Message/MessageSimple/
 import type { MessageContentProps } from '../../components/Message/MessageSimple/MessageContent';
 import type { MessageDeletedProps } from '../../components/Message/MessageSimple/MessageDeleted';
 import type { MessageFooterProps } from '../../components/Message/MessageSimple/MessageFooter';
+import type { MessagePinnedHeaderProps } from 'src/components/Message/MessageSimple/MessagePinnedHeader';
 import type { MessageRepliesProps } from '../../components/Message/MessageSimple/MessageReplies';
 import type { MessageRepliesAvatarsProps } from '../../components/Message/MessageSimple/MessageRepliesAvatars';
 import type { MessageStatusProps } from '../../components/Message/MessageSimple/MessageStatus';
 import type { MessageSimpleProps } from '../../components/Message/MessageSimple/MessageSimple';
 import type { MessageTextProps } from '../../components/Message/MessageSimple/MessageTextContainer';
 import type { MarkdownRules } from '../../components/Message/MessageSimple/utils/renderText';
+import type { MessageActionsParams } from '../../components/Message/utils/messageActions';
 import type { DateHeaderProps } from '../../components/MessageList/DateHeader';
 import type { MessageType } from '../../components/MessageList/hooks/useMessageList';
 import type { InlineDateSeparatorProps } from '../../components/MessageList/InlineDateSeparator';
@@ -57,13 +59,6 @@ import type {
 } from '../../types/types';
 import type { ReactionData } from '../../utils/utils';
 
-export type MessagesConfig = {
-  mutesEnabled?: boolean;
-  quotedRepliesEnabled?: boolean;
-  reactionsEnabled?: boolean;
-  threadRepliesEnabled?: boolean;
-};
-
 export type MessageContentType = 'attachments' | 'files' | 'gallery' | 'quoted_reply' | 'text';
 
 export type MessagesContextValue<
@@ -74,7 +69,7 @@ export type MessagesContextValue<
   Me extends UnknownType = DefaultMessageType,
   Re extends UnknownType = DefaultReactionType,
   Us extends UnknownType = DefaultUserType,
-> = MessagesConfig & {
+> = {
   /**
    * UI component for Attachment.
    * Defaults to: [Attachment](https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/Attachment/Attachment.tsx)
@@ -95,9 +90,12 @@ export type MessagesContextValue<
    * Defaults to: [DateHeader](https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/MessageList/DateHeader.tsx)
    **/
   DateHeader: React.ComponentType<DateHeaderProps>;
+
   /** Should keyboard be dismissed when messaged is touched */
   dismissKeyboardOnMessageTouch: boolean;
+
   enableMessageGroupingByUser: boolean;
+
   /**
    * UI component to display File type attachment.
    * Defaults to: [FileAttachment](https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/Attachment/FileAttachment.tsx)
@@ -124,6 +122,7 @@ export type MessagesContextValue<
    * Defaults to: [Giphy](https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/Attachment/Giphy.tsx)
    */
   Giphy: React.ComponentType<GiphyProps<At, Ch, Co, Ev, Me, Re, Us>>;
+
   /**
    * When true, messageList will be scrolled at first unread message, when opened.
    */
@@ -161,10 +160,15 @@ export type MessagesContextValue<
    */
   MessageFooter: React.ComponentType<MessageFooterProps<At, Ch, Co, Ev, Me, Re, Us>>;
   MessageList: React.ComponentType<MessageListProps<At, Ch, Co, Ev, Me, Re, Us>>;
+  /**
+   * Custom message pinned component
+   */
+  MessagePinnedHeader: React.ComponentType<MessagePinnedHeaderProps<At, Ch, Co, Ev, Me, Re, Us>>;
   /**
    * UI component for MessageReplies
    * Defaults to: [MessageReplies](https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/MessageSimple/MessageReplies.tsx)
    */
+
   MessageReplies: React.ComponentType<MessageRepliesProps<At, Ch, Co, Ev, Me, Re, Us>>;
   /**
    * UI Component for MessageRepliesAvatars
@@ -245,16 +249,6 @@ export type MessagesContextValue<
    * @overrideType Object
    */
   additionalTouchableProps?: Omit<TouchableOpacityProps, 'style'>;
-  /**
-   * When false, pop-out animation will be disabled for message bubble, onLongPress
-   */
-  animatedLongPress?: boolean;
-  /**
-   * Full override of the block user button in the Message Actions
-   *
-   * Please check [cookbook](https://github.com/GetStream/stream-chat-react-native/wiki/Cookbook-v3.0#override-or-intercept-message-actions-edit-delete-reaction-reply-etc) for details.
-   */
-  blockUser?: ((message: MessageType<At, Ch, Co, Ev, Me, Re, Us>) => MessageAction) | null;
   /**
    * Custom UI component to override default cover (between Header and Footer) of Card component.
    * Accepts the same props as Card component.
@@ -270,31 +264,18 @@ export type MessagesContextValue<
    * Accepts the same props as Card component.
    */
   CardHeader?: React.ComponentType<CardProps<At, Ch, Co, Ev, Me, Re, Us>>;
-  /**
-   * Full override of the copy message button in the Message Actions
-   *
-   * Please check [cookbook](https://github.com/GetStream/stream-chat-react-native/wiki/Cookbook-v3.0#override-or-intercept-message-actions-edit-delete-reaction-reply-etc) for details.
-   */
-  copyMessage?: ((message: MessageType<At, Ch, Co, Ev, Me, Re, Us>) => MessageAction) | null;
+
   /**
    * Full override of the delete message button in the Message Actions
    *
    * Please check [cookbook](https://github.com/GetStream/stream-chat-react-native/wiki/Cookbook-v3.0#override-or-intercept-message-actions-edit-delete-reaction-reply-etc) for details.
    */
-  deleteMessage?: ((message: MessageType<At, Ch, Co, Ev, Me, Re, Us>) => MessageAction) | null;
+
+  /** Control if the deleted message is visible to both the send and reciever, either of them or none  */
+  deletedMessagesVisibilityType?: 'always' | 'never' | 'receiver' | 'sender';
+
   disableTypingIndicator?: boolean;
-  /**
-   * Full override of the edit message button in the Message Actions
-   *
-   * Please check [cookbook](https://github.com/GetStream/stream-chat-react-native/wiki/Cookbook-v3.0#override-or-intercept-message-actions-edit-delete-reaction-reply-etc) for details.
-   */
-  editMessage?: ((message: MessageType<At, Ch, Co, Ev, Me, Re, Us>) => MessageAction) | null;
-  /**
-   * Full override of the flag message button in the Message Actions
-   *
-   * Please check [cookbook](https://github.com/GetStream/stream-chat-react-native/wiki/Cookbook-v3.0#override-or-intercept-message-actions-edit-delete-reaction-reply-etc) for details.
-   */
-  flagMessage?: ((message: MessageType<At, Ch, Co, Ev, Me, Re, Us>) => MessageAction) | null;
+
   /**
    * Whether messages should be aligned to right or left part of screen.
    * By default, messages will be received messages will be aligned to left and
@@ -316,6 +297,10 @@ export type MessagesContextValue<
   handleFlag?: (message: MessageType<At, Ch, Co, Ev, Me, Re, Us>) => Promise<void>;
   /** Handler to access when a mute user action is invoked */
   handleMute?: (message: MessageType<At, Ch, Co, Ev, Me, Re, Us>) => Promise<void>;
+  /** Handler to access when a pin/unpin user action is invoked*/
+  handlePinMessage?:
+    | ((message: MessageType<At, Ch, Co, Ev, Me, Re, Us>) => MessageActionType)
+    | null;
   /** Handler to access when a quoted reply action is invoked */
   handleQuotedReply?: (message: MessageType<At, Ch, Co, Ev, Me, Re, Us>) => Promise<void>;
   /** Handler to process a reaction */
@@ -380,89 +365,18 @@ export type MessagesContextValue<
    *
    * @overrideType Function | Array<Objects>
    */
-  messageActions?:
-    | (MessageAction | null)[]
-    | (({
-        blockUser,
-        canModifyMessage,
-        copyMessage,
-        deleteMessage,
-        dismissOverlay,
-        editMessage,
-        error,
-        flagMessage,
-        isMyMessage,
-        isThreadMessage,
-        message,
-        messageReactions,
-        muteUser,
-        quotedRepliesEnabled,
-        quotedReply,
-        retry,
-        threadRepliesEnabled,
-        threadReply,
-      }: {
-        blockUser: MessageAction | null;
-        canModifyMessage: boolean;
-        copyMessage: MessageAction | null;
-        deleteMessage: MessageAction | null;
-        dismissOverlay: () => void;
-        editMessage: MessageAction | null;
-        error: boolean;
-        flagMessage: MessageAction | null;
-        isMyMessage: boolean;
-        isThreadMessage: boolean;
-        message: MessageType<At, Ch, Co, Ev, Me, Re, Us>;
-        messageReactions: boolean;
-        muteUser: MessageAction | null;
-        quotedReply: MessageAction | null;
-        retry: MessageAction | null;
-        threadReply: MessageAction | null;
-        quotedRepliesEnabled?: boolean;
-        threadRepliesEnabled?: boolean;
-      }) => (MessageAction | null)[] | undefined);
+  messageActions?: (param: MessageActionsParams<At, Ch, Co, Ev, Me, Re, Us>) => MessageActionType[];
   /**
    * Custom message header component
    */
   MessageHeader?: React.ComponentType<MessageFooterProps<At, Ch, Co, Ev, Me, Re, Us>>;
   /** Custom UI component for message text */
   MessageText?: React.ComponentType<MessageTextProps<At, Ch, Co, Ev, Me, Re, Us>>;
-  /**
-   * Full override of the mute user button in the Message Actions
-   *
-   * Please check [cookbook](https://github.com/GetStream/stream-chat-react-native/wiki/Cookbook-v3.0#override-or-intercept-message-actions-edit-delete-reaction-reply-etc) for details.
-   * */
-  muteUser?: ((message: MessageType<At, Ch, Co, Ev, Me, Re, Us>) => MessageAction) | null;
+
   /**
    * Theme provided only to messages that are the current users
    */
   myMessageTheme?: DeepPartial<Theme>;
-  /**
-   * Add double tap handler for message.
-   *
-   * ```
-   * <Channel
-   *  onDoubleTapMessage={({
-   *    actionHandlers: {
-   *        deleteMessage, // () => Promise<void>;
-   *        editMessage, // () => void;
-   *        quotedReply, // () => void;
-   *        resendMessage, // () => Promise<void>;
-   *        showMessageOverlay, // () => void;
-   *        toggleBanUser, // () => Promise<void>;
-   *        toggleMuteUser, // () => Promise<void>;
-   *        toggleReaction, // (reactionType: string) => Promise<void>;
-   *    },
-   *    message // message object on which longPress occured
-   *  }) => {
-   *    // Your custom action
-   *  }}
-   * />
-   * ```
-   */
-  onDoubleTapMessage?: (
-    payload: MessageTouchableHandlerPayload<At, Ch, Co, Ev, Me, Re, Us>,
-  ) => void;
   /**
    * Override default handler for onLongPress on message. You have access to payload of that handler as param:
    *
@@ -546,18 +460,7 @@ export type MessagesContextValue<
    * ```
    */
   onPressMessage?: (payload: MessageTouchableHandlerPayload<At, Ch, Co, Ev, Me, Re, Us>) => void;
-  /**
-   * Full override of the quoted reply button in the Message Actions
-   *
-   * Please check [cookbook](https://github.com/GetStream/stream-chat-react-native/wiki/Cookbook-v3.0#override-or-intercept-message-actions-edit-delete-reaction-reply-etc) for details.
-   */
-  quotedReply?: ((message: MessageType<At, Ch, Co, Ev, Me, Re, Us>) => MessageAction) | null;
-  /**
-   * Full override of the resend button in the Message Actions
-   *
-   * Please check [cookbook](https://github.com/GetStream/stream-chat-react-native/wiki/Cookbook-v3.0#override-or-intercept-message-actions-edit-delete-reaction-reply-etc) for details.
-   * */
-  retry?: ((message: MessageType<At, Ch, Co, Ev, Me, Re, Us>) => MessageAction) | null;
+
   /**
    * Full override of the reaction function on Message and Message Overlay
    *
@@ -566,12 +469,8 @@ export type MessagesContextValue<
   selectReaction?: (
     message: MessageType<At, Ch, Co, Ev, Me, Re, Us>,
   ) => (reactionType: string) => Promise<void>;
-  /**
-   * Full override of the thread reply button in the Message Actions
-   *
-   * Please check [cookbook](https://github.com/GetStream/stream-chat-react-native/wiki/Cookbook-v3.0#override-or-intercept-message-actions-edit-delete-reaction-reply-etc) for details.
-   * */
-  threadReply?: (message: MessageType<At, Ch, Co, Ev, Me, Re, Us>) => MessageAction;
+
+  targetedMessage?: string;
 };
 
 export const MessagesContext = React.createContext({} as MessagesContextValue);

package/src/contexts/overlayContext/OverlayContext.tsx

@@ -1,4 +1,5 @@
 import React, { useContext } from 'react';
+import type Animated from 'react-native-reanimated';
 
 import { getDisplayName } from '../utils/getDisplayName';
 
@@ -11,6 +12,7 @@ import type { Theme } from '../themeContext/utils/theme';
 
 import type { AttachmentPickerProps } from '../../components/AttachmentPicker/AttachmentPicker';
 import type { ImageGalleryCustomComponents } from '../../components/ImageGallery/ImageGallery';
+import type { MessageType } from '../../components/MessageList/hooks/useMessageList';
 import type {
   DefaultAttachmentType,
   DefaultChannelType,
@@ -23,13 +25,10 @@ import type {
 } from '../../types/types';
 import type { Streami18n } from '../../utils/Streami18n';
 
-export type BlurType = 'light' | 'dark' | undefined;
-
 export type Overlay = 'alert' | 'gallery' | 'message' | 'none';
 
 export type OverlayContextValue = {
   overlay: Overlay;
-  setBlurType: React.Dispatch<React.SetStateAction<BlurType>>;
   setOverlay: React.Dispatch<React.SetStateAction<Overlay>>;
   style?: DeepPartial<Theme>;
   translucentStatusBar?: boolean;
@@ -62,15 +61,22 @@ export type OverlayProviderProps<
   Partial<
     Pick<
       MessageOverlayContextValue<At, Ch, Co, Ev, Me, Re, Us>,
-      'MessageActions' | 'OverlayReactionList' | 'OverlayReactions'
+      'MessageActionList' | 'MessageActionListItem' | 'OverlayReactionList' | 'OverlayReactions'
     >
   > &
   Pick<OverlayContextValue, 'translucentStatusBar'> & {
+    overlayOpacity: Animated.SharedValue<number>;
     closePicker?: (ref: React.RefObject<BottomSheetMethods>) => void;
+    error?: boolean | Error;
     /** https://github.com/GetStream/stream-chat-react-native/wiki/Internationalization-(i18n) */
     i18nInstance?: Streami18n;
     imageGalleryGridHandleHeight?: number;
     imageGalleryGridSnapPoints?: [string | number, string | number];
+    isMyMessage?: boolean;
+    isThreadMessage?: boolean;
+    message?: MessageType<At, Ch, Co, Ev, Me, Re, Us>;
+    messageReactions?: boolean;
+    messageTextNumberOfLines?: number;
     numberOfImageGalleryGridColumns?: number;
     openPicker?: (ref: React.RefObject<BottomSheetMethods>) => void;
     value?: Partial<OverlayContextValue>;

package/src/contexts/overlayContext/OverlayProvider.tsx

@@ -22,17 +22,18 @@ import { AttachmentPickerError as DefaultAttachmentPickerError } from '../../com
 import { AttachmentPickerBottomSheetHandle as DefaultAttachmentPickerBottomSheetHandle } from '../../components/AttachmentPicker/components/AttachmentPickerBottomSheetHandle';
 import { AttachmentPickerErrorImage as DefaultAttachmentPickerErrorImage } from '../../components/AttachmentPicker/components/AttachmentPickerErrorImage';
 import { CameraSelectorIcon as DefaultCameraSelectorIcon } from '../../components/AttachmentPicker/components/CameraSelectorIcon';
+import { ChannelsStateProvider } from '../../contexts/channelsStateContext/ChannelsStateContext';
 import { FileSelectorIcon as DefaultFileSelectorIcon } from '../../components/AttachmentPicker/components/FileSelectorIcon';
 import { ImageOverlaySelectedComponent as DefaultImageOverlaySelectedComponent } from '../../components/AttachmentPicker/components/ImageOverlaySelectedComponent';
 import { ImageSelectorIcon as DefaultImageSelectorIcon } from '../../components/AttachmentPicker/components/ImageSelectorIcon';
 import { ImageGallery } from '../../components/ImageGallery/ImageGallery';
 import { MessageOverlay } from '../../components/MessageOverlay/MessageOverlay';
+import { OverlayBackdrop } from '../../components/MessageOverlay/OverlayBackdrop';
 import { useStreami18n } from '../../hooks/useStreami18n';
-import { BlurView } from '../../native';
 
 import type BottomSheet from '@gorhom/bottom-sheet';
 
-import { BlurType, OverlayContext, OverlayProviderProps } from './OverlayContext';
+import { OverlayContext, OverlayProviderProps } from './OverlayContext';
 
 import type {
   DefaultAttachmentType,
@@ -100,12 +101,14 @@ export const OverlayProvider = <
     imageGalleryGridSnapPoints,
     ImageOverlaySelectedComponent = DefaultImageOverlaySelectedComponent,
     ImageSelectorIcon = DefaultImageSelectorIcon,
-    MessageActions,
+    MessageActionList,
+    MessageActionListItem,
+    messageTextNumberOfLines,
     numberOfAttachmentImagesToLoadPerCall,
     numberOfAttachmentPickerImageColumns,
     numberOfImageGalleryGridColumns,
     openPicker = (ref) => {
-      if (ref.current) {
+      if (ref.current?.snapTo) {
         ref.current.snapTo(0);
       } else {
         console.warn('bottom and top insets must be set for the image picker to work correctly');
@@ -139,7 +142,6 @@ export const OverlayProvider = <
     t: (key: string) => key,
     tDateTimeParser: (input?: string | number | Date) => Dayjs(input),
   });
-  const [blurType, setBlurType] = useState<BlurType>();
   const [overlay, setOverlay] = useState(value?.overlay || 'none');
 
   const overlayOpacity = useSharedValue(0);
@@ -151,7 +153,6 @@ export const OverlayProvider = <
   useEffect(() => {
     const backAction = () => {
       if (overlay !== 'none') {
-        setBlurType(undefined);
         setOverlay('none');
         return true;
       }
@@ -166,7 +167,7 @@ export const OverlayProvider = <
 
   useEffect(() => {
     if (bottomSheetRef.current) {
-      bottomSheetRef.current.close();
+      bottomSheetRef.current.close?.();
     }
     cancelAnimation(overlayOpacity);
     if (overlay !== 'none') {
@@ -200,7 +201,6 @@ export const OverlayProvider = <
 
   const overlayContext = {
     overlay,
-    setBlurType,
     setOverlay,
     style: value?.style,
     translucentStatusBar,
@@ -214,24 +214,25 @@ export const OverlayProvider = <
         <MessageOverlayProvider<At, Ch, Co, Ev, Me, Re, Us>>
           <AttachmentPickerProvider value={attachmentPickerContext}>
             <ImageGalleryProvider>
-              {children}
+              <ChannelsStateProvider<At, Ch, Co, Ev, Me, Re, Us>>{children}</ChannelsStateProvider>
               <ThemeProvider style={overlayContext.style}>
                 <Animated.View
                   pointerEvents={overlay === 'none' ? 'none' : 'auto'}
                   style={[StyleSheet.absoluteFill, overlayStyle]}
                 >
-                  <BlurView
-                    blurType={blurType}
-                    style={[StyleSheet.absoluteFill, { height, width }]}
-                  />
+                  <OverlayBackdrop style={[StyleSheet.absoluteFill, { height, width }]} />
                 </Animated.View>
-                <MessageOverlay<At, Ch, Co, Ev, Me, Re, Us>
-                  MessageActions={MessageActions}
-                  overlayOpacity={overlayOpacity}
-                  OverlayReactionList={OverlayReactionList}
-                  OverlayReactions={OverlayReactions}
-                  visible={overlay === 'message'}
-                />
+                {overlay === 'message' && (
+                  <MessageOverlay<At, Ch, Co, Ev, Me, Re, Us>
+                    MessageActionList={MessageActionList}
+                    MessageActionListItem={MessageActionListItem}
+                    messageTextNumberOfLines={messageTextNumberOfLines}
+                    overlayOpacity={overlayOpacity}
+                    OverlayReactionList={OverlayReactionList}
+                    OverlayReactions={OverlayReactions}
+                    visible={overlay === 'message'}
+                  />
+                )}
                 <ImageGallery<At, Ch, Co, Ev, Me, Re, Us>
                   imageGalleryCustomComponents={imageGalleryCustomComponents}
                   imageGalleryGridHandleHeight={imageGalleryGridHandleHeight}

package/src/contexts/ownCapabilitiesContext/OwnCapabilitiesContext.tsx

@@ -0,0 +1,38 @@
+import React, { PropsWithChildren, useContext } from 'react';
+
+export const allOwnCapabilities = {
+  banChannelMembers: 'ban-channel-members',
+  deleteAnyMessage: 'delete-any-message',
+  deleteOwnMessage: 'delete-own-message',
+  flagMessage: 'flag-message',
+  pinMessage: 'pin-message',
+  quoteMessage: 'quote-message',
+  readEvents: 'read-events',
+  sendLinks: 'send-links',
+  sendMessage: 'send-message',
+  sendReaction: 'send-reaction',
+  sendReply: 'send-reply',
+  sendTypingEvents: 'send-typing-events',
+  updateAnyMessage: 'update-any-message',
+  updateOwnMessage: 'update-own-message',
+  uploadFile: 'upload-file',
+};
+
+export type OwnCapability = keyof typeof allOwnCapabilities;
+
+export type OwnCapabilitiesContextValue = Record<OwnCapability, boolean>;
+export const OwnCapabilitiesContext = React.createContext({} as OwnCapabilitiesContextValue);
+
+export const OwnCapabilitiesProvider = ({
+  children,
+  value,
+}: PropsWithChildren<{
+  value: OwnCapabilitiesContextValue;
+}>) => (
+  <OwnCapabilitiesContext.Provider value={value as unknown as OwnCapabilitiesContextValue}>
+    {children}
+  </OwnCapabilitiesContext.Provider>
+);
+
+export const useOwnCapabilitiesContext = () =>
+  useContext(OwnCapabilitiesContext) as unknown as OwnCapabilitiesContextValue;

package/src/contexts/suggestionsContext/SuggestionsContext.tsx

@@ -1,16 +1,14 @@
 import React, { PropsWithChildren, useContext, useState } from 'react';
-
-import { getDisplayName } from '../utils/getDisplayName';
-
 import type { CommandResponse, UserResponse } from 'stream-chat';
 
-import type { Emoji } from '../../emoji-data/compiled';
+import { getDisplayName } from '../utils/getDisplayName';
+import type { AutoCompleteSuggestionHeaderProps } from '../../components/AutoCompleteInput/AutoCompleteSuggestionHeader';
+import type { AutoCompleteSuggestionListProps } from '../../components/AutoCompleteInput/AutoCompleteSuggestionList';
+import type { AutoCompleteSuggestionItemProps } from '../../components/AutoCompleteInput/AutoCompleteSuggestionItem';
 import type { DefaultCommandType, DefaultUserType, UnknownType } from '../../types/types';
+import type { Emoji } from '../../emoji-data/compiled';
 
-export type SuggestionComponentType<
-  Co extends string = DefaultCommandType,
-  Us extends UnknownType = DefaultUserType,
-> = string | React.ReactElement<{ item: Suggestion<Co, Us> }>;
+export type SuggestionComponentType = 'command' | 'emoji' | 'mention';
 
 export const isSuggestionCommand = <
   Co extends string = DefaultCommandType,
@@ -36,10 +34,9 @@ export const isSuggestionUser = <
 export type Suggestion<
   Co extends string = DefaultCommandType,
   Us extends UnknownType = DefaultUserType,
-> = SuggestionCommand<Co> | SuggestionUser<Us> | Emoji;
+> = Emoji | SuggestionCommand<Co> | SuggestionUser<Us>;
 
 export type SuggestionCommand<Co extends string = DefaultCommandType> = CommandResponse<Co>;
-
 export type SuggestionUser<Us extends UnknownType = DefaultUserType> = UserResponse<Us>;
 
 export type Suggestions<
@@ -48,41 +45,35 @@ export type Suggestions<
 > = {
   data: Suggestion<Co, Us>[];
   onSelect: (item: Suggestion<Co, Us>) => void;
+  queryText?: string;
 };
 
 export type SuggestionsContextValue<
   Co extends string = DefaultCommandType,
   Us extends UnknownType = DefaultUserType,
 > = {
+  AutoCompleteSuggestionHeader: React.ComponentType<AutoCompleteSuggestionHeaderProps>;
+  AutoCompleteSuggestionItem: React.ComponentType<AutoCompleteSuggestionItemProps<Co, Us>>;
+  AutoCompleteSuggestionList: React.ComponentType<AutoCompleteSuggestionListProps<Co, Us>>;
   /** Override handler for closing suggestions (mentions, command autocomplete etc) */
   closeSuggestions: () => void;
   /**
    * Override handler for opening suggestions (mentions, command autocomplete etc)
    *
    * @param component {Component|element} UI Component for suggestion item.
-   * @param title {string} Title for suggestions box
-   *
    * @overrideType Function
    */
-  openSuggestions: (
-    component: SuggestionComponentType<Co, Us>,
-    title?: React.ReactElement,
-  ) => Promise<void>;
+  openSuggestions: (component: SuggestionComponentType) => Promise<void>;
+  suggestions: Suggestions<Co, Us>;
+  triggerType: SuggestionComponentType;
   /**
    * Override handler for updating suggestions (mentions, command autocomplete etc)
    *
    * @param newSuggestions {Component|element} UI Component for suggestion item.
-   * @param newSuggestionsTitle {string} Title for suggestions box
-   *
    * @overrideType Function
    */
-  updateSuggestions: (
-    newSuggestions: Suggestions<Co, Us>,
-    newSuggestionsTitle?: React.ReactElement,
-  ) => void;
-  componentType?: SuggestionComponentType<Co, Us>;
-  suggestions?: Suggestions<Co, Us>;
-  suggestionsTitle?: React.ReactElement;
+  updateSuggestions: (newSuggestions: Suggestions<Co, Us>) => void;
+  queryText?: string;
   suggestionsViewActive?: boolean;
 };
 
@@ -98,46 +89,34 @@ export const SuggestionsProvider = <
   children,
   value,
 }: PropsWithChildren<{ value?: Partial<SuggestionsContextValue<Co, Us>> }>) => {
-  const [componentType, setComponentType] = useState<SuggestionComponentType<Co, Us>>('');
+  const [triggerType, setTriggerType] = useState<SuggestionComponentType | null>(null);
   const [suggestions, setSuggestions] = useState<Suggestions<Co, Us>>();
-  const [suggestionsTitle, setSuggestionsTitle] = useState<React.ReactElement>();
   const [suggestionsViewActive, setSuggestionsViewActive] = useState(false);
 
-  const openSuggestions = (
-    component: SuggestionComponentType<Co, Us>,
-    title?: React.ReactElement,
-  ) => {
-    setComponentType(component);
-    setSuggestionsTitle(title);
+  const openSuggestions = (component: SuggestionComponentType) => {
+    setTriggerType(component);
     setSuggestionsViewActive(true);
   };
 
-  const updateSuggestions = (
-    newSuggestions: Suggestions<Co, Us>,
-    newSuggestionsTitle?: React.ReactElement,
-  ) => {
+  const updateSuggestions = (newSuggestions: Suggestions<Co, Us>) => {
     setSuggestions(newSuggestions);
-    if (newSuggestionsTitle) {
-      setSuggestionsTitle(newSuggestionsTitle);
-    }
-    setSuggestionsViewActive(!!componentType);
+    setSuggestionsViewActive(!!triggerType);
   };
 
   const closeSuggestions = () => {
-    setComponentType('');
+    setTriggerType(null);
     setSuggestions(undefined);
-    setSuggestionsTitle(undefined);
     setSuggestionsViewActive(false);
   };
 
   const suggestionsContext = {
-    closeSuggestions: value?.closeSuggestions || closeSuggestions,
-    componentType,
-    openSuggestions: value?.openSuggestions || openSuggestions,
+    ...value,
+    closeSuggestions,
+    openSuggestions,
     suggestions,
-    suggestionsTitle,
     suggestionsViewActive,
-    updateSuggestions: value?.updateSuggestions || updateSuggestions,
+    triggerType,
+    updateSuggestions,
   };
 
   return (

package/src/contexts/suggestionsContext/__tests__/Suggestions.test.js

@@ -39,7 +39,6 @@ describe('SuggestionsProvider', () => {
     await waitFor(() => {
       expect(context).toBeInstanceOf(Object);
       expect(context.closeSuggestions).toBeInstanceOf(Function);
-      expect(typeof context.componentType).toBe('string');
       expect(context.openSuggestions).toBeInstanceOf(Function);
       expect(typeof context.suggestionsViewActive).toBe('boolean');
       expect(context.updateSuggestions).toBeInstanceOf(Function);