stream-chat-react 13.1.0 → 13.1.2

package/dist/components/Chat/hooks/useChat.js

@@ -24,7 +24,7 @@ export const useChat = ({ client, defaultLanguage = 'en', i18nInstance, initialN
     useEffect(() => {
         if (!client)
             return;
-        const version = "13.1.0";
+        const version = "13.1.2";
         const userAgent = client.getUserAgent();
         if (!userAgent.includes('stream-chat-react')) {
             // result looks like: 'stream-chat-react-2.3.2-stream-chat-javascript-client-browser-2.2.2'

package/dist/components/InfiniteScrollPaginator/InfiniteScroll.d.ts

@@ -42,4 +42,4 @@ export type InfiniteScrollProps = PaginatorProps & {
  * In general, the infinite scroll controller should not aim for checking the loading state and whether there is more data to load.
  * That should be controlled by the loading function.
  */
-export declare const InfiniteScroll: (props: PropsWithChildren<InfiniteScrollProps>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const InfiniteScroll: (props: PropsWithChildren<InfiniteScrollProps>) => React.JSX.Element;

package/dist/components/InfiniteScrollPaginator/InfiniteScroll.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { deprecationAndReplacementWarning } from '../../utils/deprecationWarning';
 import { DEFAULT_LOAD_PAGE_SCROLL_THRESHOLD } from '../../constants/limits';
 /**
@@ -21,17 +21,17 @@ const mousewheelListener = (event) => {
  * That should be controlled by the loading function.
  */
 export const InfiniteScroll = (props) => {
-    const { children, element = 'div', hasMore, hasMoreNewer, hasNextPage, hasPreviousPage, head, initialLoad = true, isLoading, listenToScroll, loader, loadMore, loadMoreNewer, loadNextPage, loadPreviousPage, threshold = DEFAULT_LOAD_PAGE_SCROLL_THRESHOLD, useCapture = false, ...elementProps } = props;
+    const { children, element: Component = 'div', hasMore, hasMoreNewer, hasNextPage, hasPreviousPage, head, initialLoad = true, isLoading, listenToScroll, loader, loadMore, loadMoreNewer, loadNextPage, loadPreviousPage, threshold = DEFAULT_LOAD_PAGE_SCROLL_THRESHOLD, useCapture = false, ...elementProps } = props;
     const loadNextPageFn = loadNextPage || loadMoreNewer;
     const loadPreviousPageFn = loadPreviousPage || loadMore;
     const hasNextPageFlag = hasNextPage || hasMoreNewer;
     const hasPreviousPageFlag = hasPreviousPage || hasMore;
-    const scrollComponent = useRef(undefined);
+    const [scrollComponent, setScrollComponent] = useState(null);
     const previousOffset = useRef(undefined);
     const previousReverseOffset = useRef(undefined);
     const scrollListenerRef = useRef(undefined);
     scrollListenerRef.current = () => {
-        const element = scrollComponent.current;
+        const element = scrollComponent;
         if (!element || element.offsetParent === null) {
             return;
         }
@@ -71,7 +71,7 @@ export const InfiniteScroll = (props) => {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     useEffect(() => {
-        const scrollElement = scrollComponent.current?.parentNode;
+        const scrollElement = scrollComponent?.parentNode;
         if (!scrollElement)
             return;
         const scrollListener = () => scrollListenerRef.current?.();
@@ -82,27 +82,18 @@ export const InfiniteScroll = (props) => {
             scrollElement.removeEventListener('scroll', scrollListener, useCapture);
             scrollElement.removeEventListener('resize', scrollListener, useCapture);
         };
-    }, [initialLoad, useCapture]);
+    }, [initialLoad, scrollComponent, useCapture]);
     useEffect(() => {
-        const scrollElement = scrollComponent.current?.parentNode;
-        if (scrollElement) {
-            scrollElement.addEventListener('wheel', mousewheelListener, { passive: false });
-        }
+        const scrollElement = scrollComponent?.parentNode;
+        if (!scrollElement)
+            return;
+        scrollElement.addEventListener('wheel', mousewheelListener, { passive: false });
         return () => {
-            if (scrollElement) {
-                scrollElement.removeEventListener('wheel', mousewheelListener, useCapture);
-            }
+            scrollElement.removeEventListener('wheel', mousewheelListener, useCapture);
         };
-    }, [useCapture]);
-    const attributes = {
-        ...elementProps,
-        ref: (element) => {
-            scrollComponent.current = element;
-        },
-    };
-    const childrenArray = [loader, children];
-    if (head) {
-        childrenArray.unshift(head);
-    }
-    return React.createElement(element, attributes, childrenArray);
+    }, [scrollComponent, useCapture]);
+    return (React.createElement(Component, { ...elementProps, ref: setScrollComponent },
+        head,
+        loader,
+        children));
 };

package/dist/components/Message/MessageIsThreadReplyInChannelButtonIndicator.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const MessageIsThreadReplyInChannelButtonIndicator: () => React.JSX.Element | null;

package/dist/components/Message/{MessageThreadReplyInChannelButtonIndicator.js → MessageIsThreadReplyInChannelButtonIndicator.js}

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef } from 'react';
 import { formatMessage } from 'stream-chat';
 import { useChannelActionContext, useChannelStateContext, useChatContext, useMessageContext, useTranslationContext, } from '../../context';
-export const MessageThreadReplyInChannelButtonIndicator = () => {
+export const MessageIsThreadReplyInChannelButtonIndicator = () => {
     const { client } = useChatContext();
     const { t } = useTranslationContext();
     const { channel } = useChannelStateContext();
@@ -26,7 +26,7 @@ export const MessageThreadReplyInChannelButtonIndicator = () => {
             },
             origin: {
                 context: { threadReply: message },
-                emitter: 'MessageThreadReplyInChannelButtonIndicator',
+                emitter: 'MessageIsThreadReplyInChannelButtonIndicator',
             },
         });
     });

package/dist/components/Message/MessageSimple.js

@@ -11,7 +11,7 @@ import { MessageText } from './MessageText';
 import { MessageTimestamp as DefaultMessageTimestamp } from './MessageTimestamp';
 import { StreamedMessageText as DefaultStreamedMessageText } from './StreamedMessageText';
 import { isDateSeparatorMessage } from '../MessageList';
-import { MessageThreadReplyInChannelButtonIndicator as DefaultMessageIsThreadReplyInChannelButtonIndicator } from './MessageThreadReplyInChannelButtonIndicator';
+import { MessageIsThreadReplyInChannelButtonIndicator as DefaultMessageIsThreadReplyInChannelButtonIndicator } from './MessageIsThreadReplyInChannelButtonIndicator';
 import { ReminderNotification as DefaultReminderNotification } from './ReminderNotification';
 import { useMessageReminder } from './hooks';
 import { areMessageUIPropsEqual, isMessageBlocked, isMessageBounced, isMessageEdited, messageHasAttachments, messageHasReactions, } from './utils';

package/dist/context/ComponentContext.d.ts

@@ -65,7 +65,7 @@ export type ComponentContextValue = {
     MessageBlocked?: React.ComponentType;
     /** Custom UI component for a deleted message, defaults to and accepts same props as: [MessageDeleted](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageDeleted.tsx) */
     MessageDeleted?: React.ComponentType<MessageDeletedProps>;
-    /** Custom UI component for an indicator that a message is a thread reply sent to channel list: [MessageThreadReplyInChannelButtonIndicator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageIsThreadReplyInChannelButtonIndicator.tsx) */
+    /** Custom UI component for an indicator that a message is a thread reply sent to channel list: [MessageIsThreadReplyInChannelButtonIndicator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageIsThreadReplyInChannelButtonIndicator.tsx) */
     MessageIsThreadReplyInChannelButtonIndicator?: React.ComponentType;
     MessageListMainPanel?: React.ComponentType<PropsWithChildrenOnly>;
     /** Custom UI component that displays message and connection status notifications in the `MessageList`, defaults to and accepts same props as [DefaultMessageListNotifications](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageList/MessageListNotifications.tsx) */
@@ -115,6 +115,7 @@ export type ComponentContextValue = {
     /** Custom UI component to display the reactions modal, defaults to and accepts same props as: [ReactionsListModal](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Reactions/ReactionsListModal.tsx) */
     ReactionsListModal?: React.ComponentType<ReactionsListModalProps>;
     RecordingPermissionDeniedNotification?: React.ComponentType<RecordingPermissionDeniedNotificationProps>;
+    /** Custom UI component to display the message reminder information in the Message UI, defaults to and accepts same props as: [ReminderNotification](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/ReminderNotification.tsx) */
     ReminderNotification?: React.ComponentType<ReminderNotificationProps>;
     /** Custom component to display the search UI, defaults to and accepts same props as: [Search](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Search/Search.tsx) */
     Search?: React.ComponentType<SearchProps>;