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

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';

package/src/contexts/messageContext/MessageContext.tsx

@@ -9,11 +9,13 @@ import type {
   MessagePressableHandlerPayload,
   PressableHandlerPayload,
 } from '../../components/Message/Message';
+import { DEFAULT_MESSAGE_OVERLAY_TARGET_ID } from '../../components/Message/messageOverlayConstants';
 import type { GroupType } from '../../components/MessageList/hooks/useMessageList';
 import type { ChannelContextValue } from '../../contexts/channelContext/ChannelContext';
 import type { MessageContentType } from '../../contexts/messagesContext/MessagesContext';
 import type { DeepPartial } from '../../contexts/themeContext/ThemeContext';
 import type { Theme } from '../../contexts/themeContext/utils/theme';
+import type { Rect } from '../../state-store/message-overlay-store';
 
 import type { MessageComposerAPIContextValue } from '../messageComposerContext/MessageComposerAPIContext';
 import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
@@ -100,6 +102,12 @@ export type MessageContextValue = {
   onPressIn: ((payload: PressableHandlerPayload) => void) | null;
   /** The images attached to a message */
   otherAttachments: Attachment[];
+  /**
+   * Registers the subtree that should be measured and portaled into the message overlay.
+   * Custom message renderers typically interact with this via `MessageOverlayWrapper`.
+   */
+  registerMessageOverlayTarget: (params: { id: string; view: View | null }) => void;
+  unregisterMessageOverlayTarget: (id: string) => void;
   reactions: ReactionSummary[];
   /** Read count of the message */
   readBy: number | boolean;
@@ -164,3 +172,39 @@ export const useMessageContext = () => {
 
   return contextValue;
 };
+
+type MessageOverlayRuntimeContextValue = {
+  overlayTargetRectRef: { current: Rect };
+  messageOverlayTargetId: string;
+  overlayActive: boolean;
+};
+
+const MessageOverlayRuntimeContext = React.createContext<MessageOverlayRuntimeContextValue>({
+  overlayTargetRectRef: { current: undefined },
+  messageOverlayTargetId: DEFAULT_MESSAGE_OVERLAY_TARGET_ID,
+  overlayActive: false,
+});
+
+export const MessageOverlayRuntimeProvider = ({
+  children,
+  value,
+}: PropsWithChildren<{ value: MessageOverlayRuntimeContextValue }>) => (
+  <MessageOverlayRuntimeContext.Provider value={value}>
+    {children}
+  </MessageOverlayRuntimeContext.Provider>
+);
+
+export const useMessageOverlayRuntimeContext = () => useContext(MessageOverlayRuntimeContext);
+
+const MessageOverlayTargetContext = React.createContext(false);
+
+export const MessageOverlayTargetProvider = ({
+  children,
+  value,
+}: PropsWithChildren<{ value: boolean }>) => (
+  <MessageOverlayTargetContext.Provider value={value}>
+    {children}
+  </MessageOverlayTargetContext.Provider>
+);
+
+export const useMessageOverlayTargetContext = () => useContext(MessageOverlayTargetContext);

package/src/contexts/messagesContext/MessagesContext.tsx

@@ -75,6 +75,11 @@ export type MessagesContextValue = Pick<MessageContextValue, 'isMessageAIGenerat
   initialScrollToFirstUnreadMessage: boolean;
   /** Order to render the message content */
   messageContentOrder: MessageContentType[];
+  /**
+   * Overlay target id that should be teleported when a message overlay opens.
+   * Custom `MessageOverlayWrapper` usages should pass a matching `targetId`.
+   */
+  messageOverlayTargetId?: string;
   removeMessage: (message: { id: string; parent_id?: string }) => Promise<void>;
   /**
    * Override the api request for retry message functionality.

package/src/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "9.0.1-beta.2"
+  "version": "9.0.1-beta.3"
 }