stream-chat-react 11.20.0 → 12.0.0-rc.1

package/dist/components/MessageInput/index.d.ts

@@ -8,9 +8,6 @@ export * from './icons';
 export * from './LinkPreviewList';
 export * from './MessageInput';
 export * from './MessageInputFlat';
-export * from './MessageInputSmall';
 export * from './QuotedMessagePreview';
 export * from './SendButton';
-export * from './UploadsPreview';
 export * from './types';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/MessageInput/index.js

@@ -7,8 +7,6 @@ export * from './icons';
 export * from './LinkPreviewList';
 export * from './MessageInput';
 export * from './MessageInputFlat';
-export * from './MessageInputSmall';
 export * from './QuotedMessagePreview';
 export * from './SendButton';
-export * from './UploadsPreview';
 export * from './types';

package/dist/components/MessageInput/types.d.ts

@@ -112,4 +112,3 @@ export type LocalFileAttachment<StreamChatGenerics extends DefaultStreamChatGene
 export type AnyLocalAttachment<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics, CustomLocalMetadata = Record<string, unknown>> = LocalAttachmentCast<Attachment<StreamChatGenerics>, LocalAttachmentMetadata<CustomLocalMetadata>>;
 export type LocalAttachment<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = AnyLocalAttachment<StreamChatGenerics> | LocalFileAttachment<StreamChatGenerics> | LocalImageAttachment<StreamChatGenerics> | LocalAudioAttachment<StreamChatGenerics> | LocalVideoAttachment<StreamChatGenerics> | LocalVoiceRecordingAttachment<StreamChatGenerics>;
 export {};
-//# sourceMappingURL=types.d.ts.map

package/dist/components/MessageList/ConnectionStatus.d.ts

@@ -1,4 +1,3 @@
 import React from 'react';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 export declare const ConnectionStatus: React.MemoExoticComponent<(<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>() => React.JSX.Element)>;
-//# sourceMappingURL=ConnectionStatus.d.ts.map

package/dist/components/MessageList/ConnectionStatus.js

@@ -1,20 +1,19 @@
 import React, { useEffect, useState } from 'react';
 import { CustomNotification } from './CustomNotification';
 import { useChatContext, useTranslationContext } from '../../context';
-var UnMemoizedConnectionStatus = function () {
-    var client = useChatContext('ConnectionStatus').client;
-    var t = useTranslationContext('ConnectionStatus').t;
-    var _a = useState(true), online = _a[0], setOnline = _a[1];
-    useEffect(function () {
-        var connectionChanged = function (_a) {
-            var _b = _a.online, onlineStatus = _b === void 0 ? false : _b;
+const UnMemoizedConnectionStatus = () => {
+    const { client } = useChatContext('ConnectionStatus');
+    const { t } = useTranslationContext('ConnectionStatus');
+    const [online, setOnline] = useState(true);
+    useEffect(() => {
+        const connectionChanged = ({ online: onlineStatus = false }) => {
             if (online !== onlineStatus) {
                 setOnline(onlineStatus);
             }
         };
         client.on('connection.changed', connectionChanged);
-        return function () { return client.off('connection.changed', connectionChanged); };
+        return () => client.off('connection.changed', connectionChanged);
     }, [client, online]);
     return (React.createElement(CustomNotification, { active: !online, className: 'str-chat__connection-status-notification', type: 'error' }, t('Connection failure, reconnecting now...')));
 };
-export var ConnectionStatus = React.memo(UnMemoizedConnectionStatus);
+export const ConnectionStatus = React.memo(UnMemoizedConnectionStatus);

package/dist/components/MessageList/CustomNotification.d.ts

@@ -5,4 +5,3 @@ export type CustomNotificationProps = {
     className?: string;
 };
 export declare const CustomNotification: (props: PropsWithChildren<CustomNotificationProps>) => React.JSX.Element | null;
-//# sourceMappingURL=CustomNotification.d.ts.map

package/dist/components/MessageList/CustomNotification.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import clsx from 'clsx';
-var UnMemoizedCustomNotification = function (props) {
-    var active = props.active, children = props.children, className = props.className, type = props.type;
+const UnMemoizedCustomNotification = (props) => {
+    const { active, children, className, type } = props;
     if (!active)
         return null;
-    return (React.createElement("div", { "aria-live": 'polite', className: clsx("str-chat__custom-notification notification-".concat(type), "str-chat__notification", "str-chat-react__notification", className), "data-testid": 'custom-notification' }, children));
+    return (React.createElement("div", { "aria-live": 'polite', className: clsx(`str-chat__custom-notification notification-${type}`, `str-chat__notification`, `str-chat-react__notification`, className), "data-testid": 'custom-notification' }, children));
 };
-export var CustomNotification = React.memo(UnMemoizedCustomNotification);
+export const CustomNotification = React.memo(UnMemoizedCustomNotification);

package/dist/components/MessageList/GiphyPreviewMessage.d.ts

@@ -5,4 +5,3 @@ export type GiphyPreviewMessageProps<StreamChatGenerics extends DefaultStreamCha
     message: StreamMessage<StreamChatGenerics>;
 };
 export declare const GiphyPreviewMessage: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: GiphyPreviewMessageProps<StreamChatGenerics>) => React.JSX.Element;
-//# sourceMappingURL=GiphyPreviewMessage.d.ts.map

package/dist/components/MessageList/GiphyPreviewMessage.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Message } from '../Message/Message';
-export var GiphyPreviewMessage = function (props) {
-    var message = props.message;
+export const GiphyPreviewMessage = (props) => {
+    const { message } = props;
     return (React.createElement("div", { className: 'giphy-preview-message' },
         React.createElement(Message, { message: message })));
 };

package/dist/components/MessageList/MessageList.d.ts

@@ -74,4 +74,3 @@ export type MessageListProps<StreamChatGenerics extends DefaultStreamChatGeneric
  */
 export declare const MessageList: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: MessageListProps<StreamChatGenerics>) => React.JSX.Element;
 export {};
-//# sourceMappingURL=MessageList.d.ts.map

package/dist/components/MessageList/MessageList.js

@@ -1,4 +1,4 @@
-import { __assign, __awaiter, __generator, __rest } from "tslib";
+import clsx from 'clsx';
 import React from 'react';
 import { useEnrichedMessages, useMessageListElements, useScrollLocationLogic, useUnreadMessagesNotification, } from './hooks/MessageList';
 import { useMarkRead } from './hooks/useMarkRead';
@@ -18,48 +18,46 @@ import { TypingIndicator as DefaultTypingIndicator } from '../TypingIndicator';
 import { MessageListMainPanel } from './MessageListMainPanel';
 import { defaultRenderMessages } from './renderMessages';
 import { DEFAULT_LOAD_PAGE_SCROLL_THRESHOLD, DEFAULT_NEXT_CHANNEL_PAGE_SIZE, } from '../../constants/limits';
-var MessageListWithContext = function (props) {
-    var _a;
-    var channel = props.channel, channelUnreadUiState = props.channelUnreadUiState, _b = props.disableDateSeparator, disableDateSeparator = _b === void 0 ? false : _b, groupStyles = props.groupStyles, _c = props.hideDeletedMessages, hideDeletedMessages = _c === void 0 ? false : _c, _d = props.hideNewMessageSeparator, hideNewMessageSeparator = _d === void 0 ? false : _d, _e = props.internalInfiniteScrollProps, _f = _e === void 0 ? {} : _e, _g = _f.threshold, loadMoreScrollThreshold = _g === void 0 ? DEFAULT_LOAD_PAGE_SCROLL_THRESHOLD : _g, restInternalInfiniteScrollProps = __rest(_f, ["threshold"]), _h = props.messageActions, messageActions = _h === void 0 ? Object.keys(MESSAGE_ACTIONS) : _h, _j = props.messages, messages = _j === void 0 ? [] : _j, notifications = props.notifications, _k = props.noGroupByUser, noGroupByUser = _k === void 0 ? false : _k, _l = props.pinPermissions, pinPermissions = _l === void 0 ? defaultPinPermissions : _l, // @deprecated in favor of `channelCapabilities` - TODO: remove in next major release
-    _m = props.returnAllReadData, // @deprecated in favor of `channelCapabilities` - TODO: remove in next major release
-    returnAllReadData = _m === void 0 ? false : _m, _o = props.threadList, threadList = _o === void 0 ? false : _o, _p = props.unsafeHTML, unsafeHTML = _p === void 0 ? false : _p, headerPosition = props.headerPosition, read = props.read, _q = props.renderMessages, renderMessages = _q === void 0 ? defaultRenderMessages : _q, reviewProcessedMessage = props.reviewProcessedMessage, _r = props.messageLimit, messageLimit = _r === void 0 ? DEFAULT_NEXT_CHANNEL_PAGE_SIZE : _r, loadMoreCallback = props.loadMore, loadMoreNewerCallback = props.loadMoreNewer, _s = props.hasMoreNewer, hasMoreNewer = _s === void 0 ? false : _s, reactionDetailsSort = props.reactionDetailsSort, showUnreadNotificationAlways = props.showUnreadNotificationAlways, sortReactionDetails = props.sortReactionDetails, sortReactions = props.sortReactions, suppressAutoscroll = props.suppressAutoscroll, highlightedMessageId = props.highlightedMessageId, _t = props.jumpToLatestMessage, jumpToLatestMessage = _t === void 0 ? function () { return Promise.resolve(); } : _t;
-    var _u = React.useState(null), listElement = _u[0], setListElement = _u[1];
-    var _v = React.useState(null), ulElement = _v[0], setUlElement = _v[1];
-    var customClasses = useChatContext('MessageList').customClasses;
-    var _w = useComponentContext('MessageList'), _x = _w.EmptyStateIndicator, EmptyStateIndicator = _x === void 0 ? DefaultEmptyStateIndicator : _x, _y = _w.LoadingIndicator, LoadingIndicator = _y === void 0 ? DefaultLoadingIndicator : _y, _z = _w.MessageListNotifications, MessageListNotifications = _z === void 0 ? DefaultMessageListNotifications : _z, _0 = _w.MessageNotification, MessageNotification = _0 === void 0 ? DefaultMessageNotification : _0, _1 = _w.TypingIndicator, TypingIndicator = _1 === void 0 ? DefaultTypingIndicator : _1, _2 = _w.UnreadMessagesNotification, UnreadMessagesNotification = _2 === void 0 ? DefaultUnreadMessagesNotification : _2;
-    var _3 = useScrollLocationLogic({
-        hasMoreNewer: hasMoreNewer,
-        listElement: listElement,
-        loadMoreScrollThreshold: loadMoreScrollThreshold,
-        messages: messages,
+const MessageListWithContext = (props) => {
+    const { channel, channelUnreadUiState, disableDateSeparator = false, groupStyles, hideDeletedMessages = false, hideNewMessageSeparator = false, internalInfiniteScrollProps: { threshold: loadMoreScrollThreshold = DEFAULT_LOAD_PAGE_SCROLL_THRESHOLD, ...restInternalInfiniteScrollProps } = {}, messageActions = Object.keys(MESSAGE_ACTIONS), messages = [], notifications, noGroupByUser = false, pinPermissions = defaultPinPermissions, // @deprecated in favor of `channelCapabilities` - TODO: remove in next major release
+    returnAllReadData = false, threadList = false, unsafeHTML = false, headerPosition, read, renderMessages = defaultRenderMessages, reviewProcessedMessage, messageLimit = DEFAULT_NEXT_CHANNEL_PAGE_SIZE, loadMore: loadMoreCallback, loadMoreNewer: loadMoreNewerCallback, hasMoreNewer = false, reactionDetailsSort, showUnreadNotificationAlways, sortReactionDetails, sortReactions, suppressAutoscroll, highlightedMessageId, jumpToLatestMessage = () => Promise.resolve(), } = props;
+    const [listElement, setListElement] = React.useState(null);
+    const [ulElement, setUlElement] = React.useState(null);
+    const { customClasses } = useChatContext('MessageList');
+    const { EmptyStateIndicator = DefaultEmptyStateIndicator, LoadingIndicator = DefaultLoadingIndicator, MessageListNotifications = DefaultMessageListNotifications, MessageNotification = DefaultMessageNotification, TypingIndicator = DefaultTypingIndicator, UnreadMessagesNotification = DefaultUnreadMessagesNotification, } = useComponentContext('MessageList');
+    const { hasNewMessages, isMessageListScrolledToBottom, onScroll, scrollToBottom, wrapperRect, } = useScrollLocationLogic({
+        hasMoreNewer,
+        listElement,
+        loadMoreScrollThreshold,
+        messages,
         scrolledUpThreshold: props.scrolledUpThreshold,
-        suppressAutoscroll: suppressAutoscroll,
-    }), hasNewMessages = _3.hasNewMessages, isMessageListScrolledToBottom = _3.isMessageListScrolledToBottom, onScroll = _3.onScroll, scrollToBottom = _3.scrollToBottom, wrapperRect = _3.wrapperRect;
-    var showUnreadMessagesNotification = useUnreadMessagesNotification({
-        isMessageListScrolledToBottom: isMessageListScrolledToBottom,
+        suppressAutoscroll,
+    });
+    const { show: showUnreadMessagesNotification } = useUnreadMessagesNotification({
+        isMessageListScrolledToBottom,
         showAlways: !!showUnreadNotificationAlways,
-        unreadCount: channelUnreadUiState === null || channelUnreadUiState === void 0 ? void 0 : channelUnreadUiState.unread_messages,
-    }).show;
+        unreadCount: channelUnreadUiState?.unread_messages,
+    });
     useMarkRead({
-        isMessageListScrolledToBottom: isMessageListScrolledToBottom,
+        isMessageListScrolledToBottom,
         messageListIsThread: threadList,
-        unreadCount: (_a = channelUnreadUiState === null || channelUnreadUiState === void 0 ? void 0 : channelUnreadUiState.unread_messages) !== null && _a !== void 0 ? _a : 0,
-        wasMarkedUnread: !!(channelUnreadUiState === null || channelUnreadUiState === void 0 ? void 0 : channelUnreadUiState.first_unread_message_id),
+        unreadCount: channelUnreadUiState?.unread_messages ?? 0,
+        wasMarkedUnread: !!channelUnreadUiState?.first_unread_message_id,
+    });
+    const { messageGroupStyles, messages: enrichedMessages } = useEnrichedMessages({
+        channel,
+        disableDateSeparator,
+        groupStyles,
+        headerPosition,
+        hideDeletedMessages,
+        hideNewMessageSeparator,
+        messages,
+        noGroupByUser,
+        reviewProcessedMessage,
     });
-    var _4 = useEnrichedMessages({
-        channel: channel,
-        disableDateSeparator: disableDateSeparator,
-        groupStyles: groupStyles,
-        headerPosition: headerPosition,
-        hideDeletedMessages: hideDeletedMessages,
-        hideNewMessageSeparator: hideNewMessageSeparator,
-        messages: messages,
-        noGroupByUser: noGroupByUser,
-        reviewProcessedMessage: reviewProcessedMessage,
-    }), messageGroupStyles = _4.messageGroupStyles, enrichedMessages = _4.messages;
-    var elements = useMessageListElements({
-        channelUnreadUiState: channelUnreadUiState,
-        enrichedMessages: enrichedMessages,
+    const elements = useMessageListElements({
+        channelUnreadUiState,
+        enrichedMessages,
         internalMessageProps: {
             additionalMessageInputProps: props.additionalMessageInputProps,
             closeReactionSelectorOnClick: props.closeReactionSelectorOnClick,
@@ -75,7 +73,7 @@ var MessageListWithContext = function (props) {
             getMuteUserSuccessNotification: props.getMuteUserSuccessNotification,
             getPinMessageErrorNotification: props.getPinMessageErrorNotification,
             Message: props.Message,
-            messageActions: messageActions,
+            messageActions,
             messageListRect: wrapperRect,
             onlySenderCanEdit: props.onlySenderCanEdit,
             onMentionsClick: props.onMentionsClick,
@@ -83,66 +81,58 @@ var MessageListWithContext = function (props) {
             onUserClick: props.onUserClick,
             onUserHover: props.onUserHover,
             openThread: props.openThread,
-            pinPermissions: pinPermissions,
-            reactionDetailsSort: reactionDetailsSort,
+            pinPermissions,
+            reactionDetailsSort,
             renderText: props.renderText,
             retrySendMessage: props.retrySendMessage,
-            sortReactionDetails: sortReactionDetails,
-            sortReactions: sortReactions,
-            unsafeHTML: unsafeHTML,
+            sortReactionDetails,
+            sortReactions,
+            unsafeHTML,
         },
-        messageGroupStyles: messageGroupStyles,
-        read: read,
-        renderMessages: renderMessages,
-        returnAllReadData: returnAllReadData,
-        threadList: threadList,
+        messageGroupStyles,
+        read,
+        renderMessages,
+        returnAllReadData,
+        threadList,
     });
-    var messageListClass = (customClasses === null || customClasses === void 0 ? void 0 : customClasses.messageList) || 'str-chat__list';
-    var threadListClass = threadList
-        ? (customClasses === null || customClasses === void 0 ? void 0 : customClasses.threadList) || 'str-chat__list--thread str-chat__thread-list'
-        : '';
-    var loadMore = React.useCallback(function () {
+    const messageListClass = customClasses?.messageList || 'str-chat__list';
+    const loadMore = React.useCallback(() => {
         if (loadMoreCallback) {
             loadMoreCallback(messageLimit);
         }
     }, [loadMoreCallback, messageLimit]);
-    var loadMoreNewer = React.useCallback(function () {
+    const loadMoreNewer = React.useCallback(() => {
         if (loadMoreNewerCallback) {
             loadMoreNewerCallback(messageLimit);
         }
     }, [loadMoreNewerCallback, messageLimit]);
-    var scrollToBottomFromNotification = React.useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    if (!hasMoreNewer) return [3 /*break*/, 2];
-                    return [4 /*yield*/, jumpToLatestMessage()];
-                case 1:
-                    _a.sent();
-                    return [3 /*break*/, 3];
-                case 2:
-                    scrollToBottom();
-                    _a.label = 3;
-                case 3: return [2 /*return*/];
-            }
-        });
-    }); }, [scrollToBottom, hasMoreNewer]);
-    React.useLayoutEffect(function () {
+    const scrollToBottomFromNotification = React.useCallback(async () => {
+        if (hasMoreNewer) {
+            await jumpToLatestMessage();
+        }
+        else {
+            scrollToBottom();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [scrollToBottom, hasMoreNewer]);
+    React.useLayoutEffect(() => {
         if (highlightedMessageId) {
-            var element = ulElement === null || ulElement === void 0 ? void 0 : ulElement.querySelector("[data-message-id='".concat(highlightedMessageId, "']"));
-            element === null || element === void 0 ? void 0 : element.scrollIntoView({ block: 'center' });
+            const element = ulElement?.querySelector(`[data-message-id='${highlightedMessageId}']`);
+            element?.scrollIntoView({ block: 'center' });
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [highlightedMessageId]);
-    var showEmptyStateIndicator = elements.length === 0 && !threadList;
-    return (React.createElement(MessageListContextProvider, { value: { listElement: listElement, scrollToBottom: scrollToBottom } },
+    const showEmptyStateIndicator = elements.length === 0 && !threadList;
+    return (React.createElement(MessageListContextProvider, { value: { listElement, scrollToBottom } },
         React.createElement(MessageListMainPanel, null,
-            !threadList && showUnreadMessagesNotification && (React.createElement(UnreadMessagesNotification, { unreadCount: channelUnreadUiState === null || channelUnreadUiState === void 0 ? void 0 : channelUnreadUiState.unread_messages })),
-            React.createElement("div", { className: "".concat(messageListClass, " ").concat(threadListClass), onScroll: onScroll, ref: setListElement, tabIndex: 0 }, showEmptyStateIndicator ? (React.createElement(EmptyStateIndicator, { key: 'empty-state-indicator', listType: threadList ? 'thread' : 'message' })) : (React.createElement(InfiniteScroll, __assign({ className: 'str-chat__reverse-infinite-scroll  str-chat__message-list-scroll', "data-testid": 'reverse-infinite-scroll', hasNextPage: props.hasMoreNewer, hasPreviousPage: props.hasMore, head: props.head, isLoading: props.loadingMore, loader: React.createElement("div", { className: 'str-chat__list__loading', key: 'loading-indicator' }, props.loadingMore && React.createElement(LoadingIndicator, { size: 20 })), loadNextPage: loadMoreNewer, loadPreviousPage: loadMore, threshold: loadMoreScrollThreshold }, restInternalInfiniteScrollProps),
+            !threadList && showUnreadMessagesNotification && (React.createElement(UnreadMessagesNotification, { unreadCount: channelUnreadUiState?.unread_messages })),
+            React.createElement("div", { className: clsx(messageListClass, {
+                    [customClasses?.threadList || 'str-chat__thread-list']: threadList,
+                }), onScroll: onScroll, ref: setListElement, tabIndex: 0 }, showEmptyStateIndicator ? (React.createElement(EmptyStateIndicator, { key: 'empty-state-indicator', listType: threadList ? 'thread' : 'message' })) : (React.createElement(InfiniteScroll, { className: 'str-chat__message-list-scroll', "data-testid": 'reverse-infinite-scroll', hasNextPage: props.hasMoreNewer, hasPreviousPage: props.hasMore, head: props.head, isLoading: props.loadingMore, loader: React.createElement("div", { className: 'str-chat__list__loading', key: 'loading-indicator' }, props.loadingMore && React.createElement(LoadingIndicator, { size: 20 })), loadNextPage: loadMoreNewer, loadPreviousPage: loadMore, threshold: loadMoreScrollThreshold, ...restInternalInfiniteScrollProps },
                 React.createElement("ul", { className: 'str-chat__ul', ref: setUlElement }, elements),
                 React.createElement(TypingIndicator, { threadList: threadList }),
                 React.createElement("div", { key: 'bottom' }))))),
-        React.createElement(MessageListNotifications, { hasNewMessages: hasNewMessages, isMessageListScrolledToBottom: isMessageListScrolledToBottom, isNotAtLatestMessageSet: hasMoreNewer, MessageNotification: MessageNotification, notifications: notifications, scrollToBottom: scrollToBottomFromNotification, threadList: threadList, unreadCount: threadList ? undefined : channelUnreadUiState === null || channelUnreadUiState === void 0 ? void 0 : channelUnreadUiState.unread_messages })));
+        React.createElement(MessageListNotifications, { hasNewMessages: hasNewMessages, isMessageListScrolledToBottom: isMessageListScrolledToBottom, isNotAtLatestMessageSet: hasMoreNewer, MessageNotification: MessageNotification, notifications: notifications, scrollToBottom: scrollToBottomFromNotification, threadList: threadList, unreadCount: threadList ? undefined : channelUnreadUiState?.unread_messages })));
 };
 /**
  * The MessageList component renders a list of Messages.
@@ -152,11 +142,11 @@ var MessageListWithContext = function (props) {
  * - [ComponentContext](https://getstream.io/chat/docs/sdk/react/contexts/component_context/)
  * - [TypingContext](https://getstream.io/chat/docs/sdk/react/contexts/typing_context/)
  */
-export var MessageList = function (props) {
-    var _a = useChannelActionContext('MessageList'), jumpToLatestMessage = _a.jumpToLatestMessage, loadMore = _a.loadMore, loadMoreNewer = _a.loadMoreNewer;
-    var _b = useChannelStateContext('MessageList'), membersPropToNotPass = _b.members, // eslint-disable-line @typescript-eslint/no-unused-vars
-    mutesPropToNotPass = _b.mutes, // eslint-disable-line @typescript-eslint/no-unused-vars
-    watchersPropToNotPass = _b.watchers, // eslint-disable-line @typescript-eslint/no-unused-vars
-    restChannelStateContext = __rest(_b, ["members", "mutes", "watchers"]);
-    return (React.createElement(MessageListWithContext, __assign({ jumpToLatestMessage: jumpToLatestMessage, loadMore: loadMore, loadMoreNewer: loadMoreNewer }, restChannelStateContext, props)));
+export const MessageList = (props) => {
+    const { jumpToLatestMessage, loadMore, loadMoreNewer, } = useChannelActionContext('MessageList');
+    const { members: membersPropToNotPass, // eslint-disable-line @typescript-eslint/no-unused-vars
+    mutes: mutesPropToNotPass, // eslint-disable-line @typescript-eslint/no-unused-vars
+    watchers: watchersPropToNotPass, // eslint-disable-line @typescript-eslint/no-unused-vars
+    ...restChannelStateContext } = useChannelStateContext('MessageList');
+    return (React.createElement(MessageListWithContext, { jumpToLatestMessage: jumpToLatestMessage, loadMore: loadMore, loadMoreNewer: loadMoreNewer, ...restChannelStateContext, ...props }));
 };

package/dist/components/MessageList/MessageListMainPanel.d.ts

@@ -2,4 +2,3 @@ import React from 'react';
 import type { PropsWithChildrenOnly } from '../../types/types';
 export declare const MESSAGE_LIST_MAIN_PANEL_CLASS: "str-chat__main-panel-inner";
 export declare const MessageListMainPanel: ({ children }: PropsWithChildrenOnly) => React.JSX.Element;
-//# sourceMappingURL=MessageListMainPanel.d.ts.map

package/dist/components/MessageList/MessageListMainPanel.js

@@ -1,10 +1,3 @@
 import React from 'react';
-import { useChatContext } from '../../context/ChatContext';
-export var MESSAGE_LIST_MAIN_PANEL_CLASS = 'str-chat__main-panel-inner';
-export var MessageListMainPanel = function (_a) {
-    var children = _a.children;
-    var themeVersion = useChatContext('MessageListMainPanel').themeVersion;
-    if (themeVersion === '2')
-        return React.createElement("div", { className: MESSAGE_LIST_MAIN_PANEL_CLASS }, children);
-    return React.createElement(React.Fragment, null, children);
-};
+export const MESSAGE_LIST_MAIN_PANEL_CLASS = 'str-chat__main-panel-inner';
+export const MessageListMainPanel = ({ children }) => (React.createElement("div", { className: MESSAGE_LIST_MAIN_PANEL_CLASS }, children));

package/dist/components/MessageList/MessageListNotifications.d.ts

@@ -12,4 +12,3 @@ export type MessageListNotificationsProps = {
     unreadCount?: number;
 };
 export declare const MessageListNotifications: (props: MessageListNotificationsProps) => React.JSX.Element;
-//# sourceMappingURL=MessageListNotifications.d.ts.map

package/dist/components/MessageList/MessageListNotifications.js

@@ -2,11 +2,11 @@ import React from 'react';
 import { ConnectionStatus } from './ConnectionStatus';
 import { CustomNotification } from './CustomNotification';
 import { useTranslationContext } from '../../context/TranslationContext';
-export var MessageListNotifications = function (props) {
-    var hasNewMessages = props.hasNewMessages, isMessageListScrolledToBottom = props.isMessageListScrolledToBottom, isNotAtLatestMessageSet = props.isNotAtLatestMessageSet, MessageNotification = props.MessageNotification, notifications = props.notifications, scrollToBottom = props.scrollToBottom, threadList = props.threadList, unreadCount = props.unreadCount;
-    var t = useTranslationContext('MessageListNotifications').t;
+export const MessageListNotifications = (props) => {
+    const { hasNewMessages, isMessageListScrolledToBottom, isNotAtLatestMessageSet, MessageNotification, notifications, scrollToBottom, threadList, unreadCount, } = props;
+    const { t } = useTranslationContext('MessageListNotifications');
     return (React.createElement("div", { className: 'str-chat__list-notifications' },
-        notifications.map(function (notification) { return (React.createElement(CustomNotification, { active: true, key: notification.id, type: notification.type }, notification.text)); }),
+        notifications.map((notification) => (React.createElement(CustomNotification, { active: true, key: notification.id, type: notification.type }, notification.text))),
         React.createElement(ConnectionStatus, null),
         React.createElement(MessageNotification, { isMessageListScrolledToBottom: isMessageListScrolledToBottom, onClick: scrollToBottom, showNotification: hasNewMessages || isNotAtLatestMessageSet, threadList: threadList, unreadCount: unreadCount }, isNotAtLatestMessageSet ? t('Latest Messages') : t('New Messages!'))));
 };

package/dist/components/MessageList/MessageNotification.d.ts

@@ -12,4 +12,3 @@ export type MessageNotificationProps = PropsWithChildren<{
     unreadCount?: number;
 }>;
 export declare const MessageNotification: (props: MessageNotificationProps) => React.JSX.Element | null;
-//# sourceMappingURL=MessageNotification.d.ts.map

package/dist/components/MessageList/MessageNotification.js

@@ -1,8 +1,8 @@
 import React from 'react';
-var UnMemoizedMessageNotification = function (props) {
-    var children = props.children, onClick = props.onClick, _a = props.showNotification, showNotification = _a === void 0 ? true : _a;
+const UnMemoizedMessageNotification = (props) => {
+    const { children, onClick, showNotification = true } = props;
     if (!showNotification)
         return null;
-    return (React.createElement("button", { "aria-live": 'polite', className: "str-chat__message-notification", "data-testid": 'message-notification', onClick: onClick }, children));
+    return (React.createElement("button", { "aria-live": 'polite', className: `str-chat__message-notification`, "data-testid": 'message-notification', onClick: onClick }, children));
 };
-export var MessageNotification = React.memo(UnMemoizedMessageNotification);
+export const MessageNotification = React.memo(UnMemoizedMessageNotification);

package/dist/components/MessageList/ScrollToBottomButton.d.ts

@@ -1,4 +1,3 @@
 import React from 'react';
 import type { MessageNotificationProps } from './MessageNotification';
 export declare const ScrollToBottomButton: (props: Pick<MessageNotificationProps, 'isMessageListScrolledToBottom' | 'onClick' | 'threadList'>) => React.JSX.Element | null;
-//# sourceMappingURL=ScrollToBottomButton.d.ts.map

package/dist/components/MessageList/ScrollToBottomButton.js

@@ -2,21 +2,20 @@ import React, { useEffect, useState } from 'react';
 import clsx from 'clsx';
 import { ArrowDown } from './icons';
 import { useChannelStateContext, useChatContext } from '../../context';
-var UnMemoizedScrollToBottomButton = function (props) {
-    var isMessageListScrolledToBottom = props.isMessageListScrolledToBottom, onClick = props.onClick, threadList = props.threadList;
-    var _a = useChatContext(), activeChannel = _a.channel, client = _a.client;
-    var thread = useChannelStateContext().thread;
-    var _b = useState((activeChannel === null || activeChannel === void 0 ? void 0 : activeChannel.countUnread()) || 0), countUnread = _b[0], setCountUnread = _b[1];
-    var _c = useState((thread === null || thread === void 0 ? void 0 : thread.reply_count) || 0), replyCount = _c[0], setReplyCount = _c[1];
-    var observedEvent = threadList ? 'message.updated' : 'message.new';
-    useEffect(function () {
-        var handleEvent = function (event) {
-            var _a, _b, _c, _d, _e;
-            var newMessageInAnotherChannel = event.cid !== (activeChannel === null || activeChannel === void 0 ? void 0 : activeChannel.cid);
-            var newMessageIsMine = ((_a = event.user) === null || _a === void 0 ? void 0 : _a.id) === ((_b = client.user) === null || _b === void 0 ? void 0 : _b.id);
-            var isThreadOpen = !!thread;
-            var newMessageIsReply = !!((_c = event.message) === null || _c === void 0 ? void 0 : _c.parent_id);
-            var dontIncreaseMainListCounterOnNewReply = isThreadOpen && !threadList && newMessageIsReply;
+const UnMemoizedScrollToBottomButton = (props) => {
+    const { isMessageListScrolledToBottom, onClick, threadList } = props;
+    const { channel: activeChannel, client } = useChatContext();
+    const { thread } = useChannelStateContext();
+    const [countUnread, setCountUnread] = useState(activeChannel?.countUnread() || 0);
+    const [replyCount, setReplyCount] = useState(thread?.reply_count || 0);
+    const observedEvent = threadList ? 'message.updated' : 'message.new';
+    useEffect(() => {
+        const handleEvent = (event) => {
+            const newMessageInAnotherChannel = event.cid !== activeChannel?.cid;
+            const newMessageIsMine = event.user?.id === client.user?.id;
+            const isThreadOpen = !!thread;
+            const newMessageIsReply = !!event.message?.parent_id;
+            const dontIncreaseMainListCounterOnNewReply = isThreadOpen && !threadList && newMessageIsReply;
             if (isMessageListScrolledToBottom ||
                 newMessageInAnotherChannel ||
                 newMessageIsMine ||
@@ -25,30 +24,33 @@ var UnMemoizedScrollToBottomButton = function (props) {
             }
             if (event.type === 'message.new') {
                 // cannot rely on channel.countUnread because active channel is automatically marked read
-                setCountUnread(function (prev) { return prev + 1; });
+                setCountUnread((prev) => prev + 1);
             }
-            else if (((_d = event.message) === null || _d === void 0 ? void 0 : _d.id) === (thread === null || thread === void 0 ? void 0 : thread.id)) {
-                var newReplyCount_1 = ((_e = event.message) === null || _e === void 0 ? void 0 : _e.reply_count) || 0;
-                setCountUnread(function () { return newReplyCount_1 - replyCount; });
+            else if (event.message?.id === thread?.id) {
+                const newReplyCount = event.message?.reply_count || 0;
+                setCountUnread(() => newReplyCount - replyCount);
             }
         };
         client.on(observedEvent, handleEvent);
-        return function () {
+        return () => {
             client.off(observedEvent, handleEvent);
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [activeChannel, isMessageListScrolledToBottom, observedEvent, replyCount, thread]);
-    useEffect(function () {
+    useEffect(() => {
         if (isMessageListScrolledToBottom) {
             setCountUnread(0);
-            setReplyCount((thread === null || thread === void 0 ? void 0 : thread.reply_count) || 0);
+            setReplyCount(thread?.reply_count || 0);
         }
     }, [isMessageListScrolledToBottom, thread]);
     if (isMessageListScrolledToBottom)
         return null;
     return (React.createElement("div", { className: 'str-chat__jump-to-latest-message' },
-        React.createElement("button", { "aria-live": 'polite', className: "\n        str-chat__message-notification-right\n        str-chat__message-notification-scroll-to-latest\n        str-chat__circle-fab\n      ", "data-testid": 'message-notification', onClick: onClick },
+        React.createElement("button", { "aria-live": 'polite', className: `
+        str-chat__message-notification-scroll-to-latest
+        str-chat__circle-fab
+      `, "data-testid": 'message-notification', onClick: onClick },
             React.createElement(ArrowDown, null),
-            countUnread > 0 && (React.createElement("div", { className: clsx('str-chat__message-notification', 'str-chat__message-notification-scroll-to-latest-unread-count', 'str-chat__jump-to-latest-unread-count'), "data-testid": 'unread-message-notification-counter' }, countUnread)))));
+            countUnread > 0 && (React.createElement("div", { className: clsx('str-chat__message-notification', 'str-chat__jump-to-latest-unread-count'), "data-testid": 'unread-message-notification-counter' }, countUnread)))));
 };
-export var ScrollToBottomButton = React.memo(UnMemoizedScrollToBottomButton);
+export const ScrollToBottomButton = React.memo(UnMemoizedScrollToBottomButton);

package/dist/components/MessageList/UnreadMessagesNotification.d.ts

@@ -14,4 +14,3 @@ export type UnreadMessagesNotificationProps = {
     unreadCount?: number;
 };
 export declare const UnreadMessagesNotification: ({ queryMessageLimit, showCount, unreadCount, }: UnreadMessagesNotificationProps) => React.JSX.Element;
-//# sourceMappingURL=UnreadMessagesNotification.d.ts.map

package/dist/components/MessageList/UnreadMessagesNotification.js

@@ -1,14 +1,13 @@
 import React from 'react';
 import { CloseIcon } from './icons';
 import { useChannelActionContext, useTranslationContext } from '../../context';
-export var UnreadMessagesNotification = function (_a) {
-    var queryMessageLimit = _a.queryMessageLimit, showCount = _a.showCount, unreadCount = _a.unreadCount;
-    var _b = useChannelActionContext('UnreadMessagesNotification'), jumpToFirstUnreadMessage = _b.jumpToFirstUnreadMessage, markRead = _b.markRead;
-    var t = useTranslationContext('UnreadMessagesNotification').t;
+export const UnreadMessagesNotification = ({ queryMessageLimit, showCount, unreadCount, }) => {
+    const { jumpToFirstUnreadMessage, markRead } = useChannelActionContext('UnreadMessagesNotification');
+    const { t } = useTranslationContext('UnreadMessagesNotification');
     return (React.createElement("div", { className: 'str-chat__unread-messages-notification', "data-testid": 'unread-messages-notification' },
-        React.createElement("button", { onClick: function () { return jumpToFirstUnreadMessage(queryMessageLimit); } }, unreadCount && showCount
-            ? t('{{count}} unread', { count: unreadCount !== null && unreadCount !== void 0 ? unreadCount : 0 })
+        React.createElement("button", { onClick: () => jumpToFirstUnreadMessage(queryMessageLimit) }, unreadCount && showCount
+            ? t('{{count}} unread', { count: unreadCount ?? 0 })
             : t('Unread messages')),
-        React.createElement("button", { onClick: function () { return markRead(); } },
+        React.createElement("button", { onClick: () => markRead() },
             React.createElement(CloseIcon, null))));
 };

package/dist/components/MessageList/UnreadMessagesSeparator.d.ts

@@ -11,4 +11,3 @@ export type UnreadMessagesSeparatorProps = {
     unreadCount?: number;
 };
 export declare const UnreadMessagesSeparator: ({ showCount, unreadCount, }: UnreadMessagesSeparatorProps) => React.JSX.Element;
-//# sourceMappingURL=UnreadMessagesSeparator.d.ts.map

package/dist/components/MessageList/UnreadMessagesSeparator.js

@@ -1,9 +1,8 @@
 import React from 'react';
 import { useTranslationContext } from '../../context';
-export var UNREAD_MESSAGE_SEPARATOR_CLASS = 'str-chat__unread-messages-separator';
-export var UnreadMessagesSeparator = function (_a) {
-    var showCount = _a.showCount, unreadCount = _a.unreadCount;
-    var t = useTranslationContext('UnreadMessagesSeparator').t;
+export const UNREAD_MESSAGE_SEPARATOR_CLASS = 'str-chat__unread-messages-separator';
+export const UnreadMessagesSeparator = ({ showCount, unreadCount, }) => {
+    const { t } = useTranslationContext('UnreadMessagesSeparator');
     return (React.createElement("div", { className: UNREAD_MESSAGE_SEPARATOR_CLASS, "data-testid": 'unread-messages-separator' }, unreadCount && showCount
         ? t('unreadMessagesSeparatorText', { count: unreadCount })
         : t('Unread messages')));

package/dist/components/MessageList/VirtualizedMessageList.d.ts

@@ -8,7 +8,7 @@ import { ChatContextValue } from '../../context/ChatContext';
 import { ComponentContextValue } from '../../context/ComponentContext';
 import type { UserResponse } from 'stream-chat';
 import type { DefaultStreamChatGenerics, UnknownType } from '../../types/types';
-type VirtualizedMessageListPropsForContext = 'additionalMessageInputProps' | 'closeReactionSelectorOnClick' | 'customMessageActions' | 'customMessageRenderer' | 'head' | 'loadingMore' | 'Message' | 'messageActions' | 'shouldGroupByUser' | 'reactionDetailsSort' | 'sortReactions' | 'sortReactionDetails' | 'threadList';
+type VirtualizedMessageListPropsForContext = 'additionalMessageInputProps' | 'closeReactionSelectorOnClick' | 'customMessageActions' | 'customMessageRenderer' | 'formatDate' | 'head' | 'loadingMore' | 'Message' | 'messageActions' | 'shouldGroupByUser' | 'reactionDetailsSort' | 'sortReactions' | 'sortReactionDetails' | 'threadList';
 /**
  * Context object provided to some Virtuoso props that are functions (components rendered by Virtuoso and other functions)
  */
@@ -36,7 +36,7 @@ export type VirtuosoContext<StreamChatGenerics extends DefaultStreamChatGenerics
     /** The number of unread messages in the current channel. */
     unreadMessageCount?: number;
 };
-type PropsDrilledToMessage = 'additionalMessageInputProps' | 'customMessageActions' | 'messageActions' | 'reactionDetailsSort' | 'sortReactions' | 'sortReactionDetails';
+type PropsDrilledToMessage = 'additionalMessageInputProps' | 'customMessageActions' | 'formatDate' | 'messageActions' | 'reactionDetailsSort' | 'sortReactions' | 'sortReactionDetails';
 export type VirtualizedMessageListProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = Partial<Pick<MessageProps<StreamChatGenerics>, PropsDrilledToMessage>> & {
     /** Additional props to be passed the underlying [`react-virtuoso` virtualized list dependency](https://virtuoso.dev/virtuoso-api-reference/) */
     additionalVirtuosoProps?: VirtuosoProps<UnknownType, VirtuosoContext<StreamChatGenerics>>;
@@ -134,4 +134,3 @@ export type VirtualizedMessageListProps<StreamChatGenerics extends DefaultStream
  */
 export declare function VirtualizedMessageList<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: VirtualizedMessageListProps<StreamChatGenerics>): React.JSX.Element;
 export {};
-//# sourceMappingURL=VirtualizedMessageList.d.ts.map