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

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

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.4"
 }