stream-chat-react-native-core 9.0.1-beta.1 → 9.0.1-beta.3

package/src/components/Message/Message.tsx

@@ -19,6 +19,8 @@ import { useMessageActions } from './hooks/useMessageActions';
 import { useMessageDeliveredData } from './hooks/useMessageDeliveryData';
 import { useMessageReadData } from './hooks/useMessageReadData';
 import { useProcessReactions } from './hooks/useProcessReactions';
+import { DEFAULT_MESSAGE_OVERLAY_TARGET_ID } from './messageOverlayConstants';
+import { MessageOverlayWrapper } from './MessageOverlayWrapper';
 import { measureInWindow } from './utils/measureInWindow';
 import { messageActions as defaultMessageActions } from './utils/messageActions';
 
@@ -36,7 +38,11 @@ import {
   MessageComposerAPIContextValue,
   useMessageComposerAPIContext,
 } from '../../contexts/messageComposerContext/MessageComposerAPIContext';
-import { MessageContextValue, MessageProvider } from '../../contexts/messageContext/MessageContext';
+import {
+  MessageContextValue,
+  MessageOverlayRuntimeProvider,
+  MessageProvider,
+} from '../../contexts/messageContext/MessageContext';
 import { useMessageListItemContext } from '../../contexts/messageListItemContext/MessageListItemContext';
 import {
   MessagesContextValue,
@@ -207,6 +213,7 @@ export type MessagePropsWithContext = Pick<
     | 'handleBlockUser'
     | 'isAttachmentEqual'
     | 'messageActions'
+    | 'messageOverlayTargetId'
     | 'messageContentOrder'
     | 'onLongPressMessage'
     | 'onPressInMessage'
@@ -278,6 +285,7 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
     members,
     message,
     messageActions: messageActionsProp = defaultMessageActions,
+    messageOverlayTargetId = DEFAULT_MESSAGE_OVERLAY_TARGET_ID,
     messageContentOrder: messageContentOrderProp,
     messagesContext,
     onLongPressMessage: onLongPressMessageProp,
@@ -323,11 +331,28 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
   const rectRef = useRef<Rect>(undefined);
   const bubbleRect = useRef<Rect>(undefined);
   const contextMenuAnchorRef = useRef<View>(null);
+  const messageOverlayTargetsRef = useRef<Record<string, View | null>>({});
+  const registerMessageOverlayTarget = useStableCallback(
+    ({ id, view }: { id: string; view: View | null }) => {
+      messageOverlayTargetsRef.current[id] = view;
+    },
+  );
+  const unregisterMessageOverlayTarget = useStableCallback((id: string) => {
+    delete messageOverlayTargetsRef.current[id];
+  });
 
   const showMessageOverlay = useStableCallback(async () => {
     dismissKeyboard();
     try {
-      const layout = await measureInWindow(messageWrapperRef, insets);
+      const activeTargetView = messageOverlayTargetsRef.current[messageOverlayTargetId];
+
+      if (!activeTargetView) {
+        throw new Error(
+          `No message overlay target is registered for target id "${messageOverlayTargetId}".`,
+        );
+      }
+
+      const layout = await measureInWindow({ current: activeTargetView }, insets);
       const bubbleLayout = await measureInWindow(contextMenuAnchorRef, insets).catch(() => layout);
 
       rectRef.current = layout;
@@ -655,8 +680,6 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
     unpinMessage: handleTogglePinMessage,
   };
 
-  const messageWrapperRef = useRef<View>(null);
-
   const onLongPress = () => {
     setNativeScrollability(false);
     if (hasAttachmentActions || isBlockedMessage(message) || !enableLongPress) {
@@ -771,6 +794,8 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
     onThreadSelect,
     otherAttachments: attachments.other,
     preventPress: overlayActive ? true : preventPress,
+    registerMessageOverlayTarget,
+    unregisterMessageOverlayTarget,
     reactions,
     readBy,
     setQuotedMessage,
@@ -781,6 +806,14 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
     threadList,
     videos: attachments.videos,
   });
+  const messageOverlayRuntimeContext = useMemo(
+    () => ({
+      overlayTargetRectRef: rectRef,
+      messageOverlayTargetId,
+      overlayActive,
+    }),
+    [messageOverlayTargetId, overlayActive],
+  );
 
   const prevActive = useRef<boolean>(overlayActive);
 
@@ -817,82 +850,74 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
 
   return (
     <MessageProvider value={messageContext}>
-      <View style={[style, styles.wrapper]} testID='message-wrapper'>
-        {overlayActive && rect ? (
-          <View
-            style={{
-              height: rect.h,
-              width: rect.w,
-            }}
-          />
-        ) : null}
-        {/*TODO: V9: Find a way to separate these in a dedicated file*/}
-        <Portal hostName={overlayActive && rect ? 'top-item' : undefined}>
-          {overlayActive && rect && overlayItemsAnchorRect ? (
-            <View
-              onLayout={(e) => {
-                const { width: w, height: h } = e.nativeEvent.layout;
-
-                setOverlayTopH({
-                  h,
-                  w,
-                  x:
-                    overlayItemAlignment === 'right'
-                      ? overlayItemsAnchorRect.x + overlayItemsAnchorRect.w - w
-                      : overlayItemsAnchorRect.x,
-                  y: rect.y - h,
-                });
-              }}
-            >
-              <MessageReactionPicker
-                dismissOverlay={dismissOverlay}
-                handleReaction={ownCapabilities.sendReaction ? handleReaction : undefined}
-              />
-            </View>
-          ) : null}
-        </Portal>
-        <Portal
-          hostName={overlayActive ? 'message-overlay' : undefined}
-          style={overlayActive && rect ? { width: rect.w } : undefined}
-        >
-          <View ref={messageWrapperRef}>
+      <MessageOverlayRuntimeProvider value={messageOverlayRuntimeContext}>
+        <View style={[style, styles.wrapper]} testID='message-wrapper'>
+          {/*TODO: V9: Find a way to separate these in a dedicated file*/}
+          <Portal hostName={overlayActive && rect ? 'top-item' : undefined}>
+            {overlayActive && rect && overlayItemsAnchorRect ? (
+              <View
+                onLayout={(e) => {
+                  const { width: w, height: h } = e.nativeEvent.layout;
+
+                  setOverlayTopH({
+                    h,
+                    w,
+                    x:
+                      overlayItemAlignment === 'right'
+                        ? overlayItemsAnchorRect.x + overlayItemsAnchorRect.w - w
+                        : overlayItemsAnchorRect.x,
+                    y: rect.y - h,
+                  });
+                }}
+              >
+                <MessageReactionPicker
+                  dismissOverlay={dismissOverlay}
+                  handleReaction={ownCapabilities.sendReaction ? handleReaction : undefined}
+                />
+              </View>
+            ) : null}
+          </Portal>
+          <MessageOverlayWrapper targetId={DEFAULT_MESSAGE_OVERLAY_TARGET_ID}>
             <MessageItemView />
-          </View>
-        </Portal>
-        {showMessageReactions ? (
-          <BottomSheetModal
-            lazy={true}
-            onClose={() => setShowMessageReactions(false)}
-            visible={showMessageReactions}
-            height={424}
-          >
-            <MessageUserReactions message={message} selectedReaction={selectedReaction} />
-          </BottomSheetModal>
-        ) : null}
-        <Portal hostName={overlayActive && rect ? 'bottom-item' : undefined}>
-          {overlayActive && rect && overlayItemsAnchorRect ? (
-            <View
-              onLayout={(e) => {
-                const { width: w, height: h } = e.nativeEvent.layout;
-                setOverlayBottomH({
-                  h,
-                  w,
-                  x:
-                    overlayItemAlignment === 'right'
-                      ? overlayItemsAnchorRect.x + overlayItemsAnchorRect.w - w
-                      : overlayItemsAnchorRect.x,
-                  y: rect.y + rect.h,
-                });
-              }}
+          </MessageOverlayWrapper>
+          {showMessageReactions ? (
+            <BottomSheetModal
+              lazy={true}
+              onClose={() => setShowMessageReactions(false)}
+              visible={showMessageReactions}
+              height={424}
             >
-              <MessageActionList dismissOverlay={dismissOverlay} messageActions={messageActions} />
-            </View>
+              <MessageUserReactions message={message} selectedReaction={selectedReaction} />
+            </BottomSheetModal>
           ) : null}
-        </Portal>
-        {isBounceDialogOpen ? (
-          <MessageBounce setIsBounceDialogOpen={setIsBounceDialogOpen} />
-        ) : null}
-      </View>
+          <Portal hostName={overlayActive && rect ? 'bottom-item' : undefined}>
+            {overlayActive && rect && overlayItemsAnchorRect ? (
+              <View
+                onLayout={(e) => {
+                  const { width: w, height: h } = e.nativeEvent.layout;
+                  setOverlayBottomH({
+                    h,
+                    w,
+                    x:
+                      overlayItemAlignment === 'right'
+                        ? overlayItemsAnchorRect.x + overlayItemsAnchorRect.w - w
+                        : overlayItemsAnchorRect.x,
+                    y: rect.y + rect.h,
+                  });
+                }}
+              >
+                <MessageActionList
+                  dismissOverlay={dismissOverlay}
+                  messageActions={messageActions}
+                />
+              </View>
+            ) : null}
+          </Portal>
+          {isBounceDialogOpen ? (
+            <MessageBounce setIsBounceDialogOpen={setIsBounceDialogOpen} />
+          ) : null}
+        </View>
+      </MessageOverlayRuntimeProvider>
     </MessageProvider>
   );
 };
@@ -905,6 +930,7 @@ const areEqual = (prevProps: MessagePropsWithContext, nextProps: MessagePropsWit
     groupStyles: prevGroupStyles,
     isAttachmentEqual,
     isTargetedMessage: prevIsTargetedMessage,
+    messageOverlayTargetId: prevMessageOverlayTargetId,
     members: prevMembers,
     message: prevMessage,
     messagesContext: prevMessagesContext,
@@ -918,6 +944,7 @@ const areEqual = (prevProps: MessagePropsWithContext, nextProps: MessagePropsWit
     goToMessage: nextGoToMessage,
     groupStyles: nextGroupStyles,
     isTargetedMessage: nextIsTargetedMessage,
+    messageOverlayTargetId: nextMessageOverlayTargetId,
     members: nextMembers,
     message: nextMessage,
     messagesContext: nextMessagesContext,
@@ -958,6 +985,11 @@ const areEqual = (prevProps: MessagePropsWithContext, nextProps: MessagePropsWit
     return false;
   }
 
+  const messageOverlayTargetIdEqual = prevMessageOverlayTargetId === nextMessageOverlayTargetId;
+  if (!messageOverlayTargetIdEqual) {
+    return false;
+  }
+
   const messageEqual = checkMessageEquality(prevMessage, nextMessage);
 
   if (!messageEqual) {

package/src/components/Message/MessageItemView/__tests__/Message.test.js

@@ -1,9 +1,13 @@
 import React from 'react';
 
+import { Pressable, Text, View } from 'react-native';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 
 import { cleanup, fireEvent, render, waitFor } from '@testing-library/react-native';
 
+import { WithComponents } from '../../../../contexts/componentsContext/ComponentsContext';
+import { useMessageContext } from '../../../../contexts/messageContext/MessageContext';
+import { MessageListItemProvider } from '../../../../contexts/messageListItemContext/MessageListItemContext';
 import { OverlayProvider } from '../../../../contexts/overlayContext/OverlayProvider';
 import { getOrCreateChannelApi } from '../../../../mock-builders/api/getOrCreateChannel';
 
@@ -16,7 +20,38 @@ import { getTestClientWithUser } from '../../../../mock-builders/mock';
 import { Channel } from '../../../Channel/Channel';
 import { Chat } from '../../../Chat/Chat';
 import { MessageComposer } from '../../../MessageInput/MessageComposer';
+import { useShouldUseOverlayStyles } from '../../hooks/useShouldUseOverlayStyles';
 import { Message } from '../../Message';
+import { MessageOverlayWrapper } from '../../MessageOverlayWrapper';
+
+const OverlayStateText = ({ label }) => {
+  const shouldUseOverlayStyles = useShouldUseOverlayStyles();
+
+  return <Text>{`${label}:${shouldUseOverlayStyles ? 'overlay' : 'normal'}`}</Text>;
+};
+
+const OverlayTrigger = () => {
+  const { onLongPress } = useMessageContext();
+
+  return (
+    <Pressable
+      onLongPress={() => onLongPress({ emitter: 'message' })}
+      testID='custom-overlay-trigger'
+    >
+      <Text>Open overlay</Text>
+    </Pressable>
+  );
+};
+
+const CustomMessageItemView = () => (
+  <View testID='custom-message-item-view'>
+    <OverlayStateText label='outside' />
+    <MessageOverlayWrapper targetId='custom-overlay-target' testID='custom-overlay-target'>
+      <OverlayStateText label='inside' />
+      <OverlayTrigger />
+    </MessageOverlayWrapper>
+  </View>
+);
 
 describe('Message', () => {
   let channel;
@@ -37,16 +72,34 @@ describe('Message', () => {
     useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
     channel = chatClient.channel('messaging', mockedChannel.id);
 
-    renderMessage = (options) =>
+    renderMessage = (options, channelProps, componentOverrides) =>
       render(
         <SafeAreaProvider>
           <OverlayProvider>
-            <Chat client={chatClient}>
-              <Channel channel={channel}>
-                <Message groupStyles={['bottom']} {...options} />
-                <MessageComposer />
-              </Channel>
-            </Chat>
+            <MessageListItemProvider
+              value={{
+                goToMessage: jest.fn(),
+                modifiedTheme: {},
+                onThreadSelect: jest.fn(),
+                setNativeScrollability: jest.fn(),
+              }}
+            >
+              <Chat client={chatClient}>
+                {componentOverrides ? (
+                  <WithComponents overrides={componentOverrides}>
+                    <Channel channel={channel} {...channelProps}>
+                      <Message groupStyles={['bottom']} {...options} />
+                      <MessageComposer />
+                    </Channel>
+                  </WithComponents>
+                ) : (
+                  <Channel channel={channel} {...channelProps}>
+                    <Message groupStyles={['bottom']} {...options} />
+                    <MessageComposer />
+                  </Channel>
+                )}
+              </Chat>
+            </MessageListItemProvider>
           </OverlayProvider>
         </SafeAreaProvider>,
       );
@@ -88,4 +141,31 @@ describe('Message', () => {
       expect(onLongPressMessage).toHaveBeenCalledTimes(1);
     });
   });
+
+  it('teleports a custom overlay target without applying overlay styles to siblings', async () => {
+    const message = generateMessage({ user });
+    const { getByTestId, getByText } = renderMessage(
+      { message },
+      {
+        messageOverlayTargetId: 'custom-overlay-target',
+      },
+      {
+        MessageItemView: CustomMessageItemView,
+      },
+    );
+
+    await waitFor(() => {
+      expect(getByTestId('custom-message-item-view')).toBeTruthy();
+      expect(getByText('outside:normal')).toBeTruthy();
+      expect(getByText('inside:normal')).toBeTruthy();
+    });
+
+    fireEvent(getByTestId('custom-overlay-trigger'), 'longPress');
+
+    await waitFor(() => {
+      expect(getByText('outside:normal')).toBeTruthy();
+      expect(getByText('inside:overlay')).toBeTruthy();
+      expect(getByTestId('custom-overlay-target-placeholder')).toBeTruthy();
+    });
+  });
 });

package/src/components/Message/MessageOverlayWrapper.tsx

@@ -0,0 +1,81 @@
+import React, { PropsWithChildren, useCallback, useEffect } from 'react';
+import { View } from 'react-native';
+
+import { Portal } from 'react-native-teleport';
+
+import {
+  MessageOverlayTargetProvider,
+  useMessageContext,
+  useMessageOverlayRuntimeContext,
+} from '../../contexts/messageContext/MessageContext';
+
+export type MessageOverlayWrapperProps = PropsWithChildren<{
+  /**
+   * Stable identifier for this overlay target. Must match `messageOverlayTargetId`
+   * when this subtree should be teleported into the overlay.
+   */
+  targetId: string;
+  /**
+   * Optional test id attached to the wrapped target container.
+   */
+  testID?: string;
+}>;
+
+/**
+ * Wraps the primary message overlay target so the active message can be teleported
+ * into the overlay host while a placeholder preserves its original layout space.
+ */
+export const MessageOverlayWrapper = ({
+  children,
+  targetId,
+  testID,
+}: MessageOverlayWrapperProps) => {
+  const { registerMessageOverlayTarget, unregisterMessageOverlayTarget } = useMessageContext();
+  const { messageOverlayTargetId, overlayActive, overlayTargetRectRef } =
+    useMessageOverlayRuntimeContext();
+  const isActiveTarget = messageOverlayTargetId === targetId;
+  const placeholderLayout = overlayTargetRectRef.current;
+
+  const handleTargetRef = useCallback(
+    (view: View | null) => {
+      registerMessageOverlayTarget({
+        id: targetId,
+        view,
+      });
+    },
+    [registerMessageOverlayTarget, targetId],
+  );
+
+  useEffect(
+    () => () => {
+      unregisterMessageOverlayTarget(targetId);
+    },
+    [targetId, unregisterMessageOverlayTarget],
+  );
+
+  if (!isActiveTarget) {
+    return children;
+  }
+
+  return (
+    <>
+      <Portal hostName={overlayActive ? 'message-overlay' : undefined}>
+        <View collapsable={false} ref={handleTargetRef} testID={testID}>
+          <MessageOverlayTargetProvider value={isActiveTarget}>
+            {children}
+          </MessageOverlayTargetProvider>
+        </View>
+      </Portal>
+      {overlayActive ? (
+        <View
+          pointerEvents='none'
+          style={{
+            height: placeholderLayout?.h ?? 0,
+            width: placeholderLayout?.w && placeholderLayout.w > 0 ? placeholderLayout.w : '100%',
+          }}
+          testID={testID ? `${testID}-placeholder` : 'message-overlay-wrapper-placeholder'}
+        />
+      ) : null}
+    </>
+  );
+};

package/src/components/Message/hooks/__tests__/useShouldUseOverlayStyles.test.tsx

@@ -4,10 +4,12 @@ import { act, cleanup, renderHook } from '@testing-library/react-native';
 
 import {
   MessageContextValue,
+  MessageOverlayRuntimeProvider,
   MessageProvider,
 } from '../../../../contexts/messageContext/MessageContext';
 import { generateMessage } from '../../../../mock-builders/generator/message';
 import { finalizeCloseOverlay, openOverlay, overlayStore } from '../../../../state-store';
+import { DEFAULT_MESSAGE_OVERLAY_TARGET_ID } from '../../messageOverlayConstants';
 
 import { useShouldUseOverlayStyles } from '../useShouldUseOverlayStyles';
 
@@ -22,6 +24,7 @@ const createMessageContextValue = (overrides: Partial<MessageContextValue>): Mes
     groupStyles: [],
     handleAction: jest.fn(),
     handleToggleReaction: jest.fn(),
+    hasAttachmentActions: false,
     hasReactions: false,
     images: [],
     isMessageAIGenerated: jest.fn(),
@@ -29,6 +32,7 @@ const createMessageContextValue = (overrides: Partial<MessageContextValue>): Mes
     lastGroupMessage: false,
     members: {},
     message: generateMessage({ id: 'shared-message-id' }),
+    contextMenuAnchorRef: { current: null },
     messageContentOrder: [],
     messageHasOnlySingleAttachment: false,
     messageOverlayId: 'message-overlay-default',
@@ -38,6 +42,7 @@ const createMessageContextValue = (overrides: Partial<MessageContextValue>): Mes
     onPress: jest.fn(),
     onPressIn: null,
     otherAttachments: [],
+    registerMessageOverlayTarget: jest.fn(),
     reactions: [],
     readBy: false,
     setQuotedMessage: jest.fn(),
@@ -46,13 +51,23 @@ const createMessageContextValue = (overrides: Partial<MessageContextValue>): Mes
     showReactionsOverlay: jest.fn(),
     showMessageStatus: false,
     threadList: false,
+    unregisterMessageOverlayTarget: jest.fn(),
     videos: [],
     ...overrides,
   }) as MessageContextValue;
 
-const createWrapper = (value: MessageContextValue) => {
+const createWrapper = (
+  value: MessageContextValue,
+  runtimeValue = {
+    overlayTargetRectRef: { current: undefined },
+    messageOverlayTargetId: DEFAULT_MESSAGE_OVERLAY_TARGET_ID,
+    overlayActive: false,
+  },
+) => {
   const Wrapper = ({ children }: PropsWithChildren) => (
-    <MessageProvider value={value}>{children}</MessageProvider>
+    <MessageProvider value={value}>
+      <MessageOverlayRuntimeProvider value={runtimeValue}>{children}</MessageOverlayRuntimeProvider>
+    </MessageProvider>
   );
 
   return Wrapper;

package/src/components/Message/hooks/useCreateMessageContext.ts

@@ -47,6 +47,8 @@ export const useCreateMessageContext = ({
   onThreadSelect,
   otherAttachments,
   preventPress,
+  registerMessageOverlayTarget,
+  unregisterMessageOverlayTarget,
   reactions,
   readBy,
   showAvatar,
@@ -102,6 +104,8 @@ export const useCreateMessageContext = ({
       onThreadSelect,
       otherAttachments,
       preventPress,
+      registerMessageOverlayTarget,
+      unregisterMessageOverlayTarget,
       reactions,
       readBy,
       setQuotedMessage,
@@ -134,6 +138,7 @@ export const useCreateMessageContext = ({
       showMessageStatus,
       threadList,
       preventPress,
+      unregisterMessageOverlayTarget,
     ],
   );
 

package/src/components/Message/hooks/useShouldUseOverlayStyles.ts

@@ -1,9 +1,22 @@
-import { useMessageContext } from '../../../contexts';
+import {
+  useMessageContext,
+  useMessageOverlayRuntimeContext,
+  useMessageOverlayTargetContext,
+} from '../../../contexts';
 import { useIsOverlayActive } from '../../../state-store';
+import { DEFAULT_MESSAGE_OVERLAY_TARGET_ID } from '../messageOverlayConstants';
 
 export const useShouldUseOverlayStyles = () => {
   const { messageOverlayId } = useMessageContext();
+  const { messageOverlayTargetId } = useMessageOverlayRuntimeContext();
+  const isWithinMessageOverlayTarget = useMessageOverlayTargetContext();
   const { active, closing } = useIsOverlayActive(messageOverlayId);
 
-  return active && !closing;
+  if (!active || closing) {
+    return false;
+  }
+
+  return messageOverlayTargetId === DEFAULT_MESSAGE_OVERLAY_TARGET_ID
+    ? true
+    : isWithinMessageOverlayTarget;
 };

package/src/components/Message/messageOverlayConstants.ts

@@ -0,0 +1 @@
+export const DEFAULT_MESSAGE_OVERLAY_TARGET_ID = '@stream-io/message-root';

package/src/components/Thread/__tests__/__snapshots__/Thread.test.js.snap

@@ -368,7 +368,9 @@ exports[`Thread should match thread snapshot 1`] = `
                 >
                   <View />
                   <View>
-                    <View>
+                    <View
+                      collapsable={false}
+                    >
                       <View
                         collapsable={false}
                         hitSlop={
@@ -707,7 +709,9 @@ exports[`Thread should match thread snapshot 1`] = `
                 >
                   <View />
                   <View>
-                    <View>
+                    <View
+                      collapsable={false}
+                    >
                       <View
                         collapsable={false}
                         hitSlop={
@@ -1079,7 +1083,9 @@ exports[`Thread should match thread snapshot 1`] = `
                 >
                   <View />
                   <View>
-                    <View>
+                    <View
+                      collapsable={false}
+                    >
                       <View
                         collapsable={false}
                         hitSlop={
@@ -1408,7 +1414,9 @@ exports[`Thread should match thread snapshot 1`] = `
               >
                 <View />
                 <View>
-                  <View>
+                  <View
+                    collapsable={false}
+                  >
                     <View
                       collapsable={false}
                       hitSlop={

package/src/components/index.ts

@@ -87,6 +87,7 @@ export * from './Message/hooks/useStreamingMessage';
 export * from './Message/hooks/useMessageDeliveryData';
 export * from './Message/hooks/useMessageReadData';
 export * from './Message/Message';
+export * from './Message/MessageOverlayWrapper';
 export * from './Message/MessageItemView/MessageAuthor';
 export * from './Message/MessageItemView/MessageBounce';
 export * from './Message/MessageItemView/MessageBlocked';
@@ -163,7 +164,6 @@ export * from './MessageList/hooks/useMessageGroupStyles';
 
 export * from './MessageMenu/MessageActionList';
 export * from './MessageMenu/MessageActionListItem';
-export * from './MessageMenu/MessageMenu';
 export * from './MessageMenu/MessageUserReactions';
 export * from './MessageMenu/MessageUserReactionsAvatar';
 export * from './MessageMenu/MessageReactionPicker';

package/src/contexts/componentsContext/defaultComponents.ts

@@ -123,7 +123,6 @@ import { TypingIndicatorContainer } from '../../components/MessageList/TypingInd
 import { UnreadMessagesNotification } from '../../components/MessageList/UnreadMessagesNotification';
 import { MessageActionList } from '../../components/MessageMenu/MessageActionList';
 import { MessageActionListItem } from '../../components/MessageMenu/MessageActionListItem';
-import { MessageMenu } from '../../components/MessageMenu/MessageMenu';
 import { MessageReactionPicker } from '../../components/MessageMenu/MessageReactionPicker';
 import { MessageUserReactions } from '../../components/MessageMenu/MessageUserReactions';
 import { MessageUserReactionsAvatar } from '../../components/MessageMenu/MessageUserReactionsAvatar';
@@ -226,7 +225,6 @@ const components = {
   MessageInputTrailingView,
   MessageItemView,
   MessageList,
-  MessageMenu,
   MessagePinnedHeader,
   MessageReactionPicker,
   MessageReminderHeader,