Merge pull request #1932 from GetStream/develop

v10.6.0

Author: MartinCupela

docusaurus/docs/React/components/contexts/channel-action-context.mdx

@@ -146,7 +146,7 @@ The function to execute when @mention is hovered in a `message`, takes a DOM cli
 
 ### openThread
 
-The function to execute when replies count button is clicked, takes the parent message of the `Thread` to be opened and a DOM click event.
+The function to execute when replies count button is clicked, takes the parent message of the `Thread` to be opened and optionally a DOM click event.
 
 | Type     |
 |----------|

docusaurus/docs/React/guides/customization/thread-header.mdx

@@ -27,7 +27,7 @@ export const CustomThreadHeader = ({ closeThread, thread }) => {
         ))}
         <div className='reply-count'>{replyCount} Replies</div>
       </div>
-      <div onClick={(event) => closeThread(event)} className='close-button'>
+      <div onClick={closeThread} className='close-button'>
         <div className='left'>
           <div className='right'></div>
         </div>

package.json

@@ -51,7 +51,7 @@
     "react-image-gallery": "^1.2.7",
     "react-is": "^18.1.0",
     "react-markdown": "^8.0.3",
-    "react-player": "^2.10.1",
+    "react-player": "2.10.1",
     "react-popper": "^2.3.0",
     "react-textarea-autosize": "^8.3.0",
     "react-virtuoso": "^2.16.5",

src/components/Channel/Channel.tsx

@@ -748,9 +748,9 @@ const ChannelInner = <
 
   const openThread = (
     message: StreamMessage<StreamChatGenerics>,
-    event: React.BaseSyntheticEvent,
+    event?: React.BaseSyntheticEvent,
   ) => {
-    event.preventDefault();
+    event?.preventDefault();
     setQuotedMessage((current) => {
       if (current?.parent_id !== message?.parent_id) {
         return undefined;
@@ -761,8 +761,8 @@ const ChannelInner = <
     dispatch({ channel, message, type: 'openThread' });
   };
 
-  const closeThread = (event: React.BaseSyntheticEvent) => {
-    event.preventDefault();
+  const closeThread = (event?: React.BaseSyntheticEvent) => {
+    event?.preventDefault();
     dispatch({ type: 'closeThread' });
   };
 

src/components/MessageList/ConnectionStatus.tsx

@@ -26,7 +26,11 @@ const UnMemoizedConnectionStatus = <
   }, [client, online]);
 
   return (
-    <CustomNotification active={!online} type='error'>
+    <CustomNotification
+      active={!online}
+      className='str-chat__connection-status-notification'
+      type='error'
+    >
       {t<string>('Connection failure, reconnecting now...')}
     </CustomNotification>
   );

src/components/MessageList/CustomNotification.tsx

@@ -1,19 +1,25 @@
 import React, { PropsWithChildren } from 'react';
+import clsx from 'clsx';
 
 export type CustomNotificationProps = {
   type: string;
   active?: boolean;
+  className?: string;
 };
 
 const UnMemoizedCustomNotification = (props: PropsWithChildren<CustomNotificationProps>) => {
-  const { active, children, type } = props;
+  const { active, children, className, type } = props;
 
   if (!active) return null;
 
   return (
     <div
       aria-live='polite'
-      className={`str-chat__custom-notification notification-${type} str-chat__notification`}
+      className={clsx(
+        `str-chat__custom-notification notification-${type}`,
+        `str-chat__notification`,
+        className,
+      )}
       data-testid='custom-notification'
     >
       {children}

src/components/MessageList/__tests__/CustomNotification.test.js

@@ -42,4 +42,16 @@ describe('CustomNotification', () => {
 
     expect(getByTestId('custom-notification').className).toContain(`notification-${type}`);
   });
+
+  it('should add custom class to className', () => {
+    const className = 'custom-classname-xxx';
+
+    const { getByTestId } = render(
+      <CustomNotification active={true} className={className}>
+        x
+      </CustomNotification>,
+    );
+
+    expect(getByTestId('custom-notification').className).toContain(className);
+  });
 });

src/components/Thread/Thread.tsx

@@ -38,7 +38,7 @@ export type ThreadProps<
   /** Additional props for `MessageList` component: [available props](https://getstream.io/chat/docs/sdk/react/core-components/message_list/#props) */
   additionalMessageListProps?: MessageListProps<StreamChatGenerics>;
   /** Additional props for `Message` component of the parent message: [available props](https://getstream.io/chat/docs/sdk/react/message-components/message/#props) */
-  additionalParentMessageProps?: MessageProps<StreamChatGenerics>;
+  additionalParentMessageProps?: Partial<MessageProps<StreamChatGenerics>>;
   /** Additional props for `VirtualizedMessageList` component: [available props](https://getstream.io/chat/docs/sdk/react/core-components/virtualized_list/#props) */
   additionalVirtualizedMessageListProps?: VirtualizedMessageListProps<StreamChatGenerics>;
   /** If true, focuses the `MessageInput` component on opening a thread */

src/components/Thread/ThreadHeader.tsx

@@ -15,7 +15,7 @@ export type ThreadHeaderProps<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
 > = {
   /** Callback for closing the thread */
-  closeThread: (event: React.BaseSyntheticEvent) => void;
+  closeThread: (event?: React.BaseSyntheticEvent) => void;
   /** The thread parent message */
   thread: StreamMessage<StreamChatGenerics>;
 };
@@ -46,7 +46,7 @@ export const ThreadHeader = <
         aria-label='Close thread'
         className='str-chat__square-button str-chat__close-thread-button'
         data-testid='close-button'
-        onClick={(event) => closeThread(event)}
+        onClick={closeThread}
       >
         <CloseIcon />
       </button>

src/components/Window/Window.tsx

@@ -1,4 +1,5 @@
 import React, { PropsWithChildren } from 'react';
+import clsx from 'clsx';
 
 import { StreamMessage, useChannelStateContext } from '../../context/ChannelStateContext';
 
@@ -9,7 +10,7 @@ export type WindowProps<
 > = {
   /** show or hide the window when a thread is active */
   hideOnThread?: boolean;
-  /** optional prop to manually trigger the opening of a thread*/
+  /** optional prop to force addition of class str-chat__main-panel--hideOnThread to the Window root element */
   thread?: StreamMessage<StreamChatGenerics>;
 };
 
@@ -18,15 +19,15 @@ const UnMemoizedWindow = <
 >(
   props: PropsWithChildren<WindowProps<StreamChatGenerics>>,
 ) => {
-  const { children, hideOnThread = false } = props;
+  const { children, hideOnThread = false, thread: propThread } = props;
 
-  const { thread } = useChannelStateContext<StreamChatGenerics>('Window');
+  const { thread: contextThread } = useChannelStateContext<StreamChatGenerics>('Window');
 
   return (
     <div
-      className={`str-chat__main-panel   ${
-        hideOnThread && thread ? 'str-chat__main-panel--hideOnThread' : ''
-      }`}
+      className={clsx('str-chat__main-panel', {
+        'str-chat__main-panel--hideOnThread': hideOnThread && (contextThread || propThread),
+      })}
     >
       {children}
     </div>