From d9442d2a419ee8737ac19c5663ffff04141d3650 Mon Sep 17 00:00:00 2001
From: MartinCupela <32706194+MartinCupela@users.noreply.github.com>
Date: Mon, 3 Jun 2024 12:49:36 +0200
Subject: [PATCH] fix: render typing indicator outside the
 VirtualizedMessageList scroll container (#2406)

BREAKING CHANGE: The VirtualizedMessageList does not provide default
Footer component
BREAKING CHANGE: The VirtualizedMessageList markup has changed as
TypingIndicator is rendered as a child of MessageListMainPanel
---
 .../MessageList/VirtualizedMessageList.tsx    |  4 ++--
 .../VirtualizedMessageListComponents.tsx      |  7 +------
 .../VirtualizedMessageListComponents.test.js  | 20 -------------------
 .../VirtualizedMessageList.test.js.snap       |  1 -
 4 files changed, 3 insertions(+), 29 deletions(-)

diff --git a/src/components/MessageList/VirtualizedMessageList.tsx b/src/components/MessageList/VirtualizedMessageList.tsx
index 2633f1f35..acc2bd93d 100644
--- a/src/components/MessageList/VirtualizedMessageList.tsx
+++ b/src/components/MessageList/VirtualizedMessageList.tsx
@@ -37,7 +37,6 @@ import {
   calculateFirstItemIndex,
   calculateItemIndex,
   EmptyPlaceholder,
-  Footer,
   Header,
   Item,
   makeItemsRenderedHandler,
@@ -235,6 +234,7 @@ const VirtualizedMessageListWithContext = <
     UnreadMessagesNotification = DefaultUnreadMessagesNotification,
     UnreadMessagesSeparator,
     VirtualMessage: MessageUIComponentFromContext = MessageSimple,
+    TypingIndicator,
   } = useComponentContext<StreamChatGenerics>('VirtualizedMessageList');
   const MessageUIComponent = MessageUIComponentFromProps || MessageUIComponentFromContext;
 
@@ -439,7 +439,6 @@ const VirtualizedMessageListWithContext = <
             className='str-chat__message-list-scroll'
             components={{
               EmptyPlaceholder,
-              Footer,
               Header,
               Item,
               ...virtuosoComponentsFromProps,
@@ -495,6 +494,7 @@ const VirtualizedMessageListWithContext = <
             {...(defaultItemHeight ? { defaultItemHeight } : {})}
           />
         </div>
+        {TypingIndicator && <TypingIndicator />}
       </MessageListMainPanel>
       <MessageListNotifications
         hasNewMessages={newMessagesNotification}
diff --git a/src/components/MessageList/VirtualizedMessageListComponents.tsx b/src/components/MessageList/VirtualizedMessageListComponents.tsx
index 84138329a..232cfb7e5 100644
--- a/src/components/MessageList/VirtualizedMessageListComponents.tsx
+++ b/src/components/MessageList/VirtualizedMessageListComponents.tsx
@@ -108,12 +108,7 @@ export const EmptyPlaceholder = <
     </>
   );
 };
-export const Footer = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
->() => {
-  const { TypingIndicator } = useComponentContext<StreamChatGenerics>('VirtualizedMessageList');
-  return TypingIndicator ? <TypingIndicator /> : null;
-};
+
 export const messageRenderer = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
 >(
diff --git a/src/components/MessageList/__tests__/VirtualizedMessageListComponents.test.js b/src/components/MessageList/__tests__/VirtualizedMessageListComponents.test.js
index 9230ade0a..48e59b5ca 100644
--- a/src/components/MessageList/__tests__/VirtualizedMessageListComponents.test.js
+++ b/src/components/MessageList/__tests__/VirtualizedMessageListComponents.test.js
@@ -3,7 +3,6 @@ import '@testing-library/jest-dom';
 import { render, screen } from '@testing-library/react';
 import {
   EmptyPlaceholder,
-  Footer,
   Header,
   Item,
   messageRenderer,
@@ -207,25 +206,6 @@ describe('VirtualizedMessageComponents', () => {
     });
   });
 
-  describe('Footer', () => {
-    it('should render nothing in Footer by default', () => {
-      const { container } = renderElements(<Footer />);
-      expect(container).toMatchInlineSnapshot(`<div />`);
-    });
-    it('should render custom TypingIndicator in Footer', () => {
-      const TypingIndicator = () => <div>Custom TypingIndicator</div>;
-      const componentContext = { TypingIndicator };
-      const { container } = renderElements(<Footer />, componentContext);
-      expect(container).toMatchInlineSnapshot(`
-        <div>
-          <div>
-            Custom TypingIndicator
-          </div>
-        </div>
-      `);
-    });
-  });
-
   describe('messageRenderer', () => {
     const virtuosoIndex = PREPEND_OFFSET;
     const numItemsPrepended = 0;
diff --git a/src/components/MessageList/__tests__/__snapshots__/VirtualizedMessageList.test.js.snap b/src/components/MessageList/__tests__/__snapshots__/VirtualizedMessageList.test.js.snap
index d26d81f79..5578f8ad0 100644
--- a/src/components/MessageList/__tests__/__snapshots__/VirtualizedMessageList.test.js.snap
+++ b/src/components/MessageList/__tests__/__snapshots__/VirtualizedMessageList.test.js.snap
@@ -64,7 +64,6 @@ exports[`VirtualizedMessageList should render the list without any message 1`] =
                 No chats here yet…
               </p>
             </div>
-            <div />
           </div>
         </div>
       </div>