feat: hide quick message actions on small screens (#3120)

Author: MartinCupela

src/components/Dialog/components/ContextMenu.tsx

@@ -413,6 +413,7 @@ export type ContextMenuItemProps = ComponentProps<'button'>;
 export type ContextMenuItemComponent = ComponentType<ContextMenuItemProps>;
 
 type ContextMenuContextValue = {
+  anchorReferenceElement?: HTMLElement | null;
   closeMenu: () => void;
   openSubmenu: (params: ContextMenuOpenSubmenuParams) => void;
   returnToParentMenu: () => void;
@@ -464,6 +465,7 @@ type ContextMenuAnchorProps = Partial<
 export type ContextMenuProps = ContextMenuBaseProps & ContextMenuAnchorProps;
 
 export type ContextMenuContentProps = ContextMenuBaseProps & {
+  anchorReferenceElement?: HTMLElement | null;
   transitionDirection?: 'forward' | 'backward';
 };
 
@@ -475,6 +477,7 @@ export type ContextMenuContentProps = ContextMenuBaseProps & {
  * handling from `ContextMenu`.
  */
 export function ContextMenuContent({
+  anchorReferenceElement,
   backLabel = 'Back',
   children,
   className,
@@ -547,7 +550,9 @@ export function ContextMenuContent({
   }, [transitionDirection, menuStack.length]);
 
   return (
-    <ContextMenuContext.Provider value={{ closeMenu, openSubmenu, returnToParentMenu }}>
+    <ContextMenuContext.Provider
+      value={{ anchorReferenceElement, closeMenu, openSubmenu, returnToParentMenu }}
+    >
       <ContextMenuRoot
         className={clsx(className, activeMenu.menuClassName)}
         data-str-chat-enable-animations={enableAnimations}
@@ -705,6 +710,7 @@ export const ContextMenu = (props: ContextMenuProps) => {
 
   const content = (
     <ContextMenuContentComponent
+      anchorReferenceElement={isAnchored ? referenceElement : undefined}
       {...menuProps}
       key={`context-menu-content-${contentResetToken}`}
       onMenuLevelChange={handleMenuLevelChange}

src/components/Message/styling/Message.scss

@@ -81,6 +81,10 @@
   --str-chat-message-options-size: calc(3 * var(--str-chat__message-options-button-size));
   padding-inline: var(--str-chat__message-composer-padding);
 
+  @media (max-width: 767px) {
+    --str-chat-message-options-size: var(--str-chat__message-options-button-size);
+  }
+
   .str-chat__message-bubble {
     width: min(100%, var(--str-chat__message-max-width));
     max-width: var(--str-chat__message-max-width);

src/components/MessageActions/MessageActions.defaults.tsx

@@ -30,6 +30,7 @@ import { useMessageComposerController } from '../MessageComposer/hooks/useMessag
 import { savePreEditSnapshot } from '../MessageComposer/preEditSnapshot';
 import { useNotificationApi } from '../Notifications';
 import { useMessageReminder } from '../Message/hooks/useMessageReminder';
+import { ReactionSelector as DefaultReactionSelector } from '../Reactions';
 import { ReactionSelectorWithButton } from '../Reactions/ReactionSelectorWithButton';
 import {
   useChatContext,
@@ -40,6 +41,7 @@ import {
 import { RemindMeSubmenu, RemindMeSubmenuHeader } from './RemindMeSubmenu';
 import {
   ContextMenuButton,
+  DialogAnchor,
   useContextMenuContext,
   useDialogIsOpen,
   useDialogOnNearestManager,
@@ -67,6 +69,61 @@ const getNotificationError = (error: unknown): Error | undefined => {
 
 const DefaultMessageActionComponents = {
   dropdown: {
+    React() {
+      const { ReactionSelector = DefaultReactionSelector } = useComponentContext();
+      const { anchorReferenceElement } = useContextMenuContext();
+      const { isMyMessage, message, threadList } = useMessageContext();
+      const { t } = useTranslationContext();
+      const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(null);
+      const dialogId = `${DefaultReactionSelector.getDialogId({
+        messageId: message.id,
+        threadList,
+      })}-dropdown`;
+      const { dialog, dialogManager } = useDialogOnNearestManager({
+        id: dialogId,
+      });
+      const dialogIsOpen = useDialogIsOpen(dialogId, dialogManager?.id);
+
+      return (
+        <>
+          <DialogAnchor
+            dialogManagerId={dialogManager?.id}
+            id={dialogId}
+            offset={8}
+            placement={isMyMessage() ? 'top-end' : 'top-start'}
+            referenceElement={referenceElement}
+            trapFocus
+            updatePositionOnContentResize
+          >
+            <ReactionSelector dialogId={dialogId} />
+          </DialogAnchor>
+          <ContextMenuButton
+            aria-expanded={dialogIsOpen}
+            aria-label={t('aria/Open Reaction Selector')}
+            className={clsx(
+              msgActionsBoxButtonClassName,
+              'str-chat__message-actions-list-item-button--react',
+            )}
+            data-testid='dropdown-react-action'
+            Icon={IconEmoji}
+            onClick={(event) => {
+              if (dialogIsOpen) {
+                dialog.close();
+                return;
+              }
+              setReferenceElement(
+                anchorReferenceElement instanceof HTMLElement
+                  ? anchorReferenceElement
+                  : event.currentTarget,
+              );
+              dialog.open();
+            }}
+          >
+            {t('Add reaction')}
+          </ContextMenuButton>
+        </>
+      );
+    },
     ThreadReply() {
       const { closeMenu } = useContextMenuContext();
       const { handleOpenThread } = useMessageContext();
@@ -586,13 +643,20 @@ const DefaultMessageActionComponents = {
     // eslint-disable-next-line react/display-name
     DropdownToggle: forwardRef<HTMLButtonElement>((_, ref) => {
       const { t } = useTranslationContext();
-      const { message } = useMessageContext();
+      const { message, threadList } = useMessageContext();
       const dropdownDialogIsOpen = useDialogIsOpen(
         MessageActions.getDialogId({ messageId: message.id }),
       );
       const { dialog } = useDialogOnNearestManager({
         id: MessageActions.getDialogId({ messageId: message.id }),
       });
+      const reactionSelectorDialogId = DefaultReactionSelector.getDialogId({
+        messageId: message.id,
+        threadList,
+      });
+      const { dialog: dropdownReactionSelectorDialog } = useDialogOnNearestManager({
+        id: `${reactionSelectorDialogId}-dropdown`,
+      });
 
       return (
         <QuickMessageActionsButton
@@ -602,6 +666,9 @@ const DefaultMessageActionComponents = {
           className='str-chat__message-actions-box-button'
           data-testid='message-actions-toggle-button'
           onClick={() => {
+            // Close dropdown-anchored reaction selectors before toggling actions menu
+            // to avoid stale selector re-anchoring.
+            dropdownReactionSelectorDialog?.close();
             dialog?.toggle();
           }}
           ref={ref}
@@ -646,6 +713,11 @@ export const defaultMessageActionSet: MessageActionSetItem[] = [
     placement: 'quick',
     type: 'react',
   },
+  {
+    Component: DefaultMessageActionComponents.dropdown.React,
+    placement: 'dropdown',
+    type: 'react',
+  },
   {
     Component: DefaultMessageActionComponents.dropdown.ThreadReply,
     placement: 'dropdown',

src/components/MessageActions/MessageActions.tsx

@@ -81,6 +81,7 @@ export const MessageActions: MessageActionsInterface = ({
     messageId: message.id,
     threadList,
   });
+  const dropdownReactionSelectorDialogId = `${reactionSelectorDialogId}-dropdown`;
   const { dialog, dialogManager } = useDialogOnNearestManager({
     id: messageActionsDialogId,
   });
@@ -92,6 +93,10 @@ export const MessageActions: MessageActionsInterface = ({
     reactionSelectorDialogId,
     dialogManager?.id,
   );
+  const dropdownReactionSelectorDialogIsOpen = useDialogIsOpen(
+    dropdownReactionSelectorDialogId,
+    dialogManager?.id,
+  );
 
   // do not render anything if total action count is zero
   if (dropdownActionSet.length + quickActionSet.length === 0) {
@@ -102,7 +107,9 @@ export const MessageActions: MessageActionsInterface = ({
     <div
       className={clsx('str-chat__message-options', {
         'str-chat__message-options--active':
-          messageActionsDialogIsOpen || reactionSelectorDialogIsOpen,
+          messageActionsDialogIsOpen ||
+          reactionSelectorDialogIsOpen ||
+          dropdownReactionSelectorDialogIsOpen,
       })}
     >
       {quickDropdownToggleAction && dropdownActionSet.length > 0 && (
@@ -112,6 +119,8 @@ export const MessageActions: MessageActionsInterface = ({
           <ContextMenuComponent
             backLabel={t('Back')}
             className={clsx('str-chat__message-actions-box', {
+              'str-chat__message-actions-box--hidden':
+                dropdownReactionSelectorDialogIsOpen,
               'str-chat__message-actions-box--open': messageActionsDialogIsOpen,
             })}
             dialogManagerId={dialogManager?.id}

src/components/MessageActions/__tests__/MessageActions.test.tsx

@@ -49,6 +49,7 @@ const MESSAGE_ACTIONS_HOST_TEST_ID = 'message-actions-host';
 const dialogOverlayTestId = 'str-chat__dialog-overlay';
 const threadActionTestId = 'thread-action';
 const reactionActionTestId = 'message-reaction-action';
+const dropdownReactionActionTestId = 'dropdown-react-action';
 const reactionSelectorTestId = 'reaction-selector';
 
 const defaultMessageContextValue = {
@@ -557,6 +558,22 @@ describe('<MessageActions />', () => {
 
       expect(queryByTestId(reactionActionTestId)).not.toBeInTheDocument();
     });
+
+    it('should display reaction action at the top of dropdown list', async () => {
+      const { container } = await renderMessageActions({
+        channelStateOpts: {
+          channelCapabilities: { 'send-reaction': true },
+        },
+      });
+      await toggleOpenMessageActions();
+
+      const contextMenuButtons = container.querySelectorAll(
+        '.str-chat__context-menu__button',
+      );
+
+      expect(contextMenuButtons[0]).toHaveTextContent('Add reaction');
+      expect(screen.getByTestId(dropdownReactionActionTestId)).toBeInTheDocument();
+    });
   });
 
   describe('Reaction selector', () => {
@@ -634,6 +651,75 @@ describe('<MessageActions />', () => {
 
       expect(actionsHost).toHaveClass('str-chat__message-options--active');
     });
+
+    it('should render ReactionSelector when dropdown reaction action is clicked', async () => {
+      await renderMessageActions({
+        channelStateOpts: {
+          channelCapabilities: { 'send-reaction': true },
+        },
+      });
+      await toggleOpenMessageActions();
+
+      await act(async () => {
+        await fireEvent.click(screen.getByTestId(dropdownReactionActionTestId));
+      });
+
+      const reactionSelector = screen.getByTestId(reactionSelectorTestId);
+      expect(reactionSelector).toBeInTheDocument();
+      expect(reactionSelector.closest('.str-chat__context-menu')).toBeNull();
+      const messageActionsMenu = document.querySelector('.str-chat__message-actions-box');
+      expect(messageActionsMenu).toBeInTheDocument();
+      expect(messageActionsMenu).toHaveClass('str-chat__message-actions-box--hidden');
+    });
+
+    it('should close ReactionSelector when dropdown reaction action is clicked while selector is open', async () => {
+      await renderMessageActions({
+        channelStateOpts: {
+          channelCapabilities: { 'send-reaction': true },
+        },
+      });
+      await toggleOpenMessageActions();
+
+      await act(async () => {
+        await fireEvent.click(screen.getByTestId(dropdownReactionActionTestId));
+      });
+
+      expect(screen.getByTestId(reactionSelectorTestId)).toBeInTheDocument();
+
+      await act(async () => {
+        await fireEvent.click(screen.getByTestId(dropdownReactionActionTestId));
+      });
+
+      await waitFor(() => {
+        expect(screen.queryByTestId(reactionSelectorTestId)).not.toBeInTheDocument();
+      });
+
+      const messageActionsMenu = document.querySelector('.str-chat__message-actions-box');
+      expect(messageActionsMenu).not.toHaveClass('str-chat__message-actions-box--hidden');
+    });
+
+    it('should close ReactionSelector when message actions toggle is clicked while dropdown selector is open', async () => {
+      await renderMessageActions({
+        channelStateOpts: {
+          channelCapabilities: { 'send-reaction': true },
+        },
+      });
+      await toggleOpenMessageActions();
+
+      await act(async () => {
+        await fireEvent.click(screen.getByTestId(dropdownReactionActionTestId));
+      });
+
+      expect(screen.getByTestId(reactionSelectorTestId)).toBeInTheDocument();
+
+      await act(async () => {
+        await fireEvent.click(screen.getByTestId(TOGGLE_ACTIONS_BUTTON_TEST_ID));
+      });
+
+      await waitFor(() => {
+        expect(screen.queryByTestId(reactionSelectorTestId)).not.toBeInTheDocument();
+      });
+    });
   });
 
   describe('Mark as unread action', () => {

src/components/MessageActions/styling/MessageActions.scss

@@ -2,6 +2,11 @@
 
 .str-chat__message-actions-box {
   min-width: 180px;
+
+  &.str-chat__message-actions-box--hidden {
+    visibility: hidden;
+    pointer-events: none;
+  }
 }
 
 .str-chat__message-options {
@@ -41,3 +46,22 @@
     position: relative;
   }
 }
+
+.str-chat
+  .str-chat__message-actions-list-item-button.str-chat__message-actions-list-item-button--react {
+  display: none;
+}
+
+@media (max-width: 767px) {
+  .str-chat .str-chat__message-options {
+    .str-chat__button.str-chat__message-reactions-button,
+    .str-chat__button.str-chat__message-reply-in-thread-button {
+      display: none;
+    }
+  }
+
+  .str-chat
+    .str-chat__message-actions-list-item-button.str-chat__message-actions-list-item-button--react {
+    display: flex;
+  }
+}