stream-chat-react-native-core 5.39.5 → 5.40.0-rc.2

package/src/contexts/messagesContext/MessagesContext.tsx

@@ -1,6 +1,6 @@
 import React, { PropsWithChildren, useContext } from 'react';
 
-import type { TouchableOpacityProps } from 'react-native';
+import { PressableProps } from 'react-native';
 
 import type { Attachment, ChannelState, MessageResponse } from 'stream-chat';
 
@@ -17,8 +17,8 @@ import type { ImageLoadingFailedIndicatorProps } from '../../components/Attachme
 import type { ImageLoadingIndicatorProps } from '../../components/Attachment/ImageLoadingIndicator';
 import type { VideoThumbnailProps } from '../../components/Attachment/VideoThumbnail';
 import type {
+  MessagePressableHandlerPayload,
   MessageProps,
-  MessageTouchableHandlerPayload,
 } from '../../components/Message/Message';
 import type { MessageAvatarProps } from '../../components/Message/MessageSimple/MessageAvatar';
 import type { MessageBounceProps } from '../../components/Message/MessageSimple/MessageBounce';
@@ -34,7 +34,8 @@ import type { MessageSimpleProps } from '../../components/Message/MessageSimple/
 import type { MessageStatusProps } from '../../components/Message/MessageSimple/MessageStatus';
 import type { MessageTextProps } from '../../components/Message/MessageSimple/MessageTextContainer';
 import { MessageTimestampProps } from '../../components/Message/MessageSimple/MessageTimestamp';
-import type { ReactionListProps } from '../../components/Message/MessageSimple/ReactionList';
+import { ReactionListBottomProps } from '../../components/Message/MessageSimple/ReactionList/ReactionListBottom';
+import type { ReactionListTopProps } from '../../components/Message/MessageSimple/ReactionList/ReactionListTop';
 import type { MarkdownRules } from '../../components/Message/MessageSimple/utils/renderText';
 import type { MessageActionsParams } from '../../components/Message/utils/messageActions';
 import type { DateHeaderProps } from '../../components/MessageList/DateHeader';
@@ -45,11 +46,19 @@ import type { MessageSystemProps } from '../../components/MessageList/MessageSys
 import type { ScrollToBottomButtonProps } from '../../components/MessageList/ScrollToBottomButton';
 import { TypingIndicatorContainerProps } from '../../components/MessageList/TypingIndicatorContainer';
 import type { getGroupStyles } from '../../components/MessageList/utils/getGroupStyles';
-import type { MessageActionType } from '../../components/MessageOverlay/MessageActionListItem';
-import type { OverlayReactionListProps } from '../../components/MessageOverlay/OverlayReactionList';
+import { MessageActionListProps } from '../../components/MessageMenu/MessageActionList';
+import type {
+  MessageActionListItemProps,
+  MessageActionType,
+} from '../../components/MessageMenu/MessageActionListItem';
+import { MessageMenuProps } from '../../components/MessageMenu/MessageMenu';
+import type { MessageReactionPickerProps } from '../../components/MessageMenu/MessageReactionPicker';
+import { MessageUserReactionsProps } from '../../components/MessageMenu/MessageUserReactions';
+import { MessageUserReactionsAvatarProps } from '../../components/MessageMenu/MessageUserReactionsAvatar';
+import { MessageUserReactionsItemProps } from '../../components/MessageMenu/MessageUserReactionsItem';
 import type { ReplyProps } from '../../components/Reply/Reply';
-import type { FlatList } from '../../native';
-import type { DefaultStreamChatGenerics, UnknownType } from '../../types/types';
+import { FlatList } from '../../native';
+import type { DefaultStreamChatGenerics } from '../../types/types';
 import type { ReactionData } from '../../utils/utils';
 import type { Alignment } from '../messageContext/MessageContext';
 import type { SuggestionCommand } from '../suggestionsContext/SuggestionsContext';
@@ -57,7 +66,6 @@ import type { DeepPartial } from '../themeContext/ThemeContext';
 import type { Theme } from '../themeContext/utils/theme';
 import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
 
-import { getDisplayName } from '../utils/getDisplayName';
 import { isTestEnvironment } from '../utils/isTestEnvironment';
 
 export type MessageContentType = 'attachments' | 'files' | 'gallery' | 'quoted_reply' | 'text';
@@ -111,7 +119,7 @@ export type MessagesContextValue<
    * Defaults to: https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/Attachment/FileIcon.tsx
    */
   FileAttachmentIcon: React.ComponentType<FileIconProps>;
-  FlatList: typeof FlatList;
+  FlatList: typeof FlatList | undefined;
   /**
    * UI component to display image attachments
    * Defaults to: [Gallery](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/Attachment/Gallery.tsx)
@@ -153,6 +161,18 @@ export type MessagesContextValue<
   InlineUnreadIndicator: React.ComponentType;
 
   Message: React.ComponentType<MessageProps<StreamChatGenerics>>;
+  /**
+   * Custom UI component for rendering Message actions in message menu.
+   *
+   * **Default** [MessageActionList](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/MessageMenu/MessageActionList.tsx)
+   */
+  MessageActionList: React.ComponentType<MessageActionListProps>;
+  /**
+   * Custom UI component for rendering Message action item in message menu.
+   *
+   * **Default** [MessageActionList](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/MessageMenu/MessageActionList.tsx)
+   */
+  MessageActionListItem: React.ComponentType<MessageActionListItemProps>;
   /**
    * UI component for MessageAvatar
    * Defaults to: [MessageAvatar](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/Message/MessageSimple/MessageAvatar.tsx)
@@ -188,11 +208,18 @@ export type MessagesContextValue<
    */
   MessageFooter: React.ComponentType<MessageFooterProps<StreamChatGenerics>>;
   MessageList: React.ComponentType<MessageListProps<StreamChatGenerics>>;
+  /**
+   * UI component for MessageMenu
+   */
+  MessageMenu: React.ComponentType<MessageMenuProps<StreamChatGenerics>>;
   /**
    * Custom message pinned component
    */
   MessagePinnedHeader: React.ComponentType<MessagePinnedHeaderProps<StreamChatGenerics>>;
-
+  /**
+   * UI component for MessageReactionPicker
+   */
+  MessageReactionPicker: React.ComponentType<MessageReactionPickerProps<StreamChatGenerics>>;
   /**
    * UI component for MessageReplies
    * Defaults to: [MessageReplies](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/MessageSimple/MessageReplies.tsx)
@@ -224,14 +251,24 @@ export type MessagesContextValue<
    */
   MessageTimestamp: React.ComponentType<MessageTimestampProps>;
   /**
-   * UI component for OverlayReactionList
+   * Custom UI component for rendering user reactions, in message menu.
+   *
+   * **Default** [MessageUserReactions](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/MessageMenu/MessageUserReactions.tsx)
    */
-  OverlayReactionList: React.ComponentType<OverlayReactionListProps<StreamChatGenerics>>;
+  MessageUserReactions: React.ComponentType<MessageUserReactionsProps<StreamChatGenerics>>;
   /**
-   * UI component for ReactionList
-   * Defaults to: [ReactionList](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/Reaction/ReactionList.tsx)
+   * Custom UI component for rendering user reactions avatar under `MessageUserReactionsItem`, in message menu.
+   *
+   * **Default** [MessageUserReactionsAvatar](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/MessageMenu/MessageUserReactionsAvatar.tsx)
+   */
+  MessageUserReactionsAvatar: React.ComponentType<MessageUserReactionsAvatarProps>;
+  /**
+   * Custom UI component for rendering individual user reactions item under `MessageUserReactions`, in message menu.
+   *
+   * **Default** [MessageUserReactionsItem](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/MessageMenu/MessageUserReactionsItem.tsx)
    */
-  ReactionList: React.ComponentType<ReactionListProps<StreamChatGenerics>>;
+  MessageUserReactionsItem: React.ComponentType<MessageUserReactionsItemProps>;
+
   removeMessage: (message: { id: string; parent_id?: string }) => void;
   /**
    * UI component for Reply
@@ -249,8 +286,7 @@ export type MessagesContextValue<
   ScrollToBottomButton: React.ComponentType<ScrollToBottomButtonProps>;
   sendReaction: (type: string, messageId: string) => Promise<void>;
   setEditingState: (message?: MessageType<StreamChatGenerics>) => void;
-  setQuotedMessageState: (message: MessageType<StreamChatGenerics> | boolean) => void;
-  supportedReactions: ReactionData[];
+  setQuotedMessageState: (message?: MessageType<StreamChatGenerics>) => void;
   /**
    * UI component for TypingIndicator
    * Defaults to: [TypingIndicator](https://getstream.io/chat/docs/sdk/reactnative/ui-components/typing-indicator/)
@@ -276,12 +312,12 @@ export type MessagesContextValue<
   UrlPreview: React.ComponentType<CardProps<StreamChatGenerics>>;
   VideoThumbnail: React.ComponentType<VideoThumbnailProps>;
   /**
-   * Provide any additional props for `TouchableOpacity` which wraps inner MessageContent component here.
-   * Please check docs for TouchableOpacity for supported props - https://reactnative.dev/docs/touchableopacity#props
+   * Provide any additional props for `Pressable` which wraps inner MessageContent component here.
+   * Please check docs for Pressable for supported props - https://reactnative.dev/docs/pressable#props
    *
    * @overrideType Object
    */
-  additionalTouchableProps?: Omit<TouchableOpacityProps, 'style'>;
+  additionalPressableProps?: Omit<PressableProps, 'style'>;
   /**
    * Custom UI component to override default cover (between Header and Footer) of Card component.
    * Accepts the same props as Card component.
@@ -321,12 +357,6 @@ export type MessagesContextValue<
    * @param message
    */
   handleBan?: (message: MessageType<StreamChatGenerics>) => Promise<void>;
-  /**
-   * @deprecated
-   * Handler to access when a block user action is invoked.
-   * @param message
-   */
-  handleBlock?: (message: MessageType<StreamChatGenerics>) => Promise<void>;
   /** Handler to access when a copy message action is invoked */
   handleCopy?: (message: MessageType<StreamChatGenerics>) => Promise<void>;
   /** Handler to access when a delete message action is invoked */
@@ -416,7 +446,10 @@ export type MessagesContextValue<
   MessageHeader?: React.ComponentType<MessageFooterProps<StreamChatGenerics>>;
   /** Custom UI component for message text */
   MessageText?: React.ComponentType<MessageTextProps<StreamChatGenerics>>;
-
+  /**
+   * The number of lines of the message text to be displayed
+   */
+  messageTextNumberOfLines?: number;
   /**
    * Theme provided only to messages that are the current users
    */
@@ -447,7 +480,7 @@ export type MessagesContextValue<
    * />
    * ```
    */
-  onLongPressMessage?: (payload: MessageTouchableHandlerPayload<StreamChatGenerics>) => void;
+  onLongPressMessage?: (payload: MessagePressableHandlerPayload<StreamChatGenerics>) => void;
   /**
    * Add onPressIn handler for attachments. You have access to payload of that handler as param:
    *
@@ -474,7 +507,7 @@ export type MessagesContextValue<
    * />
    * ```
    */
-  onPressInMessage?: (payload: MessageTouchableHandlerPayload<StreamChatGenerics>) => void;
+  onPressInMessage?: (payload: MessagePressableHandlerPayload<StreamChatGenerics>) => void;
   /**
    * Override onPress handler for message. You have access to payload of that handler as param:
    *
@@ -501,7 +534,23 @@ export type MessagesContextValue<
    * />
    * ```
    */
-  onPressMessage?: (payload: MessageTouchableHandlerPayload<StreamChatGenerics>) => void;
+  onPressMessage?: (payload: MessagePressableHandlerPayload<StreamChatGenerics>) => void;
+
+  /**
+   * UI component for ReactionListTop
+   * Defaults to: [ReactionList](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/Reaction/ReactionList.tsx)
+   */
+  ReactionListBottom?: React.ComponentType<ReactionListBottomProps<StreamChatGenerics>>;
+  /**
+   * The position of the reaction list in the message
+   */
+  reactionListPosition?: 'top' | 'bottom';
+
+  /**
+   * UI component for ReactionListTop
+   * Defaults to: [ReactionList](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/Reaction/ReactionList.tsx)
+   */
+  ReactionListTop?: React.ComponentType<ReactionListTopProps<StreamChatGenerics>>;
 
   /**
    * Full override of the reaction function on Message and Message Overlay
@@ -516,6 +565,10 @@ export type MessagesContextValue<
    * Boolean to enable/disable the message underlay background when there are unread messages in the Message List.
    */
   shouldShowUnreadUnderlay?: boolean;
+  /**
+   * The supported reactions that the user can use to react to messages.
+   */
+  supportedReactions?: ReactionData[];
 
   targetedMessage?: string;
 };
@@ -552,29 +605,3 @@ export const useMessagesContext = <
 
   return contextValue;
 };
-
-/**
- * @deprecated
- *
- * This will be removed in the next major version.
- *
- * Typescript currently does not support partial inference so if ChatContext
- * typing is desired while using the HOC withMessagesContext the Props for the
- * wrapped component must be provided as the first generic.
- */
-export const withMessagesContext = <
-  P extends UnknownType,
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  Component: React.ComponentType<P>,
-): React.ComponentType<Omit<P, keyof MessagesContextValue<StreamChatGenerics>>> => {
-  const WithMessagesContextComponent = (
-    props: Omit<P, keyof MessagesContextValue<StreamChatGenerics>>,
-  ) => {
-    const messagesContext = useMessagesContext<StreamChatGenerics>();
-
-    return <Component {...(props as P)} {...messagesContext} />;
-  };
-  WithMessagesContextComponent.displayName = `WithMessagesContext${getDisplayName(Component)}`;
-  return WithMessagesContextComponent;
-};

package/src/contexts/overlayContext/OverlayContext.tsx

@@ -6,19 +6,16 @@ import type { Attachment } from 'stream-chat';
 import type { AttachmentPickerProps } from '../../components/AttachmentPicker/AttachmentPicker';
 import type { ImageGalleryCustomComponents } from '../../components/ImageGallery/ImageGallery';
 
-import type { MessageType } from '../../components/MessageList/hooks/useMessageList';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 import type { Streami18n } from '../../utils/i18n/Streami18n';
 import type { AttachmentPickerContextValue } from '../attachmentPickerContext/AttachmentPickerContext';
-import type { MessageOverlayContextValue } from '../messageOverlayContext/MessageOverlayContext';
 import type { DeepPartial } from '../themeContext/ThemeContext';
 import type { Theme } from '../themeContext/utils/theme';
 import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
 
-import { getDisplayName } from '../utils/getDisplayName';
 import { isTestEnvironment } from '../utils/isTestEnvironment';
 
-export type Overlay = 'alert' | 'gallery' | 'message' | 'none';
+export type Overlay = 'alert' | 'gallery' | 'none';
 
 export type OverlayContextValue = {
   overlay: Overlay;
@@ -48,40 +45,17 @@ export type OverlayProviderProps<
       | 'topInset'
     >
   > &
-  ImageGalleryCustomComponents<StreamChatGenerics> &
-  Partial<
-    Pick<
-      MessageOverlayContextValue<StreamChatGenerics>,
-      | 'MessageActionList'
-      | 'MessageActionListItem'
-      | 'OverlayReactionList'
-      | 'OverlayReactions'
-      | 'OverlayReactionsAvatar'
-    >
-  > & {
+  ImageGalleryCustomComponents<StreamChatGenerics> & {
     autoPlayVideo?: boolean;
     /**
      * The giphy version to render - check the keys of the [Image Object](https://developers.giphy.com/docs/api/schema#image-object) for possible values. Uses 'fixed_height' by default
      * */
     closePicker?: (ref: React.RefObject<BottomSheetMethods>) => void;
-    error?: boolean | Error;
     giphyVersion?: keyof NonNullable<Attachment['giphy']>;
     /** 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<StreamChatGenerics>;
-    /**
-     * @deprecated use the following instead:
-     *  messageActions={(params) => {
-     *    const actions = messageActions({ ...params, isMessageActionsVisible: false });
-     *    return actions;
-     *  }}
-     */
-    messageReactions?: boolean;
-    messageTextNumberOfLines?: number;
     numberOfImageGalleryGridColumns?: number;
     openPicker?: (ref: React.RefObject<BottomSheetMethods>) => void;
     value?: Partial<OverlayContextValue>;
@@ -98,30 +72,3 @@ export const useOverlayContext = () => {
 
   return contextValue;
 };
-
-/**
- * @deprecated
- *
- * This will be removed in the next major version.
- *
- * Typescript currently does not support partial inference so if ChatContext
- * typing is desired while using the HOC withOverlayContext the Props for the
- * wrapped component must be provided as the first generic.
- */
-export const withOverlayContext = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  Component: React.ComponentType<StreamChatGenerics>,
-): React.ComponentType<Omit<StreamChatGenerics, keyof OverlayContextValue>> => {
-  const WithOverlayContextComponent = (
-    props: Omit<StreamChatGenerics, keyof OverlayContextValue>,
-  ) => {
-    const overlayContext = useOverlayContext();
-
-    return <Component {...(props as StreamChatGenerics)} {...overlayContext} />;
-  };
-  WithOverlayContextComponent.displayName = `WithOverlayContext${getDisplayName(
-    Component as React.ComponentType,
-  )}`;
-  return WithOverlayContextComponent;
-};

package/src/contexts/overlayContext/OverlayProvider.tsx

@@ -1,13 +1,8 @@
 import React, { PropsWithChildren, useEffect, useRef, useState } from 'react';
 
-import { BackHandler, Dimensions, StyleSheet, ViewStyle } from 'react-native';
+import { BackHandler } from 'react-native';
 
-import Animated, {
-  cancelAnimation,
-  useAnimatedStyle,
-  useSharedValue,
-  withTiming,
-} from 'react-native-reanimated';
+import { cancelAnimation, useSharedValue, withTiming } from 'react-native-reanimated';
 
 import type BottomSheet from '@gorhom/bottom-sheet';
 
@@ -25,8 +20,6 @@ import { FileSelectorIcon as DefaultFileSelectorIcon } from '../../components/At
 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 { useViewport } from '../../hooks/useViewport';
@@ -34,7 +27,6 @@ import { isImageMediaLibraryAvailable } from '../../native';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 import { AttachmentPickerProvider } from '../attachmentPickerContext/AttachmentPickerContext';
 import { ImageGalleryProvider } from '../imageGalleryContext/ImageGalleryContext';
-import { MessageOverlayProvider } from '../messageOverlayContext/MessageOverlayContext';
 import { ThemeProvider } from '../themeContext/ThemeContext';
 import {
   DEFAULT_USER_LANGUAGE,
@@ -107,9 +99,6 @@ export const OverlayProvider = <
     imageGalleryGridSnapPoints,
     ImageOverlaySelectedComponent = DefaultImageOverlaySelectedComponent,
     ImageSelectorIcon = DefaultImageSelectorIcon,
-    MessageActionList,
-    MessageActionListItem,
-    messageTextNumberOfLines,
     numberOfAttachmentImagesToLoadPerCall,
     numberOfAttachmentPickerImageColumns,
     numberOfImageGalleryGridColumns,
@@ -123,9 +112,6 @@ export const OverlayProvider = <
         console.warn('bottom and top insets must be set for the image picker to work correctly');
       }
     },
-    OverlayReactionList,
-    OverlayReactions,
-    OverlayReactionsAvatar,
     topInset,
     value,
   } = props;
@@ -150,7 +136,6 @@ export const OverlayProvider = <
   const [overlay, setOverlay] = useState(value?.overlay || 'none');
 
   const overlayOpacity = useSharedValue(0);
-  const { height, width } = Dimensions.get('screen');
 
   // Setup translators
   const translators = useStreami18n(i18nInstance);
@@ -206,13 +191,6 @@ export const OverlayProvider = <
     topInset,
   };
 
-  const overlayStyle = useAnimatedStyle<ViewStyle>(
-    () => ({
-      opacity: overlayOpacity.value,
-    }),
-    [],
-  );
-
   const overlayContext = {
     overlay,
     setOverlay,
@@ -222,46 +200,27 @@ export const OverlayProvider = <
   return (
     <TranslationProvider value={{ ...translators, userLanguage: DEFAULT_USER_LANGUAGE }}>
       <OverlayContext.Provider value={overlayContext}>
-        <MessageOverlayProvider<StreamChatGenerics>>
-          <AttachmentPickerProvider value={attachmentPickerContext}>
-            <ImageGalleryProvider>
-              {children}
-              <ThemeProvider style={overlayContext.style}>
-                <Animated.View
-                  pointerEvents={overlay === 'none' ? 'none' : 'auto'}
-                  style={[StyleSheet.absoluteFill, overlayStyle]}
-                >
-                  <OverlayBackdrop style={[StyleSheet.absoluteFill, { height, width }]} />
-                </Animated.View>
-                {overlay === 'message' && (
-                  <MessageOverlay<StreamChatGenerics>
-                    MessageActionList={MessageActionList}
-                    MessageActionListItem={MessageActionListItem}
-                    messageTextNumberOfLines={messageTextNumberOfLines}
-                    overlayOpacity={overlayOpacity}
-                    OverlayReactionList={OverlayReactionList}
-                    OverlayReactions={OverlayReactions}
-                    OverlayReactionsAvatar={OverlayReactionsAvatar}
-                  />
-                )}
-                {overlay === 'gallery' && (
-                  <ImageGallery<StreamChatGenerics>
-                    autoPlayVideo={autoPlayVideo}
-                    giphyVersion={giphyVersion}
-                    imageGalleryCustomComponents={imageGalleryCustomComponents}
-                    imageGalleryGridHandleHeight={imageGalleryGridHandleHeight}
-                    imageGalleryGridSnapPoints={imageGalleryGridSnapPoints}
-                    numberOfImageGalleryGridColumns={numberOfImageGalleryGridColumns}
-                    overlayOpacity={overlayOpacity}
-                  />
-                )}
-                {isImageMediaLibraryAvailable() ? (
-                  <AttachmentPicker ref={bottomSheetRef} {...attachmentPickerProps} />
-                ) : null}
-              </ThemeProvider>
-            </ImageGalleryProvider>
-          </AttachmentPickerProvider>
-        </MessageOverlayProvider>
+        <AttachmentPickerProvider value={attachmentPickerContext}>
+          <ImageGalleryProvider>
+            {children}
+            <ThemeProvider style={overlayContext.style}>
+              {overlay === 'gallery' && (
+                <ImageGallery<StreamChatGenerics>
+                  autoPlayVideo={autoPlayVideo}
+                  giphyVersion={giphyVersion}
+                  imageGalleryCustomComponents={imageGalleryCustomComponents}
+                  imageGalleryGridHandleHeight={imageGalleryGridHandleHeight}
+                  imageGalleryGridSnapPoints={imageGalleryGridSnapPoints}
+                  numberOfImageGalleryGridColumns={numberOfImageGalleryGridColumns}
+                  overlayOpacity={overlayOpacity}
+                />
+              )}
+              {isImageMediaLibraryAvailable() ? (
+                <AttachmentPicker ref={bottomSheetRef} {...attachmentPickerProps} />
+              ) : null}
+            </ThemeProvider>
+          </ImageGalleryProvider>
+        </AttachmentPickerProvider>
       </OverlayContext.Provider>
     </TranslationProvider>
   );

package/src/contexts/paginatedMessageListContext/PaginatedMessageListContext.tsx

@@ -2,10 +2,9 @@ import React, { PropsWithChildren, useContext } from 'react';
 
 import type { ChannelState } from 'stream-chat';
 
-import type { DefaultStreamChatGenerics, UnknownType } from '../../types/types';
+import type { DefaultStreamChatGenerics } from '../../types/types';
 import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
 
-import { getDisplayName } from '../utils/getDisplayName';
 import { isTestEnvironment } from '../utils/isTestEnvironment';
 
 export type PaginatedMessageListContextValue<
@@ -83,31 +82,3 @@ export const usePaginatedMessageListContext = <
 
   return contextValue;
 };
-
-/**
- * @deprecated
- *
- * This will be removed in the next major version.
- *
- * Typescript currently does not support partial inference so if ChatContext
- * typing is desired while using the HOC withPaginatedMessageListContext the Props for the
- * wrapped component must be provided as the first generic.
- */
-export const withPaginatedMessageListContext = <
-  P extends UnknownType,
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  Component: React.ComponentType<P>,
-): React.ComponentType<Omit<P, keyof PaginatedMessageListContextValue<StreamChatGenerics>>> => {
-  const WithPaginatedMessageListContextComponent = (
-    props: Omit<P, keyof PaginatedMessageListContextValue<StreamChatGenerics>>,
-  ) => {
-    const paginatedMessageListContext = usePaginatedMessageListContext<StreamChatGenerics>();
-
-    return <Component {...(props as P)} {...paginatedMessageListContext} />;
-  };
-  WithPaginatedMessageListContextComponent.displayName = `WithPaginatedMessageListContext${getDisplayName(
-    Component,
-  )}`;
-  return WithPaginatedMessageListContextComponent;
-};

package/src/contexts/suggestionsContext/SuggestionsContext.tsx

@@ -6,10 +6,9 @@ import type { AutoCompleteSuggestionHeaderProps } from '../../components/AutoCom
 import type { AutoCompleteSuggestionItemProps } from '../../components/AutoCompleteInput/AutoCompleteSuggestionItem';
 import type { AutoCompleteSuggestionListProps } from '../../components/AutoCompleteInput/AutoCompleteSuggestionList';
 import type { Emoji } from '../../emoji-data';
-import type { DefaultStreamChatGenerics, UnknownType } from '../../types/types';
+import type { DefaultStreamChatGenerics } from '../../types/types';
 import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
 
-import { getDisplayName } from '../utils/getDisplayName';
 import { isTestEnvironment } from '../utils/isTestEnvironment';
 
 export type SuggestionComponentType = 'command' | 'emoji' | 'mention';
@@ -148,31 +147,3 @@ export const useSuggestionsContext = <
 
   return contextValue;
 };
-
-/**
- * @deprecated
- *
- * This will be removed in the next major version.
- *
- * Typescript currently does not support partial inference so if ChatContext
- * typing is desired while using the HOC withSuggestionsContext the Props for the
- * wrapped component must be provided as the first generic.
- */
-export const withSuggestionsContext = <
-  P extends UnknownType,
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  Component: React.ComponentType<P>,
-): React.ComponentType<Omit<P, keyof SuggestionsContextValue<StreamChatGenerics>>> => {
-  const WithSuggestionsContextComponent = (
-    props: Omit<P, keyof SuggestionsContextValue<StreamChatGenerics>>,
-  ) => {
-    const suggestionsContext = useSuggestionsContext<StreamChatGenerics>();
-
-    return <Component {...(props as P)} {...suggestionsContext} />;
-  };
-  WithSuggestionsContextComponent.displayName = `WithSuggestionsContext${getDisplayName(
-    Component,
-  )}`;
-  return WithSuggestionsContextComponent;
-};