stream-chat-react 13.1.1 → 13.2.0

package/dist/components/ChannelList/ChannelList.js

@@ -136,7 +136,7 @@ const UnMemoizedChannelList = (props) => {
         [`${baseClass}--open`]: navOpen,
     });
     const showChannelList = (!searchActive && !searchIsActive) || additionalChannelSearchProps?.popupResults;
-    return (React.createElement(ChannelListContextProvider, { value: { channels, setChannels } },
+    return (React.createElement(ChannelListContextProvider, { value: { channels, hasNextPage, loadNextPage, setChannels } },
         React.createElement("div", { className: className, ref: channelListRef },
             showChannelSearch &&
                 (Search ? (React.createElement(Search, { directMessagingChannelType: additionalChannelSearchProps?.channelType, disabled: additionalChannelSearchProps?.disabled, exitSearchOnInputBlur: additionalChannelSearchProps?.clearSearchOnClickOutside, placeholder: additionalChannelSearchProps?.placeholder })) : (React.createElement(ChannelSearch, { onSearch: onSearch, onSearchExit: onSearchExit, setChannels: setChannels, ...additionalChannelSearchProps }))),

package/dist/components/ChannelList/hooks/usePaginatedChannels.d.ts

@@ -12,7 +12,7 @@ export type CustomQueryChannelsFn = (params: CustomQueryChannelParams) => Promis
 export declare const usePaginatedChannels: (client: StreamChat, filters: ChannelFilters, sort: ChannelSort, options: ChannelOptions, activeChannelHandler: (channels: Array<Channel>, setChannels: React.Dispatch<React.SetStateAction<Array<Channel>>>) => void, recoveryThrottleIntervalMs?: number, customQueryChannels?: CustomQueryChannelsFn) => {
     channels: Channel[];
     hasNextPage: boolean;
-    loadNextPage: () => void;
+    loadNextPage: () => Promise<void>;
     setChannels: import("react").Dispatch<import("react").SetStateAction<Channel[]>>;
 };
 export {};

package/dist/components/ChannelList/hooks/usePaginatedChannels.js

@@ -72,9 +72,7 @@ export const usePaginatedChannels = (client, filters, sort, options, activeChann
         lastRecoveryTimestamp.current = now;
         queryChannels('reload');
     }, [error, queryChannels, recoveryThrottleInterval]);
-    const loadNextPage = () => {
-        queryChannels();
-    };
+    const loadNextPage = () => queryChannels();
     useEffect(() => {
         if (client.recoverStateOnReconnect)
             return;

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.1";
+        const version = "13.2.0";
         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/FixedHeightMessage.js

@@ -1,12 +1,11 @@
 import React, { useCallback, useMemo } from 'react';
-import { useActionHandler, useDeleteHandler, useUserRole } from './hooks';
+import { useDeleteHandler, useUserRole } from './hooks';
 import { MessageDeleted as DefaultMessageDeleted } from './MessageDeleted';
 import { MessageTimestamp } from './MessageTimestamp';
 import { getMessageActions } from './utils';
 import { Avatar } from '../Avatar';
 import { Gallery } from '../Gallery';
 import { MessageActions } from '../MessageActions';
-import { MML } from '../MML';
 import { useChatContext } from '../../context/ChatContext';
 import { useComponentContext } from '../../context/ComponentContext';
 import { useMessageContext } from '../../context/MessageContext';
@@ -32,7 +31,6 @@ const UnMemoizedFixedHeightMessage = (props) => {
     const { userLanguage } = useTranslationContext('FixedHeightMessage');
     const groupedByUser = propGroupedByUser !== undefined ? propGroupedByUser : contextGroupedByUser;
     const message = propMessage || contextMessage;
-    const handleAction = useActionHandler(message);
     const handleDelete = useDeleteHandler(message);
     const role = useUserRole(message);
     const messageTextToRender = message?.i18n?.[`${userLanguage}_text`] ||
@@ -52,7 +50,6 @@ const UnMemoizedFixedHeightMessage = (props) => {
                 images && React.createElement(Gallery, { images: images }),
                 React.createElement("div", { className: 'str-chat__virtual-message__text', "data-testid": 'msg-text' },
                     renderedText,
-                    message.mml && (React.createElement(MML, { actionHandler: handleAction, align: 'left', source: message.mml })),
                     React.createElement("div", { className: 'str-chat__virtual-message__data' },
                         React.createElement(MessageActions, { customWrapperClass: 'str-chat__virtual-message__actions', getMessageActions: messageActionsHandler, handleDelete: handleDelete, message: message, mine: () => role.isMyMessage }),
                         React.createElement("span", { className: 'str-chat__virtual-message__date' },

package/dist/components/Message/MessageSimple.js

@@ -18,7 +18,6 @@ import { areMessageUIPropsEqual, isMessageBlocked, isMessageBounced, isMessageEd
 import { Avatar as DefaultAvatar } from '../Avatar';
 import { Attachment as DefaultAttachment } from '../Attachment';
 import { EditMessageModal } from '../MessageInput';
-import { MML } from '../MML';
 import { Poll } from '../Poll';
 import { ReactionsList as DefaultReactionList } from '../Reactions';
 import { MessageBounceModal } from '../MessageBounce/MessageBounceModal';
@@ -95,7 +94,6 @@ const MessageSimpleWithContext = (props) => {
                     poll && React.createElement(Poll, { poll: poll }),
                     message.attachments?.length && !message.quoted_message ? (React.createElement(Attachment, { actionHandler: handleAction, attachments: message.attachments })) : null,
                     isAIGenerated ? (React.createElement(StreamedMessageText, { message: message, renderText: renderText })) : (React.createElement(MessageText, { message: message, renderText: renderText })),
-                    message.mml && (React.createElement(MML, { actionHandler: handleAction, align: isMyMessage() ? 'right' : 'left', source: message.mml })),
                     React.createElement(MessageErrorIcon, null))),
             showReplyCountButton && (React.createElement(MessageRepliesCountButton, { onClick: handleOpenThread, reply_count: message.reply_count })),
             showIsReplyInChannel && React.createElement(MessageIsThreadReplyInChannelButtonIndicator, null),

package/dist/components/TextareaComposer/TextareaComposer.js

@@ -1,6 +1,4 @@
-import debounce from 'lodash.debounce';
 import clsx from 'clsx';
-import { useMemo } from 'react';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import Textarea from 'react-textarea-autosize';
 import { useMessageComposer } from '../MessageInput';
@@ -129,13 +127,13 @@ export const TextareaComposer = ({ className, closeSuggestionsOnClickOutside, co
             textComposer.closeSuggestions();
         }
     }, [onScroll, textComposer]);
-    const setSelectionDebounced = useMemo(() => debounce((e) => {
+    const setSelectionDebounced = useCallback((e) => {
         onSelect?.(e);
         textComposer.setSelection({
             end: e.target.selectionEnd,
             start: e.target.selectionStart,
         });
-    }, 100, { leading: false, trailing: true }), [onSelect, textComposer]);
+    }, [onSelect, textComposer]);
     useEffect(() => {
         // FIXME: find the real reason for cursor being set to the end on each change
         // This is a workaround to prevent the cursor from jumping

package/dist/components/index.d.ts

@@ -20,7 +20,6 @@ export * from './MessageActions';
 export type { MessageBouncePromptProps } from './MessageBounce';
 export * from './MessageInput';
 export * from './MessageList';
-export * from './MML';
 export * from './Modal';
 export * from './Notifications';
 export * from './Poll';

package/dist/components/index.js

@@ -19,7 +19,6 @@ export * from './Message';
 export * from './MessageActions';
 export * from './MessageInput';
 export * from './MessageList';
-export * from './MML';
 export * from './Modal';
 export * from './Notifications';
 export * from './Poll';

package/dist/context/ChannelListContext.d.ts

@@ -7,6 +7,14 @@ export type ChannelListContextValue = {
      * Channels query is executed by default only by ChannelList component in the SDK.
      */
     channels: Channel[];
+    /**
+     * Indicator for channel pagination to determine whether more items can be loaded
+     */
+    hasNextPage: boolean;
+    /**
+     * Pagination function to load more channels
+     */
+    loadNextPage(): Promise<void>;
     /**
      * Sets the list of Channel objects to be rendered by ChannelList component.
      */