stream-chat-react 12.0.0-rc.4 → 12.0.0-rc.6

package/README.md

@@ -90,7 +90,7 @@ For components that implement significant logic, it's helpful to split the compo
 
 ### Customizing Styles
 
-The preferred method for overriding the pre-defined styles in the library is to two step process. First, import our bundled CSS into the file where you instantiate your chat application. Second, locate any Stream styles you want to override using either the browser inspector or by viewing the library code. You can then add selectors to your local CSS file to override our defaults. For example:
+The preferred method for overriding the pre-defined styles in the library is to two-step process. First, import our bundled CSS into the file where you instantiate your chat application. Second, locate any Stream styles you want to override using either the browser inspector or by viewing the library code. You can then add selectors to your local CSS file to override our defaults. For example:
 
 ```js
 import 'stream-chat-react/dist/css/v2/index.css';

package/dist/components/MediaRecorder/AudioRecorder/AudioRecordingInProgress.js

@@ -29,6 +29,9 @@ export const AudioRecordingInProgress = () => {
         if (!recorder?.mediaRecorder)
             return;
         const { mediaRecorder } = recorder;
+        if (mediaRecorder.state === 'recording') {
+            startCounter();
+        }
         mediaRecorder.addEventListener('start', startCounter);
         mediaRecorder.addEventListener('resume', startCounter);
         mediaRecorder.addEventListener('stop', stopCounter);

package/dist/components/MessageInput/hooks/useTimeElapsed.js

@@ -4,23 +4,24 @@ export const useTimeElapsed = ({ startOnMount } = {}) => {
     const [secondsElapsed, setSecondsElapsed] = useState(0);
     const updateInterval = useRef();
     const startCounter = useCallback(() => {
+        if (updateInterval.current)
+            return;
         updateInterval.current = setInterval(() => {
             setSecondsElapsed((prev) => prev + 1);
         }, 1000);
     }, []);
     const stopCounter = useCallback(() => {
         clearInterval(updateInterval.current);
+        updateInterval.current = undefined;
     }, []);
     useEffect(() => {
         if (!startOnMount)
             return;
-        updateInterval.current = setInterval(() => {
-            setSecondsElapsed((prev) => prev + 1);
-        }, 1000);
+        startCounter();
         return () => {
             stopCounter();
         };
-    }, [startOnMount, stopCounter]);
+    }, [startCounter, startOnMount, stopCounter]);
     return {
         secondsElapsed,
         startCounter,

package/dist/components/Thread/Thread.d.ts

@@ -17,8 +17,6 @@ export type ThreadProps<StreamChatGenerics extends DefaultStreamChatGenerics = D
     autoFocus?: boolean;
     /** Injects date separator components into `Thread`, defaults to `false`. To be passed to the underlying `MessageList` or `VirtualizedMessageList` components */
     enableDateSeparator?: boolean;
-    /** Display the thread on 100% width of its parent container. Useful for mobile style view */
-    fullWidth?: boolean;
     /** Custom thread input UI component used to override the default `Input` value stored in `ComponentContext` or the [MessageInputSmall](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/MessageInputSmall.tsx) default */
     Input?: React.ComponentType;
     /** Custom thread message UI component used to override the default `Message` value stored in `ComponentContext` */

package/dist/components/Thread/Thread.js

@@ -17,7 +17,7 @@ export const Thread = (props) => {
     return React.createElement(ThreadInner, { ...props, key: `thread-${thread.id}-${channel?.cid}` });
 };
 const ThreadInner = (props) => {
-    const { additionalMessageInputProps, additionalMessageListProps, additionalParentMessageProps, additionalVirtualizedMessageListProps, autoFocus = true, enableDateSeparator = false, fullWidth = false, Input: PropInput, Message: PropMessage, messageActions = Object.keys(MESSAGE_ACTIONS), virtualized, } = props;
+    const { additionalMessageInputProps, additionalMessageListProps, additionalParentMessageProps, additionalVirtualizedMessageListProps, autoFocus = true, enableDateSeparator = false, Input: PropInput, Message: PropMessage, messageActions = Object.keys(MESSAGE_ACTIONS), virtualized, } = props;
     const { thread, threadHasMore, threadLoadingMore, threadMessages, threadSuppressAutoscroll, } = useChannelStateContext('Thread');
     const { closeThread, loadMoreThread } = useChannelActionContext('Thread');
     const { customClasses } = useChatContext('Thread');
@@ -38,7 +38,6 @@ const ThreadInner = (props) => {
         return null;
     const threadClass = customClasses?.thread ||
         clsx('str-chat__thread-container str-chat__thread', {
-            'str-chat__thread--full': fullWidth,
             'str-chat__thread--virtualized': virtualized,
         });
     const head = (React.createElement(ThreadHead, { key: thread.id, message: thread, Message: MessageUIComponent, ...additionalParentMessageProps }));

package/dist/components/Window/Window.d.ts

@@ -2,9 +2,7 @@ import React, { PropsWithChildren } from 'react';
 import { StreamMessage } from '../../context/ChannelStateContext';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 export type WindowProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
-    /** show or hide the window when a thread is active */
-    hideOnThread?: boolean;
-    /** optional prop to force addition of class str-chat__main-panel--hideOnThread to the Window root element */
+    /** optional prop to force addition of class str-chat__main-panel---with-thread-opn to the Window root element */
     thread?: StreamMessage<StreamChatGenerics>;
 };
 /**

package/dist/components/Window/Window.js

@@ -2,10 +2,10 @@ import React from 'react';
 import clsx from 'clsx';
 import { useChannelStateContext } from '../../context/ChannelStateContext';
 const UnMemoizedWindow = (props) => {
-    const { children, hideOnThread = false, thread: propThread } = props;
+    const { children, thread: propThread } = props;
     const { thread: contextThread } = useChannelStateContext('Window');
     return (React.createElement("div", { className: clsx('str-chat__main-panel', {
-            'str-chat__main-panel--hideOnThread': hideOnThread && (contextThread || propThread),
+            'str-chat__main-panel--thread-open': contextThread || propThread,
         }) }, children));
 };
 /**