refactor: Create MessageMenu component and replace it (#1131)

[CLNP-3260](https://sendbird.atlassian.net/browse/CLNP-3260)

### Feature
* Created `MessageMenuProvider`, `useMessageMenuContext`, and
`MessageMenu` component
* Replaced the `MessageItemMenu` to `MessageMenu` only in the
**GroupChannel**
  (I will apply it to the Thread in a different PR)
* Migrated the `MobileContextMenu` and `MobileBottomSheet` using the
`MessageMenuProvider`

#### ChangeLog
```md
* MessageMenu
  * Created `MessageMenuProvider`, `useMessageMenuContext`, and `MessageMenu` for the message menus in GroupChannel.
    ```
    import { MessageMenu, MessageMenuProvider, useMessageMenuContext } from '@sendbird/uikit-react/ui/MessageMenu';
    ```
  * Replaced the `MessageItemMenu` component to the `MessageMenu` component.
  * Migrated the `MobileContextMenu` and `MobileBottomSheet` by applying the `MessageMenuProvider`.
```

Author: HoonBaek

rollup.module-exports.mjs

@@ -198,6 +198,7 @@ export default {
   'ui/MessageInput/hooks/usePaste': 'src/ui/MessageInput/hooks/usePaste/index.ts',
   'ui/MessageItemMenu': 'src/ui/MessageItemMenu/index.tsx',
   'ui/MessageItemReactionMenu': 'src/ui/MessageItemReactionMenu/index.tsx',
+  'ui/MessageMenu': 'src/ui/MessageMenu/index.tsx',
   'ui/MessageSearchFileItem': 'src/ui/MessageSearchFileItem/index.tsx',
   'ui/MessageSearchItem': 'src/ui/MessageSearchItem/index.tsx',
   'ui/MessageStatus': 'src/ui/MessageStatus/index.tsx',

src/hooks/useElementObserver.ts

@@ -0,0 +1,55 @@
+/* global MutationCallback */
+/* global MutationObserverInit */
+// To prevent Undefined lint errors: https://github.com/standard/standard/issues/1159#issuecomment-403003627
+
+import { useEffect, useState } from 'react';
+
+function useElementObserver(selector: string, targetElement?: HTMLElement | HTMLElement[] | null): boolean {
+  const [isElementMounted, setIsElementMounted] = useState<boolean>(false);
+
+  useEffect(() => {
+    const targetElements = Array.isArray(targetElement) ? targetElement : [targetElement];
+
+    const updateElementState = () => {
+      const elements = targetElements?.map(target => target?.querySelector(selector));
+      setIsElementMounted(elements?.some(element => !!element) ?? false);
+    };
+    updateElementState();
+
+    const observerCallback: MutationCallback = (mutations) => {
+      mutations.forEach((mutation) => {
+        if (mutation.addedNodes.length || mutation.removedNodes.length) {
+          Array.from(mutation.addedNodes).forEach((node) => {
+            if (node.nodeType === Node.ELEMENT_NODE && (node as Element).matches(selector)) {
+              setIsElementMounted(true);
+            }
+          });
+
+          Array.from(mutation.removedNodes).forEach((node) => {
+            if (node.nodeType === Node.ELEMENT_NODE && (node as Element).matches(selector)) {
+              setIsElementMounted(false);
+            }
+          });
+        }
+      });
+    };
+
+    const observer = new MutationObserver(observerCallback);
+    const observerOptions: MutationObserverInit = {
+      childList: true, // Observe addition and removal of child nodes
+      subtree: true, // Observe the entire subtree
+    };
+
+    targetElements?.forEach(target => {
+      if (target) observer.observe(target, observerOptions);
+    });
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [selector, targetElement]);
+
+  return isElementMounted;
+}
+
+export default useElementObserver;

src/modules/Thread/components/ParentMessageInfo/index.tsx

@@ -324,7 +324,6 @@ export default function ParentMessageInfo({
           userId={userId}
           emojiContainer={emojiContainer}
           toggleReaction={toggleReaction}
-          setSupposedHover={setSupposedHover}
         />
       )}
       {showRemove && (

src/modules/Thread/components/ThreadList/ThreadListItemContent.tsx

@@ -206,7 +206,6 @@ export default function ThreadListItemContent({
                 userId={userId}
                 emojiContainer={emojiContainer}
                 toggleReaction={toggleReaction}
-                setSupposedHover={setSupposedHover}
               />
             )}
           </div>
@@ -357,7 +356,6 @@ export default function ThreadListItemContent({
                 userId={userId}
                 emojiContainer={emojiContainer}
                 toggleReaction={toggleReaction}
-                setSupposedHover={setSupposedHover}
               />
             )}
             <MessageItemMenu

src/ui/ContextMenu/EmojiListItems.tsx

@@ -3,11 +3,13 @@ import { createPortal } from 'react-dom';
 
 import SortByRow from '../SortByRow';
 import { Nullable } from '../../types';
+import { EMOJI_MENU_ROOT_ID, MENU_OBSERVING_CLASS_NAME } from '.';
 
 const defaultParentRect = { x: 0, y: 0, left: 0, top: 0, height: 0 };
 type SpaceFromTrigger = { x: number, y: number };
 type ReactionStyle = { left: number, top: number };
 export interface EmojiListItemsProps {
+  id?: string;
   closeDropdown: () => void;
   children: ReactNode;
   parentRef: RefObject<HTMLDivElement>;
@@ -16,6 +18,7 @@ export interface EmojiListItemsProps {
 }
 
 export const EmojiListItems = ({
+  id,
   children,
   parentRef,
   parentContainRef,
@@ -86,11 +89,11 @@ export const EmojiListItems = ({
     }
   }, []);
 
-  const rootElement = document.getElementById('sendbird-emoji-list-portal');
+  const rootElement = document.getElementById(EMOJI_MENU_ROOT_ID);
   if (rootElement) {
     return (
       createPortal(
-        <>
+        <div className={MENU_OBSERVING_CLASS_NAME} id={id}>
           <div className="sendbird-dropdown__menu-backdrop" />
           <ul
             className="sendbird-dropdown__reaction-bar"
@@ -112,7 +115,7 @@ export const EmojiListItems = ({
               {children}
             </SortByRow>
           </ul>
-        </>,
+        </div>,
         rootElement,
       )
     );

src/ui/ContextMenu/MenuItems.tsx

@@ -1,7 +1,10 @@
 import React, { ReactElement } from 'react';
 import { createPortal } from 'react-dom';
+import { classnames } from '../../utils/utils';
+import { MENU_OBSERVING_CLASS_NAME } from '.';
 
 interface MenuItemsProps {
+  id?: string;
   className?: string;
   testID?: string;
   style?: Record<string, string>;
@@ -107,11 +110,11 @@ export default class MenuItems extends React.Component<MenuItemsProps, MenuItems
       return <></>;
 
     const { menuStyle } = this.state;
-    const { children, style, className = '', testID } = this.props;
+    const { children, style, className = '', testID, id } = this.props;
     return (
       createPortal(
         (
-          <div className={className} data-testid={testID}>
+          <div className={classnames(MENU_OBSERVING_CLASS_NAME, className)} data-testid={testID} id={id}>
             <div className="sendbird-dropdown__menu-backdrop" />
             <ul
               className={`${className} sendbird-dropdown__menu`}

src/ui/ContextMenu/index.tsx

@@ -11,6 +11,10 @@ import Label, { LabelTypography, LabelColors } from '../Label';
 
 const ENTER_KEY = 13;
 
+// # useElementObserve
+export const MENU_OBSERVING_CLASS_NAME = 'sendbird-observing-message-menu';
+export const getObservingId = (txt: string | number) => `m_${txt}`;
+
 export const MenuItems = _MenuItems;
 export const EmojiListItems = _EmojiListItems;
 
@@ -60,15 +64,14 @@ export const MenuItem = ({
   );
 };
 
+export const MENU_ROOT_ID = 'sendbird-dropdown-portal';
 export const MenuRoot = (): ReactElement => (
-  <div
-    id="sendbird-dropdown-portal"
-    className="sendbird-dropdown-portal"
-  />
+  <div id={MENU_ROOT_ID} className={MENU_ROOT_ID} />
 );
 
 // For the test environment
-export const EmojiReactionListRoot = (): ReactElement => <div id="sendbird-emoji-list-portal" />;
+export const EMOJI_MENU_ROOT_ID = 'sendbird-emoji-list-portal';
+export const EmojiReactionListRoot = (): ReactElement => <div id={EMOJI_MENU_ROOT_ID} />;
 
 type MenuDisplayingFunc = () => void;
 export interface ContextMenuProps {

src/ui/MessageContent/__tests__/__snapshots__/MessageContent.spec.js.snap

@@ -77,32 +77,26 @@ exports[`ui/MessageContent should do a snapshot test of the MessageContent DOM 1
         class="sendbird-message-content-menu incoming"
       >
         <div
-          class="sendbird-message-content-menu__normal-menu sendbird-message-item-menu"
+          class="sendbird-message-menu sendbird-message-content-menu__normal-menu"
         >
-          <div
-            class="sendbird-context-menu"
-            style="display: inline;"
+          <button
+            class=" sendbird-iconbutton "
+            style="height: 32px; width: 32px;"
+            type="button"
           >
-            <button
-              class="sendbird-message-item-menu__trigger sendbird-iconbutton "
-              style="height: 32px; width: 32px;"
-              type="button"
+            <span
+              class="sendbird-iconbutton__inner"
             >
-              <span
-                class="sendbird-iconbutton__inner"
+              <div
+                class=" sendbird-icon sendbird-icon-more sendbird-icon-color--content-inverse"
+                role="button"
+                style="width: 24px; min-width: 24px; height: 24px; min-height: 24px;"
+                tabindex="0"
               >
-                <div
-                  class="sendbird-message-item-menu__trigger__icon sendbird-icon sendbird-icon-more sendbird-icon-color--content-inverse"
-                  data-testid="sendbird-message-item-menu__trigger__icon"
-                  role="button"
-                  style="width: 24px; min-width: 24px; height: 24px; min-height: 24px;"
-                  tabindex="0"
-                >
-                  <test-file-stub />
-                </div>
-              </span>
-            </button>
-          </div>
+                <test-file-stub />
+              </div>
+            </span>
+          </button>
         </div>
       </div>
     </div>

src/ui/MessageContent/index.tsx

@@ -3,7 +3,7 @@ import format from 'date-fns/format';
 import './index.scss';
 
 import MessageStatus from '../MessageStatus';
-import { MessageMenu, MessageMenuProps } from '../MessageItemMenu';
+import { MessageMenu, type MessageMenuProps } from '../MessageMenu';
 import { MessageEmojiMenu, MessageEmojiMenuProps } from '../MessageItemReactionMenu';
 import Label, { LabelColors, LabelTypography } from '../Label';
 import EmojiReactions, { EmojiReactionsProps } from '../EmojiReactions';
@@ -46,6 +46,8 @@ import MessageFeedbackModal from '../MessageFeedbackModal';
 import { SbFeedbackStatus } from './types';
 import MessageFeedbackFailedModal from '../MessageFeedbackFailedModal';
 import { MobileBottomSheetProps } from '../MobileMenu/types';
+import useElementObserver from '../../hooks/useElementObserver';
+import { EMOJI_MENU_ROOT_ID, getObservingId, MENU_OBSERVING_CLASS_NAME, MENU_ROOT_ID } from '../ContextMenu';
 
 export interface MessageContentProps {
   className?: string | Array<string>;
@@ -131,15 +133,21 @@ export default function MessageContent(props: MessageContentProps): ReactElement
   const { config, eventHandlers } = useSendbirdStateContext();
   const { logger } = config;
   const onPressUserProfileHandler = eventHandlers?.reaction?.onPressUserProfile;
-  const contentRef = useRef(null);
+  const contentRef = useRef<HTMLDivElement>();
   const timestampRef = useRef<HTMLDivElement>();
   const threadRepliesRef = useRef<HTMLDivElement>();
   const feedbackButtonsRef = useRef<HTMLDivElement>();
   const { isMobile } = useMediaQueryContext();
   const [showMenu, setShowMenu] = useState(false);
 
   const [mouseHover, setMouseHover] = useState(false);
-  const [supposedHover, setSupposedHover] = useState(false);
+  const isMenuMounted = useElementObserver(
+    `#${getObservingId(message.messageId)}.${MENU_OBSERVING_CLASS_NAME}`,
+    [
+      document.getElementById(MENU_ROOT_ID),
+      document.getElementById(EMOJI_MENU_ROOT_ID),
+    ],
+  );
   // Feedback states
   const [showFeedbackOptionsMenu, setShowFeedbackOptionsMenu] = useState(false);
   const [showFeedbackModal, setShowFeedbackModal] = useState(false);
@@ -169,7 +177,7 @@ export default function MessageContent(props: MessageContentProps): ReactElement
   const chainTopClassName = chainTop ? 'chain-top' : '';
   const isReactionEnabledInChannel = isReactionEnabled && !channel?.isEphemeral;
   const isReactionEnabledClassName = isReactionEnabledInChannel ? 'use-reactions' : '';
-  const supposedHoverClassName = supposedHover ? 'sendbird-mouse-hover' : '';
+  const hoveredMenuClassName = isMenuMounted ? 'sendbird-mouse-hover' : '';
   const useReplying = !!((replyType === 'QUOTE_REPLY' || replyType === 'THREAD')
     && message?.parentMessageId && message?.parentMessage
     && !disableQuoteMessage
@@ -279,18 +287,16 @@ export default function MessageContent(props: MessageContentProps): ReactElement
         }
         {/* outgoing menu */}
         {showOutgoingMenu && (
-          <div className={classnames('sendbird-message-content-menu', isReactionEnabledClassName, supposedHoverClassName, isByMeClassName)}>
+          <div className={classnames('sendbird-message-content-menu', isReactionEnabledClassName, hoveredMenuClassName, isByMeClassName)}>
             {renderMessageMenu({
               channel,
               message,
               isByMe,
               replyType,
-              disabled,
               showEdit,
               showRemove,
               resendMessage,
               setQuoteMessage,
-              setSupposedHover,
               onReplyInThread: ({ message }) => {
                 if (threadReplySelectType === ThreadReplySelectType.THREAD) {
                   onReplyInThread?.({ message });
@@ -306,7 +312,6 @@ export default function MessageContent(props: MessageContentProps): ReactElement
                 userId,
                 emojiContainer,
                 toggleReaction,
-                setSupposedHover,
               })
             )}
           </div>
@@ -367,7 +372,7 @@ export default function MessageContent(props: MessageContentProps): ReactElement
               className={classnames(
                 'sendbird-message-content__middle__body-container__created-at',
                 'left',
-                supposedHoverClassName,
+                hoveredMenuClassName,
                 uiContainerType,
               )}
               ref={timestampRef}
@@ -423,7 +428,7 @@ export default function MessageContent(props: MessageContentProps): ReactElement
               className={classnames(
                 'sendbird-message-content__middle__body-container__created-at',
                 'right',
-                supposedHoverClassName,
+                hoveredMenuClassName,
                 uiContainerType,
               )}
               type={LabelTypography.CAPTION_3}
@@ -519,15 +524,14 @@ export default function MessageContent(props: MessageContentProps): ReactElement
           className={classnames('sendbird-message-content__right', chainTopClassName, isReactionEnabledClassName, useReplyingClassName)}
           data-testid="sendbird-message-content__right"
         >
-          <div className={classnames('sendbird-message-content-menu', chainTopClassName, supposedHoverClassName, isByMeClassName)}>
+          <div className={classnames('sendbird-message-content-menu', chainTopClassName, hoveredMenuClassName, isByMeClassName)}>
             {isReactionEnabledInChannel && (
               renderEmojiMenu({
                 className: 'sendbird-message-content-menu__reaction-menu',
                 message,
                 userId,
                 emojiContainer,
                 toggleReaction,
-                setSupposedHover,
               })
             )}
             {renderMessageMenu({
@@ -536,11 +540,9 @@ export default function MessageContent(props: MessageContentProps): ReactElement
               message,
               isByMe,
               replyType,
-              disabled,
               showRemove,
               resendMessage,
               setQuoteMessage,
-              setSupposedHover,
               onReplyInThread: ({ message }) => {
                 if (threadReplySelectType === ThreadReplySelectType.THREAD) {
                   onReplyInThread?.({ message });