feat: control ReactionsSelector dialog display

src/components/Message/Message.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo, useRef } from 'react';
+import React, { useCallback, useMemo } from 'react';
 
 import {
   useActionHandler,
@@ -10,7 +10,6 @@ import {
   useMuteHandler,
   useOpenThreadHandler,
   usePinHandler,
-  useReactionClick,
   useReactionHandler,
   useReactionsFetcher,
   useRetryHandler,
@@ -44,14 +43,10 @@ type MessageContextPropsToPick =
   | 'handleReaction'
   | 'handleFetchReactions'
   | 'handleRetry'
-  | 'isReactionEnabled'
   | 'mutes'
   | 'onMentionsClickMessage'
   | 'onMentionsHoverMessage'
-  | 'onReactionListClick'
-  | 'reactionSelectorRef'
   | 'reactionDetailsSort'
-  | 'showDetailedReactions'
   | 'sortReactions'
   | 'sortReactionDetails';
 
@@ -218,8 +213,6 @@ export const Message = <
   const { addNotification } = useChannelActionContext<StreamChatGenerics>('Message');
   const { highlightedMessageId, mutes } = useChannelStateContext<StreamChatGenerics>('Message');
 
-  const reactionSelectorRef = useRef<HTMLDivElement | null>(null);
-
   const handleAction = useActionHandler(message);
   const handleOpenThread = useOpenThreadHandler(message, propOpenThread);
   const handleReaction = useReactionHandler(message);
@@ -264,20 +257,14 @@ export const Message = <
     notify: addNotification,
   });
 
-  const { isReactionEnabled, onReactionListClick, showDetailedReactions } = useReactionClick(
-    message,
-    reactionSelectorRef,
-    undefined,
-    closeReactionSelectorOnClick,
-  );
-
   const highlighted = highlightedMessageId === message.id;
 
   return (
     <MemoizedMessage
       additionalMessageInputProps={props.additionalMessageInputProps}
       autoscrollToBottom={props.autoscrollToBottom}
       canPin={canPin}
+      closeReactionSelectorOnClick={closeReactionSelectorOnClick}
       customMessageActions={props.customMessageActions}
       disableQuotedMessages={props.disableQuotedMessages}
       endOfGroup={props.endOfGroup}
@@ -297,7 +284,6 @@ export const Message = <
       handleRetry={handleRetry}
       highlighted={highlighted}
       initialMessage={props.initialMessage}
-      isReactionEnabled={isReactionEnabled}
       lastReceivedId={props.lastReceivedId}
       message={message}
       Message={props.Message}
@@ -306,15 +292,12 @@ export const Message = <
       mutes={mutes}
       onMentionsClickMessage={onMentionsClick}
       onMentionsHoverMessage={onMentionsHover}
-      onReactionListClick={onReactionListClick}
       onUserClick={props.onUserClick}
       onUserHover={props.onUserHover}
       pinPermissions={props.pinPermissions}
       reactionDetailsSort={reactionDetailsSort}
-      reactionSelectorRef={reactionSelectorRef}
       readBy={props.readBy}
       renderText={props.renderText}
-      showDetailedReactions={showDetailedReactions}
       sortReactionDetails={sortReactionDetails}
       sortReactions={sortReactions}
       threadList={props.threadList}

src/components/Message/MessageOptions.tsx

@@ -6,13 +6,15 @@ import {
   ThreadIcon as DefaultThreadIcon,
 } from './icons';
 import { MESSAGE_ACTIONS } from './utils';
-
 import { MessageActions } from '../MessageActions';
 
+import { useTranslationContext } from '../../context';
 import { MessageContextValue, useMessageContext } from '../../context/MessageContext';
 
 import type { DefaultStreamChatGenerics, IconProps } from '../../types/types';
-import { useTranslationContext } from '../../context';
+import { ReactionSelectorWithButton } from '../Reactions/ReactionSelectorWithButton';
+import { useDialogIsOpen } from '../Dialog';
+import clsx from 'clsx';
 
 export type MessageOptionsProps<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
@@ -21,8 +23,6 @@ export type MessageOptionsProps<
   ActionsIcon?: React.ComponentType<IconProps>;
   /* If true, show the `ThreadIcon` and enable navigation into a `Thread` component. */
   displayReplies?: boolean;
-  /* React mutable ref that can be placed on the message root `div` of MessageActions component */
-  messageWrapperRef?: React.RefObject<HTMLDivElement>;
   /* Custom component rendering the icon used in a button invoking reactions selector for a given message. */
   ReactionIcon?: React.ComponentType<IconProps>;
   /* Theme string to be added to CSS class names. */
@@ -40,7 +40,6 @@ const UnMemoizedMessageOptions = <
     ActionsIcon = DefaultActionsIcon,
     displayReplies = true,
     handleOpenThread: propHandleOpenThread,
-    messageWrapperRef,
     ReactionIcon = DefaultReactionIcon,
     theme = 'simple',
     ThreadIcon = DefaultThreadIcon,
@@ -51,13 +50,12 @@ const UnMemoizedMessageOptions = <
     handleOpenThread: contextHandleOpenThread,
     initialMessage,
     message,
-    onReactionListClick,
-    showDetailedReactions,
     threadList,
   } = useMessageContext<StreamChatGenerics>('MessageOptions');
 
   const { t } = useTranslationContext('MessageOptions');
-
+  const messageActionsDialogIsOpen = useDialogIsOpen(`message-actions--${message.id}`);
+  const reactionSelectorDialogIsOpen = useDialogIsOpen(`reaction-selector--${message.id}`);
   const handleOpenThread = propHandleOpenThread || contextHandleOpenThread;
 
   const messageActions = getMessageActions();
@@ -78,11 +76,15 @@ const UnMemoizedMessageOptions = <
     return null;
   }
 
-  const rootClassName = `str-chat__message-${theme}__actions str-chat__message-options`;
-
   return (
-    <div className={rootClassName} data-testid='message-options'>
-      <MessageActions ActionsIcon={ActionsIcon} messageWrapperRef={messageWrapperRef} />
+    <div
+      className={clsx(`str-chat__message-${theme}__actions str-chat__message-options`, {
+        'str-chat__message-options--active':
+          messageActionsDialogIsOpen || reactionSelectorDialogIsOpen,
+      })}
+      data-testid='message-options'
+    >
+      <MessageActions ActionsIcon={ActionsIcon} />
       {shouldShowReplies && (
         <button
           aria-label={t('aria/Open Thread')}
@@ -94,15 +96,7 @@ const UnMemoizedMessageOptions = <
         </button>
       )}
       {shouldShowReactions && (
-        <button
-          aria-expanded={showDetailedReactions}
-          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={onReactionListClick}
-        >
-          <ReactionIcon className='str-chat__message-action-icon' />
-        </button>
+        <ReactionSelectorWithButton ReactionIcon={ReactionIcon} theme={theme} />
       )}
     </div>
   );

src/components/Message/MessageSimple.tsx

@@ -22,10 +22,7 @@ import { CUSTOM_MESSAGE_TYPE } from '../../constants/messageTypes';
 import { EditMessageForm as DefaultEditMessageForm, MessageInput } from '../MessageInput';
 import { MML } from '../MML';
 import { Modal } from '../Modal';
-import {
-  ReactionsList as DefaultReactionList,
-  ReactionSelector as DefaultReactionSelector,
-} from '../Reactions';
+import { ReactionsList as DefaultReactionList } from '../Reactions';
 import { MessageBounceModal } from '../MessageBounce/MessageBounceModal';
 
 import { useChatContext } from '../../context/ChatContext';
@@ -59,13 +56,10 @@ const MessageSimpleWithContext = <
     handleRetry,
     highlighted,
     isMyMessage,
-    isReactionEnabled,
     message,
     onUserClick,
     onUserHover,
-    reactionSelectorRef,
     renderText,
-    showDetailedReactions,
     threadList,
   } = props;
 
@@ -83,7 +77,7 @@ const MessageSimpleWithContext = <
     MessageRepliesCountButton = DefaultMessageRepliesCountButton,
     MessageStatus = DefaultMessageStatus,
     MessageTimestamp = DefaultMessageTimestamp,
-    ReactionSelector = DefaultReactionSelector,
+
     ReactionsList = DefaultReactionList,
     PinIndicator,
   } = useComponentContext<StreamChatGenerics>('MessageSimple');
@@ -100,14 +94,6 @@ const MessageSimpleWithContext = <
     return <MessageDeleted message={message} />;
   }
 
-  /** FIXME: isReactionEnabled should be removed with next major version and a proper centralized permissions logic should be put in place
-   * With the current permissions implementation it would be sth like:
-   * const messageActions = getMessageActions();
-   * const canReact = messageActions.includes(MESSAGE_ACTIONS.react);
-   */
-  const canReact = isReactionEnabled;
-  const canShowReactions = hasReactions;
-
   const showMetadata = !groupedByUser || endOfGroup;
   const showReplyCountButton = !threadList && !!message.reply_count;
   const allowRetry = message.status === 'failed' && message.errorStatusCode !== 403;
@@ -136,7 +122,7 @@ const MessageSimpleWithContext = <
       'str-chat__message--has-attachment': hasAttachment,
       'str-chat__message--highlighted': highlighted,
       'str-chat__message--pinned pinned-message': message.pinned,
-      'str-chat__message--with-reactions': canShowReactions,
+      'str-chat__message--with-reactions': hasReactions,
       'str-chat__message-send-can-be-retried':
         message?.status === 'failed' && message?.errorStatusCode !== 403,
       'str-chat__message-with-thread-link': showReplyCountButton,
@@ -190,8 +176,7 @@ const MessageSimpleWithContext = <
           >
             <MessageOptions />
             <div className='str-chat__message-reactions-host'>
-              {canShowReactions && <ReactionsList reverse />}
-              {showDetailedReactions && canReact && <ReactionSelector ref={reactionSelectorRef} />}
+              {hasReactions && <ReactionsList reverse />}
             </div>
             <div className='str-chat__message-bubble'>
               {message.attachments?.length && !message.quoted_message ? (

src/components/Message/__tests__/MessageOptions.test.js

@@ -1,6 +1,6 @@
 /* eslint-disable jest-dom/prefer-to-have-class */
 import React from 'react';
-import { fireEvent, render } from '@testing-library/react';
+import { act, fireEvent, render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 
 import { Message } from '../Message';
@@ -22,6 +22,7 @@ import {
   getTestClientWithUser,
 } from '../../../mock-builders';
 import { DialogsManagerProvider } from '../../../context';
+import { defaultReactionOptions } from '../../Reactions';
 
 const MESSAGE_ACTIONS_TEST_ID = 'message-actions';
 
@@ -73,6 +74,7 @@ async function renderMessageOptions({
                     onReactionListClick={customMessageProps?.onReactionListClick}
                   />
                 ),
+                reactionOptions: defaultReactionOptions,
               }}
             >
               <Message {...defaultMessageProps} {...customMessageProps}>
@@ -182,6 +184,85 @@ describe('<MessageOptions />', () => {
     expect(queryByTestId(reactionActionTestId)).not.toBeInTheDocument();
   });
 
+  it('should not render ReactionsSelector until open', async () => {
+    const { queryByTestId } = await renderMessageOptions({
+      channelStateOpts: {
+        channelCapabilities: { 'send-reaction': true },
+      },
+    });
+    expect(screen.queryByTestId('reaction-selector')).not.toBeInTheDocument();
+    await act(async () => {
+      await fireEvent.click(queryByTestId(reactionActionTestId));
+    });
+    expect(screen.getByTestId('reaction-selector')).toBeInTheDocument();
+  });
+
+  it('should unmount ReactionsSelector when closed by click on dialog overlay', async () => {
+    const { queryByTestId } = await renderMessageOptions({
+      channelStateOpts: {
+        channelCapabilities: { 'send-reaction': true },
+      },
+    });
+    await act(async () => {
+      await fireEvent.click(queryByTestId(reactionActionTestId));
+    });
+    await act(async () => {
+      await fireEvent.click(screen.getByTestId('str-chat__dialog-overlay'));
+    });
+    expect(screen.queryByTestId('reaction-selector')).not.toBeInTheDocument();
+  });
+
+  it('should unmount ReactionsSelector when closed pressed Esc button', async () => {
+    const { queryByTestId } = await renderMessageOptions({
+      channelStateOpts: {
+        channelCapabilities: { 'send-reaction': true },
+      },
+    });
+    await act(async () => {
+      await fireEvent.click(queryByTestId(reactionActionTestId));
+    });
+    await act(async () => {
+      await fireEvent.keyUp(document, { charCode: 27, code: 'Escape', key: 'Escape' });
+    });
+    expect(screen.queryByTestId('reaction-selector')).not.toBeInTheDocument();
+  });
+
+  it('should unmount ReactionsSelector when closed on reaction selection and closeReactionSelectorOnClick enabled', async () => {
+    const { queryByTestId } = await renderMessageOptions({
+      channelStateOpts: {
+        channelCapabilities: { 'send-reaction': true },
+      },
+      customMessageProps: {
+        closeReactionSelectorOnClick: true,
+      },
+    });
+    await act(async () => {
+      await fireEvent.click(queryByTestId(reactionActionTestId));
+    });
+    await act(async () => {
+      await fireEvent.click(screen.queryAllByTestId('select-reaction-button')[0]);
+    });
+    expect(screen.queryByTestId('reaction-selector')).not.toBeInTheDocument();
+  });
+
+  it('should not unmount ReactionsSelector when closed on reaction selection and closeReactionSelectorOnClick enabled', async () => {
+    const { queryByTestId } = await renderMessageOptions({
+      channelStateOpts: {
+        channelCapabilities: { 'send-reaction': true },
+      },
+      customMessageProps: {
+        closeReactionSelectorOnClick: false,
+      },
+    });
+    await act(async () => {
+      await fireEvent.click(queryByTestId(reactionActionTestId));
+    });
+    await act(async () => {
+      await fireEvent.click(screen.queryAllByTestId('select-reaction-button')[0]);
+    });
+    expect(screen.queryByTestId('reaction-selector')).toBeInTheDocument();
+  });
+
   it('should render message actions', async () => {
     const { queryByTestId } = await renderMessageOptions({
       channelStateOpts: { channelCapabilities: minimumCapabilitiesToRenderMessageActions },

src/components/Message/__tests__/QuotedMessage.test.js

@@ -9,6 +9,7 @@ import {
   ChannelStateProvider,
   ChatProvider,
   ComponentProvider,
+  DialogsManagerProvider,
   TranslationProvider,
 } from '../../../context';
 import {
@@ -65,9 +66,11 @@ async function renderQuotedMessage(customProps) {
                 Message: () => <MessageSimple channelConfig={channelConfig} />,
               }}
             >
-              <Message {...customProps}>
-                <QuotedMessage {...customProps} />
-              </Message>
+              <DialogsManagerProvider id='quoted-message-dialogs-manager-provider'>
+                <Message {...customProps}>
+                  <QuotedMessage {...customProps} />
+                </Message>
+              </DialogsManagerProvider>
             </ComponentProvider>
           </TranslationProvider>
         </ChannelActionProvider>