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

Author: MartinCupela

src/components/MessageList/VirtualizedMessageList.tsx

@@ -37,7 +37,6 @@ import {
   calculateFirstItemIndex,
   calculateItemIndex,
   EmptyPlaceholder,
-  Footer,
   Header,
   Item,
   makeItemsRenderedHandler,
@@ -232,6 +231,7 @@ const VirtualizedMessageListWithContext = <
     UnreadMessagesNotification = DefaultUnreadMessagesNotification,
     UnreadMessagesSeparator,
     VirtualMessage: MessageUIComponentFromContext = MessageSimple,
+    TypingIndicator,
   } = useComponentContext<StreamChatGenerics>('VirtualizedMessageList');
   const MessageUIComponent = MessageUIComponentFromProps || MessageUIComponentFromContext;
 
@@ -435,7 +435,6 @@ const VirtualizedMessageListWithContext = <
             className='str-chat__message-list-scroll'
             components={{
               EmptyPlaceholder,
-              Footer,
               Header,
               Item,
               ...virtuosoComponentsFromProps,
@@ -490,6 +489,7 @@ const VirtualizedMessageListWithContext = <
             {...(defaultItemHeight ? { defaultItemHeight } : {})}
           />
         </div>
+        {TypingIndicator && <TypingIndicator />}
       </MessageListMainPanel>
       <MessageListNotifications
         hasNewMessages={newMessagesNotification}

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
 >(

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,
@@ -206,25 +205,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;

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>