From 32c01806d6755e8402740b9828269845330153f0 Mon Sep 17 00:00:00 2001
From: Matvei Andrienko <m.y.andrienko@outlook.com>
Date: Thu, 18 Jan 2024 16:37:46 +0100
Subject: [PATCH] fix: get rid of positioning wrapper for message actions box
 (#2246)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

### 🎯 Goal

In #2241 we've added a new positioning wrapper for `MessageActionsBox`.
That was not the greatest idea, since adding new wrappers can break
custom CSS for the users.

Having a wrapper is not necessary in this case anyway. This PR
implements the same positioning as #2241, but without additional
wrappers.
---
 .../MessageActions/MessageActions.tsx         |  26 +-
 .../MessageActions/MessageActionsBox.tsx      | 238 +++++++++---------
 .../__tests__/MessageActions.test.js          |  41 +--
 3 files changed, 136 insertions(+), 169 deletions(-)

diff --git a/src/components/MessageActions/MessageActions.tsx b/src/components/MessageActions/MessageActions.tsx
index 53e583a57d..252b9f2427 100644
--- a/src/components/MessageActions/MessageActions.tsx
+++ b/src/components/MessageActions/MessageActions.tsx
@@ -134,24 +134,20 @@ export const MessageActions = <
       inline={inline}
       setActionsBoxOpen={setActionsBoxOpen}
     >
-      <div
+      <MessageActionsBox
         {...attributes.popper}
-        className='str-chat__message-actions-box-wrapper'
+        getMessageActions={getMessageActions}
+        handleDelete={handleDelete}
+        handleEdit={setEditingState}
+        handleFlag={handleFlag}
+        handleMute={handleMute}
+        handlePin={handlePin}
+        isUserMuted={isMuted}
+        mine={isMine}
+        open={actionsBoxOpen}
         ref={popperElementRef}
         style={styles.popper}
-      >
-        <MessageActionsBox
-          getMessageActions={getMessageActions}
-          handleDelete={handleDelete}
-          handleEdit={setEditingState}
-          handleFlag={handleFlag}
-          handleMute={handleMute}
-          handlePin={handlePin}
-          isUserMuted={isMuted}
-          mine={isMine}
-          open={actionsBoxOpen}
-        />
-      </div>
+      />
       <button
         aria-expanded={actionsBoxOpen}
         aria-haspopup='true'
diff --git a/src/components/MessageActions/MessageActionsBox.tsx b/src/components/MessageActions/MessageActionsBox.tsx
index 740d449251..bbcbb9e5ee 100644
--- a/src/components/MessageActions/MessageActionsBox.tsx
+++ b/src/components/MessageActions/MessageActionsBox.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ComponentProps } from 'react';
 import clsx from 'clsx';
 
 import { MESSAGE_ACTIONS } from '../Message/utils';
@@ -29,123 +29,127 @@ export type MessageActionsBoxProps<
   isUserMuted: () => boolean;
   mine: boolean;
   open: boolean;
-};
-
-const UnMemoizedMessageActionsBox = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
->(
-  props: MessageActionsBoxProps<StreamChatGenerics>,
-) => {
-  const {
-    getMessageActions,
-    handleDelete,
-    handleEdit,
-    handleFlag,
-    handleMute,
-    handlePin,
-    isUserMuted,
-    open = false,
-  } = props;
-
-  const {
-    CustomMessageActionsList = DefaultCustomMessageActionsList,
-  } = useComponentContext<StreamChatGenerics>('MessageActionsBox');
-  const { setQuotedMessage } = useChannelActionContext<StreamChatGenerics>('MessageActionsBox');
-  const { customMessageActions, message } = useMessageContext<StreamChatGenerics>(
-    'MessageActionsBox',
-  );
-
-  const { t } = useTranslationContext('MessageActionsBox');
-
-  const messageActions = getMessageActions();
-
-  const handleQuote = () => {
-    setQuotedMessage(message);
-
-    const elements = message.parent_id
-      ? document.querySelectorAll('.str-chat__thread .str-chat__textarea__textarea')
-      : document.getElementsByClassName('str-chat__textarea__textarea');
-    const textarea = elements.item(0);
-
-    if (textarea instanceof HTMLTextAreaElement) {
-      textarea.focus();
-    }
-  };
-
-  const rootClassName = clsx('str-chat__message-actions-box', {
-    'str-chat__message-actions-box--open': open,
-  });
-  const buttonClassName =
-    'str-chat__message-actions-list-item str-chat__message-actions-list-item-button';
-
-  return (
-    <div className={rootClassName} data-testid='message-actions-box'>
-      <div aria-label='Message Options' className='str-chat__message-actions-list' role='listbox'>
-        <CustomMessageActionsList customMessageActions={customMessageActions} message={message} />
-        {messageActions.indexOf(MESSAGE_ACTIONS.quote) > -1 && (
-          <button
-            aria-selected='false'
-            className={buttonClassName}
-            onClick={handleQuote}
-            role='option'
-          >
-            {t<string>('Reply')}
-          </button>
-        )}
-        {messageActions.indexOf(MESSAGE_ACTIONS.pin) > -1 && !message.parent_id && (
-          <button
-            aria-selected='false'
-            className={buttonClassName}
-            onClick={handlePin}
-            role='option'
-          >
-            {!message.pinned ? t<string>('Pin') : t<string>('Unpin')}
-          </button>
-        )}
-        {messageActions.indexOf(MESSAGE_ACTIONS.flag) > -1 && (
-          <button
-            aria-selected='false'
-            className={buttonClassName}
-            onClick={handleFlag}
-            role='option'
-          >
-            {t<string>('Flag')}
-          </button>
-        )}
-        {messageActions.indexOf(MESSAGE_ACTIONS.mute) > -1 && (
-          <button
-            aria-selected='false'
-            className={buttonClassName}
-            onClick={handleMute}
-            role='option'
-          >
-            {isUserMuted() ? t<string>('Unmute') : t<string>('Mute')}
-          </button>
-        )}
-        {messageActions.indexOf(MESSAGE_ACTIONS.edit) > -1 && (
-          <button
-            aria-selected='false'
-            className={buttonClassName}
-            onClick={handleEdit}
-            role='option'
-          >
-            {t<string>('Edit Message')}
-          </button>
-        )}
-        {messageActions.indexOf(MESSAGE_ACTIONS.delete) > -1 && (
-          <button
-            aria-selected='false'
-            className={buttonClassName}
-            onClick={handleDelete}
-            role='option'
-          >
-            {t<string>('Delete')}
-          </button>
-        )}
+} & ComponentProps<'div'>;
+
+const UnMemoizedMessageActionsBox = React.forwardRef(
+  <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(
+    props: MessageActionsBoxProps<StreamChatGenerics>,
+    ref: React.ForwardedRef<HTMLDivElement | null>,
+  ) => {
+    const {
+      getMessageActions,
+      handleDelete,
+      handleEdit,
+      handleFlag,
+      handleMute,
+      handlePin,
+      isUserMuted,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      mine,
+      open = false,
+      ...restDivProps
+    } = props;
+
+    const {
+      CustomMessageActionsList = DefaultCustomMessageActionsList,
+    } = useComponentContext<StreamChatGenerics>('MessageActionsBox');
+    const { setQuotedMessage } = useChannelActionContext<StreamChatGenerics>('MessageActionsBox');
+    const { customMessageActions, message } = useMessageContext<StreamChatGenerics>(
+      'MessageActionsBox',
+    );
+
+    const { t } = useTranslationContext('MessageActionsBox');
+
+    const messageActions = getMessageActions();
+
+    const handleQuote = () => {
+      setQuotedMessage(message);
+
+      const elements = message.parent_id
+        ? document.querySelectorAll('.str-chat__thread .str-chat__textarea__textarea')
+        : document.getElementsByClassName('str-chat__textarea__textarea');
+      const textarea = elements.item(0);
+
+      if (textarea instanceof HTMLTextAreaElement) {
+        textarea.focus();
+      }
+    };
+
+    const rootClassName = clsx('str-chat__message-actions-box', {
+      'str-chat__message-actions-box--open': open,
+    });
+    const buttonClassName =
+      'str-chat__message-actions-list-item str-chat__message-actions-list-item-button';
+
+    return (
+      <div {...restDivProps} className={rootClassName} data-testid='message-actions-box' ref={ref}>
+        <div aria-label='Message Options' className='str-chat__message-actions-list' role='listbox'>
+          <CustomMessageActionsList customMessageActions={customMessageActions} message={message} />
+          {messageActions.indexOf(MESSAGE_ACTIONS.quote) > -1 && (
+            <button
+              aria-selected='false'
+              className={buttonClassName}
+              onClick={handleQuote}
+              role='option'
+            >
+              {t<string>('Reply')}
+            </button>
+          )}
+          {messageActions.indexOf(MESSAGE_ACTIONS.pin) > -1 && !message.parent_id && (
+            <button
+              aria-selected='false'
+              className={buttonClassName}
+              onClick={handlePin}
+              role='option'
+            >
+              {!message.pinned ? t<string>('Pin') : t<string>('Unpin')}
+            </button>
+          )}
+          {messageActions.indexOf(MESSAGE_ACTIONS.flag) > -1 && (
+            <button
+              aria-selected='false'
+              className={buttonClassName}
+              onClick={handleFlag}
+              role='option'
+            >
+              {t<string>('Flag')}
+            </button>
+          )}
+          {messageActions.indexOf(MESSAGE_ACTIONS.mute) > -1 && (
+            <button
+              aria-selected='false'
+              className={buttonClassName}
+              onClick={handleMute}
+              role='option'
+            >
+              {isUserMuted() ? t<string>('Unmute') : t<string>('Mute')}
+            </button>
+          )}
+          {messageActions.indexOf(MESSAGE_ACTIONS.edit) > -1 && (
+            <button
+              aria-selected='false'
+              className={buttonClassName}
+              onClick={handleEdit}
+              role='option'
+            >
+              {t<string>('Edit Message')}
+            </button>
+          )}
+          {messageActions.indexOf(MESSAGE_ACTIONS.delete) > -1 && (
+            <button
+              aria-selected='false'
+              className={buttonClassName}
+              onClick={handleDelete}
+              role='option'
+            >
+              {t<string>('Delete')}
+            </button>
+          )}
+        </div>
       </div>
-    </div>
-  );
-};
+    );
+  },
+);
 
 /**
  * A popup box that displays the available actions on a message, such as edit, delete, pin, etc.
diff --git a/src/components/MessageActions/__tests__/MessageActions.test.js b/src/components/MessageActions/__tests__/MessageActions.test.js
index 59fc85afdc..8c137a9e3a 100644
--- a/src/components/MessageActions/__tests__/MessageActions.test.js
+++ b/src/components/MessageActions/__tests__/MessageActions.test.js
@@ -72,18 +72,7 @@ describe('<MessageActions /> component', () => {
         data-testid="message-actions"
         onClick={[Function]}
       >
-        <div
-          className="str-chat__message-actions-box-wrapper"
-          style={
-            Object {
-              "left": "0",
-              "position": "absolute",
-              "top": "0",
-            }
-          }
-        >
-          <div />
-        </div>
+        <div />
         <button
           aria-expanded={false}
           aria-haspopup="true"
@@ -117,7 +106,7 @@ describe('<MessageActions /> component', () => {
 
   it('should open message actions box on click', () => {
     const { getByTestId } = renderMessageActions();
-    expect(MessageActionsBoxMock).toHaveBeenLastCalledWith(
+    expect(MessageActionsBoxMock).toHaveBeenCalledWith(
       expect.objectContaining({ open: false }),
       {},
     );
@@ -254,18 +243,7 @@ describe('<MessageActions /> component', () => {
         data-testid="message-actions"
         onClick={[Function]}
       >
-        <div
-          className="str-chat__message-actions-box-wrapper"
-          style={
-            Object {
-              "left": "0",
-              "position": "absolute",
-              "top": "0",
-            }
-          }
-        >
-          <div />
-        </div>
+        <div />
         <button
           aria-expanded={false}
           aria-haspopup="true"
@@ -305,18 +283,7 @@ describe('<MessageActions /> component', () => {
         data-testid="message-actions"
         onClick={[Function]}
       >
-        <div
-          className="str-chat__message-actions-box-wrapper"
-          style={
-            Object {
-              "left": "0",
-              "position": "absolute",
-              "top": "0",
-            }
-          }
-        >
-          <div />
-        </div>
+        <div />
         <button
           aria-expanded={false}
           aria-haspopup="true"