stream-chat-react 12.0.0-rc.13 → 12.0.0-rc.15

package/dist/components/Message/hooks/useReactionHandler.js

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback } from 'react';
 import throttle from 'lodash.throttle';
 import { useChannelActionContext } from '../../../context/ChannelActionContext';
 import { useChannelStateContext } from '../../../context/ChannelStateContext';
@@ -114,65 +114,3 @@ export const useReactionHandler = (message) => {
         }
     };
 };
-export const useReactionClick = (message, reactionSelectorRef, messageWrapperRef, closeReactionSelectorOnClick) => {
-    const { channelCapabilities = {} } = useChannelStateContext('useReactionClick');
-    const [showDetailedReactions, setShowDetailedReactions] = useState(false);
-    const hasListener = useRef(false);
-    const isReactionEnabled = channelCapabilities['send-reaction'];
-    const messageDeleted = !!message?.deleted_at;
-    const closeDetailedReactions = useCallback((event) => {
-        if (event.target instanceof HTMLElement &&
-            reactionSelectorRef?.current?.contains(event.target) &&
-            !closeReactionSelectorOnClick) {
-            return;
-        }
-        setShowDetailedReactions(false);
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [setShowDetailedReactions, reactionSelectorRef]);
-    useEffect(() => {
-        const messageWrapper = messageWrapperRef?.current;
-        if (showDetailedReactions && !hasListener.current) {
-            hasListener.current = true;
-            document.addEventListener('click', closeDetailedReactions);
-            if (messageWrapper) {
-                messageWrapper.addEventListener('mouseleave', closeDetailedReactions);
-            }
-        }
-        if (!showDetailedReactions && hasListener.current) {
-            document.removeEventListener('click', closeDetailedReactions);
-            if (messageWrapper) {
-                messageWrapper.removeEventListener('mouseleave', closeDetailedReactions);
-            }
-            hasListener.current = false;
-        }
-        return () => {
-            if (hasListener.current) {
-                document.removeEventListener('click', closeDetailedReactions);
-                if (messageWrapper) {
-                    messageWrapper.removeEventListener('mouseleave', closeDetailedReactions);
-                }
-                hasListener.current = false;
-            }
-        };
-    }, [showDetailedReactions, closeDetailedReactions, messageWrapperRef]);
-    useEffect(() => {
-        const messageWrapper = messageWrapperRef?.current;
-        if (messageDeleted && hasListener.current) {
-            document.removeEventListener('click', closeDetailedReactions);
-            if (messageWrapper) {
-                messageWrapper.removeEventListener('mouseleave', closeDetailedReactions);
-            }
-            hasListener.current = false;
-        }
-    }, [messageDeleted, closeDetailedReactions, messageWrapperRef]);
-    const onReactionListClick = (event) => {
-        event?.stopPropagation?.();
-        setShowDetailedReactions((prev) => !prev);
-    };
-    return {
-        isReactionEnabled,
-        onReactionListClick,
-        showDetailedReactions,
-    };
-};

package/dist/components/Message/utils.js

@@ -194,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,14 +1,14 @@
-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, shouldRenderMessageActions } from '../Message/utils';
 import { useChatContext } from '../../context/ChatContext';
 import { useMessageContext } from '../../context/MessageContext';
-import { useMessageActionsBoxPopper } from './hooks';
 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, threadList, } = useMessageContext('MessageActions');
     const { CustomMessageActionsList } = useComponentContext('MessageActions');
@@ -21,8 +21,10 @@ 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 dialogId = `message-actions--${message.id}`;
+    const dialog = useDialog({ id: dialogId });
+    const dialogIsOpen = useDialogIsOpen(dialogId);
     const messageActions = getMessageActions();
     const renderMessageActions = shouldRenderMessageActions({
         customMessageActions,
@@ -30,58 +32,22 @@ export const MessageActions = (props) => {
         inThread: threadList,
         messageActions,
     });
-    const hideOptions = useCallback((event) => {
-        if (event instanceof KeyboardEvent && event.key !== 'Escape') {
-            return;
-        }
-        setActionsBoxOpen(false);
-    }, []);
-    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,
-    });
     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 { 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 wrapperClass = customWrapperClass || defaultWrapperClass;
-    const onClickOptionsAction = (event) => {
-        event.stopPropagation();
-        setActionsBoxOpen((prev) => !prev);
-    };
     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/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,11 +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), 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(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.js

@@ -14,6 +14,7 @@ import { calculateFirstItemIndex, calculateItemIndex, EmptyPlaceholder, Header,
 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';
@@ -190,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 })));

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

@@ -32,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;

package/dist/components/Reactions/ReactionSelector.js

@@ -1,14 +1,17 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import clsx from 'clsx';
-import { isMutableRef } from './utils/utils';
 import { Avatar as DefaultAvatar } from '../Avatar';
+import { useDialog } from '../Dialog';
+import { defaultReactionOptions } from './reactionOptions';
+import { isMutableRef } from './utils/utils';
 import { useComponentContext } from '../../context/ComponentContext';
 import { useMessageContext } from '../../context/MessageContext';
-import { defaultReactionOptions } from './reactionOptions';
-const UnMemoizedReactionSelector = React.forwardRef((props, ref) => {
+const UnMemoizedReactionSelector = (props) => {
     const { Avatar: propAvatar, detailedView = true, handleReaction: propHandleReaction, latest_reactions: propLatestReactions, own_reactions: propOwnReactions, reaction_groups: propReactionGroups, reactionOptions: propReactionOptions, reverse = false, } = props;
     const { Avatar: contextAvatar, reactionOptions: contextReactionOptions = defaultReactionOptions, } = useComponentContext('ReactionSelector');
-    const { handleReaction: contextHandleReaction, message, } = useMessageContext('ReactionSelector');
+    const { closeReactionSelectorOnClick, handleReaction: contextHandleReaction, message, } = useMessageContext('ReactionSelector');
+    const dialogId = `reaction-selector--${message.id}`;
+    const dialog = useDialog({ id: dialogId });
     const reactionOptions = propReactionOptions ?? contextReactionOptions;
     const Avatar = propAvatar || contextAvatar || DefaultAvatar;
     const handleReaction = propHandleReaction || contextHandleReaction;
@@ -17,6 +20,7 @@ const UnMemoizedReactionSelector = React.forwardRef((props, ref) => {
     const reactionGroups = propReactionGroups || message?.reaction_groups || {};
     const [tooltipReactionType, setTooltipReactionType] = useState(null);
     const [tooltipPositions, setTooltipPositions] = useState(null);
+    const rootRef = useRef(null);
     const targetRef = useRef(null);
     const tooltipRef = useRef(null);
     const showTooltip = useCallback((event, reactionType) => {
@@ -28,22 +32,22 @@ const UnMemoizedReactionSelector = React.forwardRef((props, ref) => {
         setTooltipPositions(null);
     }, []);
     useEffect(() => {
-        if (tooltipReactionType) {
-            const tooltip = tooltipRef.current?.getBoundingClientRect();
-            const target = targetRef.current?.getBoundingClientRect();
-            const container = isMutableRef(ref) ? ref.current?.getBoundingClientRect() : null;
-            if (!tooltip || !target || !container)
-                return;
-            const tooltipPosition = tooltip.width === container.width || tooltip.x < container.x
-                ? 0
-                : target.left + target.width / 2 - container.left - tooltip.width / 2;
-            const arrowPosition = target.x - tooltip.x + target.width / 2 - tooltipPosition;
-            setTooltipPositions({
-                arrow: arrowPosition,
-                tooltip: tooltipPosition,
-            });
-        }
-    }, [tooltipReactionType, ref]);
+        if (!tooltipReactionType || !rootRef.current)
+            return;
+        const tooltip = tooltipRef.current?.getBoundingClientRect();
+        const target = targetRef.current?.getBoundingClientRect();
+        const container = isMutableRef(rootRef) ? rootRef.current?.getBoundingClientRect() : null;
+        if (!tooltip || !target || !container)
+            return;
+        const tooltipPosition = tooltip.width === container.width || tooltip.x < container.x
+            ? 0
+            : target.left + target.width / 2 - container.left - tooltip.width / 2;
+        const arrowPosition = target.x - tooltip.x + target.width / 2 - tooltipPosition;
+        setTooltipPositions({
+            arrow: arrowPosition,
+            tooltip: tooltipPosition,
+        });
+    }, [tooltipReactionType, rootRef]);
     const getUsersPerReactionType = (type) => latestReactions
         .map((reaction) => {
         if (reaction.type === type) {
@@ -55,9 +59,9 @@ const UnMemoizedReactionSelector = React.forwardRef((props, ref) => {
     const iHaveReactedWithReaction = (reactionType) => ownReactions.find((reaction) => reaction.type === reactionType);
     const getLatestUserForReactionType = (type) => latestReactions.find((reaction) => reaction.type === type && !!reaction.user)?.user ||
         undefined;
-    return (React.createElement("div", { className: clsx('str-chat__reaction-selector str-chat__message-reaction-selector', {
+    return (React.createElement("div", { className: clsx('str-chat__reaction-selector str-chat__message-reaction-selector str-chat-react__message-reaction-selector', {
             'str-chat__reaction-selector--reverse': reverse,
-        }), "data-testid": 'reaction-selector', ref: ref },
+        }), "data-testid": 'reaction-selector', ref: rootRef },
         !!tooltipReactionType && detailedView && (React.createElement("div", { className: 'str-chat__reaction-selector-tooltip', ref: tooltipRef, style: {
                 left: tooltipPositions?.tooltip,
                 visibility: tooltipPositions ? 'visible' : 'hidden',
@@ -70,13 +74,18 @@ const UnMemoizedReactionSelector = React.forwardRef((props, ref) => {
             return (React.createElement("li", { key: reactionType },
                 React.createElement("button", { "aria-label": `Select Reaction: ${reactionName || reactionType}`, className: clsx('str-chat__message-reactions-list-item str-chat__message-reactions-option', {
                         'str-chat__message-reactions-option-selected': iHaveReactedWithReaction(reactionType),
-                    }), "data-text": reactionType, onClick: (event) => handleReaction(reactionType, event) },
+                    }), "data-testid": 'select-reaction-button', "data-text": reactionType, onClick: (event) => {
+                        handleReaction(reactionType, event);
+                        if (closeReactionSelectorOnClick) {
+                            dialog.close();
+                        }
+                    } },
                     !!count && detailedView && (React.createElement("div", { className: 'latest-user str-chat__message-reactions-last-user', onClick: hideTooltip, onMouseEnter: (e) => showTooltip(e, reactionType), onMouseLeave: hideTooltip }, latestUser ? (React.createElement(Avatar, { image: latestUser.image, name: latestUser.name, size: 20, user: latestUser })) : (React.createElement("div", { className: 'latest-user-not-found' })))),
                     React.createElement("span", { className: 'str-chat__message-reaction-emoji' },
                         React.createElement(Component, null)),
                     Boolean(count) && detailedView && (React.createElement("span", { className: 'str-chat__message-reactions-list-item__count' }, count || '')))));
         }))));
-});
+};
 /**
  * Component that allows a user to select a reaction.
  */

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { DefaultStreamChatGenerics } from '../../types';
+import type { IconProps } from '../../types/types';
+type ReactionSelectorWithButtonProps = {
+    ReactionIcon: React.ComponentType<IconProps>;
+    theme: string;
+};
+/**
+ * Internal convenience component - not to be exported. It just groups the button and the dialog anchor and thus prevents
+ * cluttering the parent component.
+ */
+export declare const ReactionSelectorWithButton: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ ReactionIcon, theme, }: ReactionSelectorWithButtonProps) => React.JSX.Element;
+export {};

package/dist/components/Reactions/ReactionSelectorWithButton.js

@@ -0,0 +1,22 @@
+import React, { useRef } from 'react';
+import { ReactionSelector as DefaultReactionSelector } from './ReactionSelector';
+import { DialogAnchor, useDialog, useDialogIsOpen } from '../Dialog';
+import { useComponentContext, useMessageContext, useTranslationContext } from '../../context';
+/**
+ * Internal convenience component - not to be exported. It just groups the button and the dialog anchor and thus prevents
+ * cluttering the parent component.
+ */
+export const ReactionSelectorWithButton = ({ ReactionIcon, theme, }) => {
+    const { t } = useTranslationContext('ReactionSelectorWithButton');
+    const { isMyMessage, message } = useMessageContext('MessageOptions');
+    const { ReactionSelector = DefaultReactionSelector } = useComponentContext('MessageOptions');
+    const buttonRef = useRef(null);
+    const dialogId = `reaction-selector--${message.id}`;
+    const dialog = useDialog({ id: dialogId });
+    const dialogIsOpen = useDialogIsOpen(dialogId);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(DialogAnchor, { id: dialogId, placement: isMyMessage() ? 'top-end' : 'top-start', referenceElement: buttonRef.current, trapFocus: true },
+            React.createElement(ReactionSelector, null)),
+        React.createElement("button", { "aria-expanded": dialogIsOpen, "aria-label": t('aria/Open Reaction Selector'), className: `str-chat__message-${theme}__actions__action str-chat__message-${theme}__actions__action--reactions str-chat__message-reactions-button`, "data-testid": 'message-reaction-action', onClick: () => dialog?.toggle(), ref: buttonRef },
+            React.createElement(ReactionIcon, { className: 'str-chat__message-action-icon' }))));
+};

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

@@ -1,13 +1,10 @@
 import React from 'react';
 import type { ReactionGroupResponse, ReactionResponse } from 'stream-chat';
-import type { ReactEventHandler } from '../Message/types';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 import type { ReactionOptions } from './reactionOptions';
 import type { ReactionDetailsComparator, ReactionsComparator } from './types';
 import { MessageContextValue } from '../../context';
 export type ReactionsListProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = Partial<Pick<MessageContextValue<StreamChatGenerics>, 'handleFetchReactions' | 'reactionDetailsSort'>> & {
-    /** Custom on click handler for an individual reaction, defaults to `onReactionListClick` from the `MessageContext` */
-    onClick?: ReactEventHandler;
     /** An array of the own reaction objects to distinguish own reactions visually */
     own_reactions?: ReactionResponse<StreamChatGenerics>[];
     /**

package/dist/components/Thread/Thread.js

@@ -6,7 +6,8 @@ import { MessageList, VirtualizedMessageList, } from '../MessageList';
 import { ThreadHeader as DefaultThreadHeader } from './ThreadHeader';
 import { ThreadHead as DefaultThreadHead } from '../Thread/ThreadHead';
 import { useChannelActionContext, useChannelStateContext, useChatContext, useComponentContext, } from '../../context';
-import { useStateStore, useThreadContext } from '../../components/Threads';
+import { useThreadContext } from '../Threads';
+import { useStateStore } from '../../store';
 /**
  * The Thread component renders a parent Message with a list of replies
  */

package/dist/components/Threads/ThreadList/ThreadList.js

@@ -5,7 +5,7 @@ import { ThreadListEmptyPlaceholder as DefaultThreadListEmptyPlaceholder } from
 import { ThreadListUnseenThreadsBanner as DefaultThreadListUnseenThreadsBanner } from './ThreadListUnseenThreadsBanner';
 import { ThreadListLoadingIndicator as DefaultThreadListLoadingIndicator } from './ThreadListLoadingIndicator';
 import { useChatContext, useComponentContext } from '../../../context';
-import { useStateStore } from '../hooks/useStateStore';
+import { useStateStore } from '../../../store';
 const selector = (nextValue) => [nextValue.threads];
 const computeItemKey = (_, item) => item.id;
 export const useThreadList = () => {

package/dist/components/Threads/ThreadList/ThreadListItemUI.js

@@ -7,7 +7,7 @@ import { UnreadCountBadge } from '../UnreadCountBadge';
 import { useChatContext } from '../../../context';
 import { useThreadsViewContext } from '../../ChatView';
 import { useThreadListItemContext } from './ThreadListItem';
-import { useStateStore } from '../hooks/useStateStore';
+import { useStateStore } from '../../../store';
 /**
  * TODO:
  * - maybe hover state? ask design

package/dist/components/Threads/ThreadList/ThreadListLoadingIndicator.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { LoadingIndicator as DefaultLoadingIndicator } from '../../Loading';
 import { useChatContext, useComponentContext } from '../../../context';
-import { useStateStore } from '../hooks/useStateStore';
+import { useStateStore } from '../../../store';
 const selector = (nextValue) => [nextValue.pagination.isLoadingNext];
 export const ThreadListLoadingIndicator = () => {
     const { LoadingIndicator = DefaultLoadingIndicator } = useComponentContext();

package/dist/components/Threads/ThreadList/ThreadListUnseenThreadsBanner.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Icon } from '../icons';
 import { useChatContext } from '../../../context';
-import { useStateStore } from '../hooks/useStateStore';
+import { useStateStore } from '../../../store';
 const selector = (nextValue) => [nextValue.unseenThreadIds];
 export const ThreadListUnseenThreadsBanner = () => {
     const { client } = useChatContext();

package/dist/components/Threads/hooks/useThreadManagerState.js

@@ -1,5 +1,5 @@
 import { useChatContext } from 'context';
-import { useStateStore } from './useStateStore';
+import { useStateStore } from '../../../store';
 export const useThreadManagerState = (selector) => {
     const { client } = useChatContext();
     return useStateStore(client.threads.state, selector);

package/dist/components/Threads/hooks/useThreadState.js

@@ -1,6 +1,6 @@
-import { useStateStore } from './useStateStore';
 import { useThreadListItemContext } from '../ThreadList';
 import { useThreadContext } from '../ThreadContext';
+import { useStateStore } from '../../../store/';
 /**
  * @description returns thread state, prioritizes `ThreadListItemContext` falls back to `ThreadContext` if not former is not present
  */

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

@@ -1,3 +1,2 @@
 export * from './ThreadContext';
 export * from './ThreadList';
-export * from './hooks/useStateStore';