stream-chat-react 12.0.0-rc.9 → 12.0.0

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

@@ -2,7 +2,7 @@ import type { TFunction } from 'i18next';
 import type { MessageResponse, Mute, StreamChat, UserResponse } from 'stream-chat';
 import type { PinPermissions } from './hooks';
 import type { MessageProps } from './types';
-import type { MessageContextValue, StreamMessage } from '../../context';
+import type { ComponentContextValue, CustomMessageActions, MessageContextValue, StreamMessage } from '../../context';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 /**
  * Following function validates a function which returns notification message.
@@ -39,7 +39,16 @@ export type Capabilities = {
 };
 export declare const getMessageActions: (actions: MessageActionsArray | boolean, { canDelete, canEdit, canFlag, canMarkUnread, canMute, canPin, canQuote, canReact, canReply, }: Capabilities) => MessageActionsArray<string>;
 export declare const ACTIONS_NOT_WORKING_IN_THREAD: string[];
+/**
+ * @deprecated use `shouldRenderMessageActions` instead
+ */
 export declare const showMessageActionsBox: (actions: MessageActionsArray<string>, inThread?: boolean | undefined) => boolean;
+export declare const shouldRenderMessageActions: <SCG extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ customMessageActions, CustomMessageActionsList, inThread, messageActions, }: {
+    messageActions: MessageActionsArray;
+    customMessageActions?: CustomMessageActions<SCG>;
+    CustomMessageActionsList?: ComponentContextValue<SCG>['CustomMessageActionsList'];
+    inThread?: boolean;
+}) => boolean;
 export declare const areMessagePropsEqual: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(prevProps: MessageProps<StreamChatGenerics> & {
     mutes?: Mute<StreamChatGenerics>[];
     showDetailedReactions?: boolean;

package/dist/components/Message/utils.js

@@ -140,22 +140,31 @@ export const getMessageActions = (actions, { canDelete, canEdit, canFlag, canMar
 };
 export const ACTIONS_NOT_WORKING_IN_THREAD = [
     MESSAGE_ACTIONS.pin,
-    MESSAGE_ACTIONS.react,
     MESSAGE_ACTIONS.reply,
     MESSAGE_ACTIONS.markUnread,
 ];
-export const showMessageActionsBox = (actions, inThread) => {
-    if (actions.length === 0) {
+/**
+ * @deprecated use `shouldRenderMessageActions` instead
+ */
+export const showMessageActionsBox = (actions, inThread) => shouldRenderMessageActions({ inThread, messageActions: actions });
+export const shouldRenderMessageActions = ({ customMessageActions, CustomMessageActionsList, inThread, messageActions, }) => {
+    if (typeof CustomMessageActionsList !== 'undefined' ||
+        typeof customMessageActions !== 'undefined')
+        return true;
+    if (!messageActions.length)
         return false;
-    }
     if (inThread &&
-        actions.filter((action) => !ACTIONS_NOT_WORKING_IN_THREAD.includes(action)).length === 0) {
+        messageActions.filter((action) => !ACTIONS_NOT_WORKING_IN_THREAD.includes(action)).length === 0) {
         return false;
     }
-    if (actions.length === 1 && (actions.includes('react') || actions.includes('reply'))) {
+    if (messageActions.length === 1 &&
+        (messageActions.includes(MESSAGE_ACTIONS.react) ||
+            messageActions.includes(MESSAGE_ACTIONS.reply))) {
         return false;
     }
-    if (actions.length === 2 && actions.includes('react') && actions.includes('reply')) {
+    if (messageActions.length === 2 &&
+        messageActions.includes(MESSAGE_ACTIONS.react) &&
+        messageActions.includes(MESSAGE_ACTIONS.reply)) {
         return false;
     }
     return true;
@@ -185,6 +194,9 @@ export const areMessagePropsEqual = (prevProps, nextProps) => {
     if (nextProps.showDetailedReactions !== prevProps.showDetailedReactions) {
         return false;
     }
+    if (nextProps.closeReactionSelectorOnClick !== prevProps.closeReactionSelectorOnClick) {
+        return false;
+    }
     const messagesAreEqual = areMessagesEqual(prevMessage, nextMessage);
     if (!messagesAreEqual)
         return false;

package/dist/components/MessageActions/MessageActions.d.ts

@@ -6,13 +6,12 @@ export type MessageActionsProps<StreamChatGenerics extends DefaultStreamChatGene
     ActionsIcon?: React.ComponentType<IconProps>;
     customWrapperClass?: string;
     inline?: boolean;
-    messageWrapperRef?: React.RefObject<HTMLDivElement>;
     mine?: () => boolean;
 };
 export declare const MessageActions: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: MessageActionsProps<StreamChatGenerics>) => React.JSX.Element | null;
 export type MessageActionsWrapperProps = {
-    setActionsBoxOpen: React.Dispatch<React.SetStateAction<boolean>>;
     customWrapperClass?: string;
     inline?: boolean;
+    toggleOpen?: () => void;
 };
 export {};

package/dist/components/MessageActions/MessageActions.js

@@ -1,15 +1,17 @@
-import React, { useCallback, useEffect, useRef, useState, } from 'react';
+import clsx from 'clsx';
+import React, { useCallback, useRef } from 'react';
 import { MessageActionsBox } from './MessageActionsBox';
+import { DialogAnchor, useDialog, useDialogIsOpen } from '../Dialog';
 import { ActionsIcon as DefaultActionsIcon } from '../Message/icons';
-import { isUserMuted } from '../Message/utils';
+import { isUserMuted, shouldRenderMessageActions } from '../Message/utils';
 import { useChatContext } from '../../context/ChatContext';
 import { useMessageContext } from '../../context/MessageContext';
-import { useMessageActionsBoxPopper } from './hooks';
-import { useTranslationContext } from '../../context';
+import { useComponentContext, useTranslationContext } from '../../context';
 export const MessageActions = (props) => {
-    const { ActionsIcon = DefaultActionsIcon, customWrapperClass = '', getMessageActions: propGetMessageActions, handleDelete: propHandleDelete, handleFlag: propHandleFlag, handleMarkUnread: propHandleMarkUnread, handleMute: propHandleMute, handlePin: propHandlePin, inline, message: propMessage, messageWrapperRef, mine, } = props;
+    const { ActionsIcon = DefaultActionsIcon, customWrapperClass = '', getMessageActions: propGetMessageActions, handleDelete: propHandleDelete, handleFlag: propHandleFlag, handleMarkUnread: propHandleMarkUnread, handleMute: propHandleMute, handlePin: propHandlePin, inline, message: propMessage, mine, } = props;
     const { mutes } = useChatContext('MessageActions');
-    const { customMessageActions, getMessageActions: contextGetMessageActions, handleDelete: contextHandleDelete, handleFlag: contextHandleFlag, handleMarkUnread: contextHandleMarkUnread, handleMute: contextHandleMute, handlePin: contextHandlePin, isMyMessage, message: contextMessage, setEditingState, } = useMessageContext('MessageActions');
+    const { customMessageActions, getMessageActions: contextGetMessageActions, handleDelete: contextHandleDelete, handleFlag: contextHandleFlag, handleMarkUnread: contextHandleMarkUnread, handleMute: contextHandleMute, handlePin: contextHandlePin, isMyMessage, message: contextMessage, setEditingState, threadList, } = useMessageContext('MessageActions');
+    const { CustomMessageActionsList } = useComponentContext('MessageActions');
     const { t } = useTranslationContext('MessageActions');
     const getMessageActions = propGetMessageActions || contextGetMessageActions;
     const handleDelete = propHandleDelete || contextHandleDelete;
@@ -19,64 +21,33 @@ export const MessageActions = (props) => {
     const handlePin = propHandlePin || contextHandlePin;
     const message = propMessage || contextMessage;
     const isMine = mine ? mine() : isMyMessage();
-    const [actionsBoxOpen, setActionsBoxOpen] = useState(false);
     const isMuted = useCallback(() => isUserMuted(message, mutes), [message, mutes]);
-    const hideOptions = useCallback((event) => {
-        if (event instanceof KeyboardEvent && event.key !== 'Escape') {
-            return;
-        }
-        setActionsBoxOpen(false);
-    }, []);
+    const dialogId = `message-actions--${message.id}`;
+    const dialog = useDialog({ id: dialogId });
+    const dialogIsOpen = useDialogIsOpen(dialogId);
     const messageActions = getMessageActions();
-    const messageDeletedAt = !!message?.deleted_at;
-    useEffect(() => {
-        if (messageWrapperRef?.current) {
-            messageWrapperRef.current.addEventListener('mouseleave', hideOptions);
-        }
-    }, [hideOptions, messageWrapperRef]);
-    useEffect(() => {
-        if (messageDeletedAt) {
-            document.removeEventListener('click', hideOptions);
-        }
-    }, [hideOptions, messageDeletedAt]);
-    useEffect(() => {
-        if (!actionsBoxOpen)
-            return;
-        document.addEventListener('click', hideOptions);
-        document.addEventListener('keyup', hideOptions);
-        return () => {
-            document.removeEventListener('click', hideOptions);
-            document.removeEventListener('keyup', hideOptions);
-        };
-    }, [actionsBoxOpen, hideOptions]);
-    const actionsBoxButtonRef = useRef(null);
-    const { attributes, popperElementRef, styles } = useMessageActionsBoxPopper({
-        open: actionsBoxOpen,
-        placement: isMine ? 'top-end' : 'top-start',
-        referenceElement: actionsBoxButtonRef.current,
+    const renderMessageActions = shouldRenderMessageActions({
+        customMessageActions,
+        CustomMessageActionsList,
+        inThread: threadList,
+        messageActions,
     });
-    if (!messageActions.length && !customMessageActions)
+    const actionsBoxButtonRef = useRef(null);
+    if (!renderMessageActions)
         return null;
-    return (React.createElement(MessageActionsWrapper, { customWrapperClass: customWrapperClass, inline: inline, setActionsBoxOpen: setActionsBoxOpen },
-        React.createElement(MessageActionsBox, { ...attributes.popper, getMessageActions: getMessageActions, handleDelete: handleDelete, handleEdit: setEditingState, handleFlag: handleFlag, handleMarkUnread: handleMarkUnread, handleMute: handleMute, handlePin: handlePin, isUserMuted: isMuted, mine: isMine, open: actionsBoxOpen, ref: popperElementRef, style: styles.popper }),
-        React.createElement("button", { "aria-expanded": actionsBoxOpen, "aria-haspopup": 'true', "aria-label": t('aria/Open Message Actions Menu'), className: 'str-chat__message-actions-box-button', ref: actionsBoxButtonRef },
+    return (React.createElement(MessageActionsWrapper, { customWrapperClass: customWrapperClass, inline: inline, toggleOpen: dialog?.toggle },
+        React.createElement(DialogAnchor, { id: dialogId, placement: isMine ? 'top-end' : 'top-start', referenceElement: actionsBoxButtonRef.current, trapFocus: true },
+            React.createElement(MessageActionsBox, { getMessageActions: getMessageActions, handleDelete: handleDelete, handleEdit: setEditingState, handleFlag: handleFlag, handleMarkUnread: handleMarkUnread, handleMute: handleMute, handlePin: handlePin, isUserMuted: isMuted, mine: isMine, open: dialogIsOpen })),
+        React.createElement("button", { "aria-expanded": dialogIsOpen, "aria-haspopup": 'true', "aria-label": t('aria/Open Message Actions Menu'), className: 'str-chat__message-actions-box-button', "data-testid": 'message-actions-toggle-button', ref: actionsBoxButtonRef },
             React.createElement(ActionsIcon, { className: 'str-chat__message-action-icon' }))));
 };
 const MessageActionsWrapper = (props) => {
-    const { children, customWrapperClass, inline, setActionsBoxOpen } = props;
-    const defaultWrapperClass = `
-  str-chat__message-simple__actions__action
-  str-chat__message-simple__actions__action--options
-  str-chat__message-actions-container`;
-    const wrapperClass = customWrapperClass || defaultWrapperClass;
-    const onClickOptionsAction = (event) => {
-        event.stopPropagation();
-        setActionsBoxOpen((prev) => !prev);
-    };
+    const { children, customWrapperClass, inline, toggleOpen } = props;
+    const defaultWrapperClass = clsx('str-chat__message-simple__actions__action', 'str-chat__message-simple__actions__action--options', 'str-chat__message-actions-container');
     const wrapperProps = {
-        className: wrapperClass,
+        className: customWrapperClass || defaultWrapperClass,
         'data-testid': 'message-actions',
-        onClick: onClickOptionsAction,
+        onClick: toggleOpen,
     };
     if (inline)
         return React.createElement("span", { ...wrapperProps }, children);

package/dist/components/MessageActions/MessageActionsBox.d.ts

@@ -10,5 +10,5 @@ export type MessageActionsBoxProps<StreamChatGenerics extends DefaultStreamChatG
 /**
  * A popup box that displays the available actions on a message, such as edit, delete, pin, etc.
  */
-export declare const MessageActionsBox: React.ForwardRefExoticComponent<Omit<MessageActionsBoxProps<DefaultStreamChatGenerics>, "ref"> & React.RefAttributes<HTMLDivElement | null>>;
+export declare const MessageActionsBox: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: MessageActionsBoxProps<StreamChatGenerics>) => React.JSX.Element;
 export {};

package/dist/components/MessageActions/MessageActionsBox.js

@@ -1,10 +1,10 @@
-import React from 'react';
 import clsx from 'clsx';
+import React from 'react';
 import { MESSAGE_ACTIONS } from '../Message/utils';
 import { useChannelActionContext, useComponentContext, useMessageContext, useTranslationContext, } from '../../context';
 import { CustomMessageActionsList as DefaultCustomMessageActionsList } from './CustomMessageActionsList';
-const UnMemoizedMessageActionsBox = React.forwardRef((props, ref) => {
-    const { getMessageActions, handleDelete, handleEdit, handleFlag, handleMarkUnread, handleMute, handlePin, isUserMuted, mine, open = false, ...restDivProps } = props;
+const UnMemoizedMessageActionsBox = (props) => {
+    const { className, getMessageActions, handleDelete, handleEdit, handleFlag, handleMarkUnread, handleMute, handlePin, isUserMuted, mine, open, ...restDivProps } = props;
     const { CustomMessageActionsList = DefaultCustomMessageActionsList, } = useComponentContext('MessageActionsBox');
     const { setQuotedMessage } = useChannelActionContext('MessageActionsBox');
     const { customMessageActions, message, threadList } = useMessageContext('MessageActionsBox');
@@ -20,11 +20,11 @@ const UnMemoizedMessageActionsBox = React.forwardRef((props, ref) => {
             textarea.focus();
         }
     };
-    const rootClassName = clsx('str-chat__message-actions-box', {
+    const rootClassName = clsx('str-chat__message-actions-box', className, {
         'str-chat__message-actions-box--open': open,
     });
     const buttonClassName = 'str-chat__message-actions-list-item str-chat__message-actions-list-item-button';
-    return (React.createElement("div", { ...restDivProps, className: rootClassName, "data-testid": 'message-actions-box', ref: ref },
+    return (React.createElement("div", { ...restDivProps, className: rootClassName, "data-testid": 'message-actions-box' },
         React.createElement("div", { "aria-label": t('aria/Message Options'), className: 'str-chat__message-actions-list', role: 'listbox' },
             React.createElement(CustomMessageActionsList, { customMessageActions: customMessageActions, message: message }),
             messageActions.indexOf(MESSAGE_ACTIONS.quote) > -1 && (React.createElement("button", { "aria-selected": 'false', className: buttonClassName, onClick: handleQuote, role: 'option' }, t('Reply'))),
@@ -34,7 +34,7 @@ const UnMemoizedMessageActionsBox = React.forwardRef((props, ref) => {
             messageActions.indexOf(MESSAGE_ACTIONS.mute) > -1 && (React.createElement("button", { "aria-selected": 'false', className: buttonClassName, onClick: handleMute, role: 'option' }, isUserMuted() ? t('Unmute') : t('Mute'))),
             messageActions.indexOf(MESSAGE_ACTIONS.edit) > -1 && (React.createElement("button", { "aria-selected": 'false', className: buttonClassName, onClick: handleEdit, role: 'option' }, t('Edit Message'))),
             messageActions.indexOf(MESSAGE_ACTIONS.delete) > -1 && (React.createElement("button", { "aria-selected": 'false', className: buttonClassName, onClick: handleDelete, role: 'option' }, t('Delete'))))));
-});
+};
 /**
  * A popup box that displays the available actions on a message, such as edit, delete, pin, etc.
  */

package/dist/components/MessageInput/MessageInputFlat.js

@@ -20,7 +20,7 @@ import { useMessageInputContext } from '../../context/MessageInputContext';
 import { useComponentContext } from '../../context/ComponentContext';
 export const MessageInputFlat = () => {
     const { t } = useTranslationContext('MessageInputFlat');
-    const { asyncMessagesMultiSendEnabled, attachments, cooldownRemaining, findAndEnqueueURLsToEnrich, handleSubmit, hideSendButton, isUploadEnabled, linkPreviews, maxFilesLeft, message, numberOfUploads, recordingController, setCooldownRemaining, text, uploadNewFiles, } = useMessageInputContext('MessageInputFlat');
+    const { asyncMessagesMultiSendEnabled, attachments, cooldownRemaining, findAndEnqueueURLsToEnrich, handleSubmit, hideSendButton, isUploadEnabled, linkPreviews, maxFilesLeft, message, numberOfUploads, parent, recordingController, setCooldownRemaining, text, uploadNewFiles, } = useMessageInputContext('MessageInputFlat');
     const { AudioRecorder = DefaultAudioRecorder, AttachmentPreviewList = DefaultAttachmentPreviewList, CooldownTimer = DefaultCooldownTimer, FileUploadIcon = DefaultUploadIcon, LinkPreviewList = DefaultLinkPreviewList, QuotedMessagePreview = DefaultQuotedMessagePreview, RecordingPermissionDeniedNotification = DefaultRecordingPermissionDeniedNotification, SendButton = DefaultSendButton, StartRecordingAudioButton = DefaultStartRecordingAudioButton, EmojiPicker, } = useComponentContext('MessageInputFlat');
     const { acceptedFiles = [], multipleUploads, quotedMessage, } = useChannelStateContext('MessageInputFlat');
     const { setQuotedMessage } = useChannelActionContext('MessageInputFlat');
@@ -64,7 +64,7 @@ export const MessageInputFlat = () => {
         return React.createElement(AudioRecorder, null);
     // TODO: "!message" condition is a temporary fix for shared
     // state when editing a message (fix shared state issue)
-    const displayQuotedMessage = !message && quotedMessage && !quotedMessage.parent_id;
+    const displayQuotedMessage = !message && quotedMessage && quotedMessage.parent_id === parent?.id;
     const recordingEnabled = !!(recordingController.recorder && navigator.mediaDevices); // account for requirement on iOS as per this bug report: https://bugs.webkit.org/show_bug.cgi?id=252303
     const isRecording = !!recordingController.recordingState;
     return (React.createElement(React.Fragment, null,

package/dist/components/MessageInput/QuotedMessagePreview.js

@@ -1,4 +1,5 @@
 import React, { useMemo } from 'react';
+import { Attachment as DefaultAttachment } from '../Attachment';
 import { Avatar as DefaultAvatar } from '../Avatar';
 import { CloseIcon } from './icons';
 import { useChannelActionContext } from '../../context/ChannelActionContext';
@@ -13,7 +14,7 @@ export const QuotedMessagePreviewHeader = () => {
             React.createElement(CloseIcon, null))));
 };
 export const QuotedMessagePreview = ({ quotedMessage, }) => {
-    const { Attachment, Avatar = DefaultAvatar } = useComponentContext('QuotedMessagePreview');
+    const { Attachment = DefaultAttachment, Avatar = DefaultAvatar, } = useComponentContext('QuotedMessagePreview');
     const { userLanguage } = useTranslationContext('QuotedMessagePreview');
     const quotedMessageText = quotedMessage.i18n?.[`${userLanguage}_text`] ||
         quotedMessage.text;

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

@@ -52,7 +52,6 @@ export const useUserTrigger = (params) => {
             // @ts-expect-error
             {
                 $or: [{ id: { $autocomplete: query } }, { name: { $autocomplete: query } }],
-                id: { $ne: client.userID },
                 ...(typeof mentionQueryParams.filters === 'function'
                     ? mentionQueryParams.filters(query)
                     : mentionQueryParams.filters),

package/dist/components/MessageList/MessageList.js

@@ -7,6 +7,7 @@ import { MessageListNotifications as DefaultMessageListNotifications } from './M
 import { UnreadMessagesNotification as DefaultUnreadMessagesNotification } from './UnreadMessagesNotification';
 import { useChannelActionContext, } from '../../context/ChannelActionContext';
 import { useChannelStateContext, } from '../../context/ChannelStateContext';
+import { DialogManagerProvider } from '../../context';
 import { useChatContext } from '../../context/ChatContext';
 import { useComponentContext } from '../../context/ComponentContext';
 import { MessageListContextProvider } from '../../context/MessageListContext';
@@ -126,13 +127,12 @@ const MessageListWithContext = (props) => {
     const showEmptyStateIndicator = elements.length === 0 && !threadList;
     return (React.createElement(MessageListContextProvider, { value: { listElement, scrollToBottom } },
         React.createElement(MessageListMainPanel, null,
-            !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(DialogManagerProvider, { id: 'message-list-dialog-manager' },
+                !threadList && showUnreadMessagesNotification && (React.createElement(UnreadMessagesNotification, { unreadCount: channelUnreadUiState?.unread_messages })),
+                React.createElement("div", { className: clsx(messageListClass, customClasses?.threadList), onScroll: onScroll, ref: setListElement, tabIndex: 0 }, showEmptyStateIndicator ? (React.createElement(EmptyStateIndicator, { 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?.unread_messages })));
 };
 /**

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

@@ -3,7 +3,7 @@ import { ScrollSeekConfiguration, ScrollSeekPlaceholderProps, VirtuosoHandle, Vi
 import { GroupStyle, ProcessMessagesParams } from './utils';
 import { MessageProps, MessageUIComponentProps } from '../Message';
 import { ChannelActionContextValue } from '../../context/ChannelActionContext';
-import { StreamMessage } from '../../context/ChannelStateContext';
+import { ChannelStateContextValue, StreamMessage } from '../../context/ChannelStateContext';
 import { ChatContextValue } from '../../context/ChatContext';
 import { ComponentContextValue } from '../../context/ComponentContext';
 import type { UserResponse } from 'stream-chat';
@@ -40,6 +40,7 @@ type PropsDrilledToMessage = 'additionalMessageInputProps' | 'customMessageActio
 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>>;
+    channelUnreadUiState?: ChannelStateContextValue['channelUnreadUiState'];
     /** If true, picking a reaction from the `ReactionSelector` component will close the selector */
     closeReactionSelectorOnClick?: boolean;
     /** Custom render function, if passed, certain UI props are ignored */

package/dist/components/MessageList/VirtualizedMessageList.js

@@ -11,6 +11,10 @@ import { getGroupStyles, getLastReceived, processMessages, } from './utils';
 import { MessageSimple } from '../Message';
 import { UnreadMessagesNotification as DefaultUnreadMessagesNotification } from './UnreadMessagesNotification';
 import { calculateFirstItemIndex, calculateItemIndex, EmptyPlaceholder, Header, Item, makeItemsRenderedHandler, messageRenderer, } from './VirtualizedMessageListComponents';
+import { UnreadMessagesSeparator as DefaultUnreadMessagesSeparator } from '../MessageList';
+import { DateSeparator as DefaultDateSeparator } from '../DateSeparator';
+import { EventComponent as DefaultMessageSystem } from '../EventComponent';
+import { DialogManagerProvider } from '../../context';
 import { useChannelActionContext, } from '../../context/ChannelActionContext';
 import { useChannelStateContext, } from '../../context/ChannelStateContext';
 import { useChatContext } from '../../context/ChatContext';
@@ -53,7 +57,7 @@ const VirtualizedMessageListWithContext = (props) => {
     // Stops errors generated from react-virtuoso to bubble up
     // to Sentry or other tracking tools.
     useCaptureResizeObserverExceededError();
-    const { DateSeparator, GiphyPreviewMessage = DefaultGiphyPreviewMessage, MessageListNotifications = DefaultMessageListNotifications, MessageNotification = DefaultMessageNotification, MessageSystem, UnreadMessagesNotification = DefaultUnreadMessagesNotification, UnreadMessagesSeparator, VirtualMessage: MessageUIComponentFromContext = MessageSimple, TypingIndicator, } = useComponentContext('VirtualizedMessageList');
+    const { DateSeparator = DefaultDateSeparator, GiphyPreviewMessage = DefaultGiphyPreviewMessage, MessageListNotifications = DefaultMessageListNotifications, MessageNotification = DefaultMessageNotification, MessageSystem = DefaultMessageSystem, UnreadMessagesNotification = DefaultUnreadMessagesNotification, UnreadMessagesSeparator = DefaultUnreadMessagesSeparator, VirtualMessage: MessageUIComponentFromContext = MessageSimple, TypingIndicator, } = useComponentContext('VirtualizedMessageList');
     const MessageUIComponent = MessageUIComponentFromProps || MessageUIComponentFromContext;
     const { client, customClasses } = useChatContext('VirtualizedMessageList');
     const virtuoso = useRef(null);
@@ -187,43 +191,44 @@ const VirtualizedMessageListWithContext = (props) => {
         return null;
     return (React.createElement(React.Fragment, null,
         React.createElement(MessageListMainPanel, null,
-            !threadList && showUnreadMessagesNotification && (React.createElement(UnreadMessagesNotification, { unreadCount: channelUnreadUiState?.unread_messages })),
-            React.createElement("div", { className: customClasses?.virtualizedMessageList || 'str-chat__virtual-list' },
-                React.createElement(Virtuoso, { atBottomStateChange: atBottomStateChange, atBottomThreshold: 100, atTopStateChange: atTopStateChange, atTopThreshold: 100, className: 'str-chat__message-list-scroll', components: {
-                        EmptyPlaceholder,
-                        Header,
-                        Item,
-                        ...virtuosoComponentsFromProps,
-                    }, computeItemKey: computeItemKey, context: {
-                        additionalMessageInputProps,
-                        closeReactionSelectorOnClick,
-                        customClasses,
-                        customMessageActions,
-                        customMessageRenderer,
-                        DateSeparator,
-                        firstUnreadMessageId: channelUnreadUiState?.first_unread_message_id,
-                        formatDate,
-                        head,
-                        lastReadDate: channelUnreadUiState?.last_read,
-                        lastReadMessageId: channelUnreadUiState?.last_read_message_id,
-                        lastReceivedMessageId,
-                        loadingMore,
-                        Message: MessageUIComponent,
-                        messageActions,
-                        messageGroupStyles,
-                        MessageSystem,
-                        numItemsPrepended,
-                        ownMessagesReadByOthers,
-                        processedMessages,
-                        reactionDetailsSort,
-                        shouldGroupByUser,
-                        sortReactionDetails,
-                        sortReactions,
-                        threadList,
-                        unreadMessageCount: channelUnreadUiState?.unread_messages,
-                        UnreadMessagesSeparator,
-                        virtuosoRef: virtuoso,
-                    }, firstItemIndex: calculateFirstItemIndex(numItemsPrepended), followOutput: followOutput, increaseViewportBy: { bottom: 200, top: 0 }, initialTopMostItemIndex: calculateInitialTopMostItemIndex(processedMessages, highlightedMessageId), itemContent: messageRenderer, itemSize: fractionalItemSize, itemsRendered: handleItemsRendered, key: messageSetKey, overscan: overscan, ref: virtuoso, style: { overflowX: 'hidden' }, totalCount: processedMessages.length, ...overridingVirtuosoProps, ...(scrollSeekPlaceHolder ? { scrollSeek: scrollSeekPlaceHolder } : {}), ...(defaultItemHeight ? { defaultItemHeight } : {}) })),
+            React.createElement(DialogManagerProvider, { id: 'virtualized-message-list-dialog-manager' },
+                !threadList && showUnreadMessagesNotification && (React.createElement(UnreadMessagesNotification, { unreadCount: channelUnreadUiState?.unread_messages })),
+                React.createElement("div", { className: customClasses?.virtualizedMessageList || 'str-chat__virtual-list' },
+                    React.createElement(Virtuoso, { atBottomStateChange: atBottomStateChange, atBottomThreshold: 100, atTopStateChange: atTopStateChange, atTopThreshold: 100, className: 'str-chat__message-list-scroll', components: {
+                            EmptyPlaceholder,
+                            Header,
+                            Item,
+                            ...virtuosoComponentsFromProps,
+                        }, computeItemKey: computeItemKey, context: {
+                            additionalMessageInputProps,
+                            closeReactionSelectorOnClick,
+                            customClasses,
+                            customMessageActions,
+                            customMessageRenderer,
+                            DateSeparator,
+                            firstUnreadMessageId: channelUnreadUiState?.first_unread_message_id,
+                            formatDate,
+                            head,
+                            lastReadDate: channelUnreadUiState?.last_read,
+                            lastReadMessageId: channelUnreadUiState?.last_read_message_id,
+                            lastReceivedMessageId,
+                            loadingMore,
+                            Message: MessageUIComponent,
+                            messageActions,
+                            messageGroupStyles,
+                            MessageSystem,
+                            numItemsPrepended,
+                            ownMessagesReadByOthers,
+                            processedMessages,
+                            reactionDetailsSort,
+                            shouldGroupByUser,
+                            sortReactionDetails,
+                            sortReactions,
+                            threadList,
+                            unreadMessageCount: channelUnreadUiState?.unread_messages,
+                            UnreadMessagesSeparator,
+                            virtuosoRef: virtuoso,
+                        }, firstItemIndex: calculateFirstItemIndex(numItemsPrepended), followOutput: followOutput, increaseViewportBy: { bottom: 200, top: 0 }, initialTopMostItemIndex: calculateInitialTopMostItemIndex(processedMessages, highlightedMessageId), itemContent: messageRenderer, itemSize: fractionalItemSize, itemsRendered: handleItemsRendered, key: messageSetKey, overscan: overscan, ref: virtuoso, style: { overflowX: 'hidden' }, totalCount: processedMessages.length, ...overridingVirtuosoProps, ...(scrollSeekPlaceHolder ? { scrollSeek: scrollSeekPlaceHolder } : {}), ...(defaultItemHeight ? { defaultItemHeight } : {}) }))),
             TypingIndicator && React.createElement(TypingIndicator, null)),
         React.createElement(MessageListNotifications, { hasNewMessages: newMessagesNotification, isMessageListScrolledToBottom: isMessageListScrolledToBottom, isNotAtLatestMessageSet: hasMoreNewer, MessageNotification: MessageNotification, notifications: notifications, scrollToBottom: scrollToBottom, threadList: threadList, unreadCount: threadList ? undefined : channelUnreadUiState?.unread_messages }),
         giphyPreviewMessage && React.createElement(GiphyPreviewMessage, { message: giphyPreviewMessage })));
@@ -236,5 +241,5 @@ export function VirtualizedMessageList(props) {
     const { jumpToLatestMessage, loadMore, loadMoreNewer, } = useChannelActionContext('VirtualizedMessageList');
     const { channel, channelUnreadUiState, hasMore, hasMoreNewer, highlightedMessageId, loadingMore, loadingMoreNewer, messages: contextMessages, notifications, read, suppressAutoscroll, } = useChannelStateContext('VirtualizedMessageList');
     const messages = props.messages || contextMessages;
-    return (React.createElement(VirtualizedMessageListWithContext, { channel: channel, channelUnreadUiState: channelUnreadUiState, hasMore: !!hasMore, hasMoreNewer: !!hasMoreNewer, highlightedMessageId: highlightedMessageId, jumpToLatestMessage: jumpToLatestMessage, loadingMore: !!loadingMore, loadingMoreNewer: !!loadingMoreNewer, loadMore: loadMore, loadMoreNewer: loadMoreNewer, messages: messages, notifications: notifications, read: read, suppressAutoscroll: suppressAutoscroll, ...props }));
+    return (React.createElement(VirtualizedMessageListWithContext, { channel: channel, channelUnreadUiState: props.channelUnreadUiState ?? channelUnreadUiState, hasMore: !!hasMore, hasMoreNewer: !!hasMoreNewer, highlightedMessageId: highlightedMessageId, jumpToLatestMessage: jumpToLatestMessage, loadingMore: !!loadingMore, loadingMoreNewer: !!loadingMoreNewer, loadMore: loadMore, loadMoreNewer: loadMoreNewer, messages: messages, notifications: notifications, read: read, suppressAutoscroll: suppressAutoscroll, ...props }));
 }

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

@@ -11,7 +11,7 @@ type CommonVirtuosoComponentProps<StreamChatGenerics extends DefaultStreamChatGe
     context?: VirtuosoContext<StreamChatGenerics>;
 };
 export declare const Item: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ context, ...props }: ItemProps & CommonVirtuosoComponentProps<StreamChatGenerics>) => React.JSX.Element;
-export declare const Header: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ context, }: CommonVirtuosoComponentProps<StreamChatGenerics>) => React.JSX.Element | null;
+export declare const Header: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ context, }: CommonVirtuosoComponentProps<StreamChatGenerics>) => React.JSX.Element;
 export declare const EmptyPlaceholder: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ context, }: CommonVirtuosoComponentProps<StreamChatGenerics>) => React.JSX.Element;
 export declare const messageRenderer: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(virtuosoIndex: number, _data: UnknownType, virtuosoContext: VirtuosoContext<StreamChatGenerics>) => React.JSX.Element | null;
 export {};

package/dist/components/MessageList/VirtualizedMessageListComponents.js

@@ -37,17 +37,17 @@ export const Item = ({ context, ...props }) => {
 };
 export const Header = ({ context, }) => {
     const { LoadingIndicator = DefaultLoadingIndicator } = useComponentContext('VirtualizedMessageListHeader');
-    if (!context?.loadingMore)
-        return null;
-    return LoadingIndicator ? (React.createElement("div", { className: 'str-chat__virtual-list__loading' },
-        React.createElement(LoadingIndicator, { size: 20 }))) : (context?.head || null);
+    return (React.createElement(React.Fragment, null,
+        context?.head,
+        context?.loadingMore && LoadingIndicator && (React.createElement("div", { className: 'str-chat__virtual-list__loading' },
+            React.createElement(LoadingIndicator, { size: 20 })))));
 };
 export const EmptyPlaceholder = ({ context, }) => {
     const { EmptyStateIndicator = DefaultEmptyStateIndicator, } = useComponentContext('VirtualizedMessageList');
     return (React.createElement(React.Fragment, null, EmptyStateIndicator && (React.createElement(EmptyStateIndicator, { listType: context?.threadList ? 'thread' : 'message' }))));
 };
 export const messageRenderer = (virtuosoIndex, _data, virtuosoContext) => {
-    const { additionalMessageInputProps, closeReactionSelectorOnClick, customMessageActions, customMessageRenderer, DateSeparator, firstUnreadMessageId, formatDate, lastReadDate, lastReadMessageId, lastReceivedMessageId, Message: MessageUIComponent, messageActions, messageGroupStyles, MessageSystem, numItemsPrepended, ownMessagesReadByOthers, processedMessages: messageList, reactionDetailsSort, shouldGroupByUser, sortReactionDetails, sortReactions, unreadMessageCount = 0, UnreadMessagesSeparator, virtuosoRef, } = virtuosoContext;
+    const { additionalMessageInputProps, closeReactionSelectorOnClick, customMessageActions, customMessageRenderer, DateSeparator, firstUnreadMessageId, formatDate, lastReadDate, lastReadMessageId, lastReceivedMessageId, Message: MessageUIComponent, messageActions, messageGroupStyles, MessageSystem, numItemsPrepended, ownMessagesReadByOthers, processedMessages: messageList, reactionDetailsSort, shouldGroupByUser, sortReactionDetails, sortReactions, threadList, unreadMessageCount = 0, UnreadMessagesSeparator, virtuosoRef, } = virtuosoContext;
     const streamMessageIndex = calculateItemIndex(virtuosoIndex, numItemsPrepended);
     if (customMessageRenderer) {
         return customMessageRenderer(messageList, streamMessageIndex);
@@ -89,7 +89,7 @@ export const messageRenderer = (virtuosoIndex, _data, virtuosoContext) => {
     return (React.createElement(React.Fragment, null,
         showUnreadSeparatorAbove && (React.createElement("div", { className: 'str-chat__unread-messages-separator-wrapper' },
             React.createElement(UnreadMessagesSeparator, { unreadCount: unreadMessageCount }))),
-        React.createElement(Message, { additionalMessageInputProps: additionalMessageInputProps, autoscrollToBottom: virtuosoRef.current?.autoscrollToBottom, closeReactionSelectorOnClick: closeReactionSelectorOnClick, customMessageActions: customMessageActions, endOfGroup: endOfGroup, firstOfGroup: firstOfGroup, formatDate: formatDate, groupedByUser: groupedByUser, groupStyles: [messageGroupStyles[message.id] ?? ''], lastReceivedId: lastReceivedMessageId, message: message, Message: MessageUIComponent, messageActions: messageActions, reactionDetailsSort: reactionDetailsSort, readBy: ownMessagesReadByOthers[message.id] || [], sortReactionDetails: sortReactionDetails, sortReactions: sortReactions }),
+        React.createElement(Message, { additionalMessageInputProps: additionalMessageInputProps, autoscrollToBottom: virtuosoRef.current?.autoscrollToBottom, closeReactionSelectorOnClick: closeReactionSelectorOnClick, customMessageActions: customMessageActions, endOfGroup: endOfGroup, firstOfGroup: firstOfGroup, formatDate: formatDate, groupedByUser: groupedByUser, groupStyles: [messageGroupStyles[message.id] ?? ''], lastReceivedId: lastReceivedMessageId, message: message, Message: MessageUIComponent, messageActions: messageActions, reactionDetailsSort: reactionDetailsSort, readBy: ownMessagesReadByOthers[message.id] || [], sortReactionDetails: sortReactionDetails, sortReactions: sortReactions, threadList: threadList }),
         showUnreadSeparatorBelow && (React.createElement("div", { className: 'str-chat__unread-messages-separator-wrapper' },
             React.createElement(UnreadMessagesSeparator, { unreadCount: unreadMessageCount })))));
 };

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

@@ -1,10 +1,10 @@
 import React, { ReactNode } from 'react';
+import type { UserResponse } from 'stream-chat';
 import { GroupStyle } from './utils';
-import { MessageProps } from '../Message';
 import { ComponentContextValue, CustomClasses } from '../../context';
-import type { UserResponse } from 'stream-chat';
 import type { ChannelUnreadUiState, DefaultStreamChatGenerics } from '../../types';
 import type { StreamMessage } from '../../context/ChannelStateContext';
+import type { MessageProps } from '../Message';
 export interface RenderMessagesOptions<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> {
     components: ComponentContextValue<StreamChatGenerics>;
     lastReceivedMessageId: string | null;

package/dist/components/MessageList/renderMessages.js

@@ -1,9 +1,12 @@
 import React, { Fragment } from 'react';
 import { isDateSeparatorMessage } from './utils';
 import { Message } from '../Message';
+import { DateSeparator as DefaultDateSeparator } from '../DateSeparator';
+import { EventComponent as DefaultMessageSystem } from '../EventComponent';
+import { UnreadMessagesSeparator as DefaultUnreadMessagesSeparator } from './UnreadMessagesSeparator';
 import { CUSTOM_MESSAGE_TYPE } from '../../constants/messageTypes';
 export function defaultRenderMessages({ channelUnreadUiState, components, customClasses, lastReceivedMessageId: lastReceivedId, messageGroupStyles, messages, readData, sharedMessageProps: messageProps, }) {
-    const { DateSeparator, HeaderComponent, MessageSystem, UnreadMessagesSeparator } = components;
+    const { DateSeparator = DefaultDateSeparator, HeaderComponent, MessageSystem = DefaultMessageSystem, UnreadMessagesSeparator = DefaultUnreadMessagesSeparator, } = components;
     const renderedMessages = [];
     let firstMessage;
     for (let index = 0; index < messages.length; index++) {

package/dist/components/MessageList/utils.js

@@ -1,8 +1,8 @@
 /* eslint-disable no-continue */
 import { nanoid } from 'nanoid';
 import { CUSTOM_MESSAGE_TYPE } from '../../constants/messageTypes';
-import { isDate } from '../../context/TranslationContext';
 import { isMessageEdited } from '../Message/utils';
+import { isDate } from '../../i18n';
 /**
  * processMessages - Transform the input message list according to config parameters
  *

package/dist/components/Reactions/ReactionSelector.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { AvatarProps } from '../Avatar';
 import type { ReactionGroupResponse, ReactionResponse } from 'stream-chat';
+import type { AvatarProps } from '../Avatar';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 import type { ReactionOptions } from './reactionOptions';
 export type ReactionSelectorProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
@@ -21,7 +21,10 @@ export type ReactionSelectorProps<StreamChatGenerics extends DefaultStreamChatGe
     reaction_counts?: Record<string, number>;
     /** An object containing summary for each reaction type on a message */
     reaction_groups?: Record<string, ReactionGroupResponse>;
-    /** A list of the currently supported reactions on a message */
+    /**
+     * @deprecated
+     * A list of the currently supported reactions on a message
+     * */
     reactionOptions?: ReactionOptions;
     /** If true, adds a CSS class that reverses the horizontal positioning of the selector */
     reverse?: boolean;
@@ -29,4 +32,4 @@ export type ReactionSelectorProps<StreamChatGenerics extends DefaultStreamChatGe
 /**
  * Component that allows a user to select a reaction.
  */
-export declare const ReactionSelector: React.ForwardRefExoticComponent<ReactionSelectorProps<DefaultStreamChatGenerics> & React.RefAttributes<HTMLDivElement | null>>;
+export declare const ReactionSelector: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: ReactionSelectorProps<StreamChatGenerics>) => React.JSX.Element;