From 2576d0bb9c34902d17b816f54588931784d8c603 Mon Sep 17 00:00:00 2001
From: Mihaela-Ioana Mot <32430018+mmioana@users.noreply.github.com>
Date: Wed, 6 Nov 2024 16:52:40 +0100
Subject: [PATCH] Fix: Use popper instead of portal for meatball menu

Fix: Use popper instead of portal for meatball menu
---
 .../v5/shared/MeatBallMenu/MeatBallMenu.tsx   | 152 +++++++++---------
 1 file changed, 76 insertions(+), 76 deletions(-)

diff --git a/src/components/v5/shared/MeatBallMenu/MeatBallMenu.tsx b/src/components/v5/shared/MeatBallMenu/MeatBallMenu.tsx
index 63bb6ceaec..faec995c17 100644
--- a/src/components/v5/shared/MeatBallMenu/MeatBallMenu.tsx
+++ b/src/components/v5/shared/MeatBallMenu/MeatBallMenu.tsx
@@ -1,11 +1,11 @@
 import { DotsThree, X } from '@phosphor-icons/react';
 import clsx from 'clsx';
 import React, { type FC } from 'react';
+import { usePopperTooltip } from 'react-popper-tooltip';
 
-import useRelativePortalElement from '~hooks/useRelativePortalElement.ts';
+import { useMobile } from '~hooks';
 import useToggle from '~hooks/useToggle/index.ts';
 import { formatText } from '~utils/intl.ts';
-import Portal from '~v5/shared/Portal/index.ts';
 
 import HoverWidthWrapper from '../HoverWidthWrapper/index.ts';
 import MenuContainer from '../MenuContainer/index.ts';
@@ -23,28 +23,32 @@ const MeatBallMenu: FC<MeatBallMenuProps> = ({
   renderItemWrapper = DEFAULT_ITEM_WRAPPER_RENDERER,
   withVerticalIcon,
   contentWrapperClassName,
-  dropdownPlacementProps,
   iconSize = 16,
 }) => {
-  const [
-    isMenuOpen,
-    { toggle: toggleMenu, toggleOff: toggleMenuOff, registerContainerRef },
-  ] = useToggle();
-  const { portalElementRef, relativeElementRef } = useRelativePortalElement<
-    HTMLButtonElement,
-    HTMLDivElement
-  >([isMenuOpen], dropdownPlacementProps);
+  const [isMenuOpen, { toggle: toggleMenu, toggleOff: toggleMenuOff }] =
+    useToggle();
+
+  const isMobile = useMobile();
+
+  const { getTooltipProps, setTooltipRef, setTriggerRef } = usePopperTooltip({
+    delayShow: 100,
+    delayHide: 100,
+    placement: 'auto-end',
+    trigger: ['click'],
+    interactive: true,
+    visible: isMenuOpen,
+    onVisibleChange: toggleMenu,
+  });
 
   if (!items.length) {
     throw new Error('There are no items added to the menu.');
   }
 
   return (
-    <div className={clsx(className, 'md:relative')} ref={registerContainerRef}>
+    <div className={clsx(className, 'relative')}>
       <button
         type="button"
-        ref={relativeElementRef}
-        onClick={disabled ? undefined : toggleMenu}
+        ref={setTriggerRef}
         aria-label={formatText({ id: 'ariaLabel.openMenu' })}
         className={clsx(
           typeof buttonClassName === 'function'
@@ -67,55 +71,52 @@ const MeatBallMenu: FC<MeatBallMenuProps> = ({
         />
       </button>
       {isMenuOpen && (
-        <Portal>
-          <MenuContainer
-            className={clsx(
-              contentWrapperClassName,
-              'absolute z-sidebar overflow-y-auto px-6 py-4',
-            )}
-            hasShadow
-            rounded="s"
-            ref={(ref) => {
-              registerContainerRef(ref);
-              portalElementRef.current = ref;
-            }}
-          >
-            <div className="mb-3 flex items-center justify-between sm:hidden">
-              <p className="uppercase text-gray-400 text-4">
-                {formatText({ id: 'meatballMenu.selectAction' })}
-              </p>
-              <button
-                type="button"
-                className="text-gray-400"
-                onClick={toggleMenuOff}
-              >
-                <X size={18} />
-              </button>
-            </div>
-            <ul>
-              {items.map(
-                ({
-                  key,
-                  label,
-                  onClick,
-                  icon: Icon,
-                  renderItemWrapper: itemRenderItemWrapper,
-                  className: itemClassName,
-                }) => (
-                  <li
-                    key={key}
-                    className={clsx(itemClassName, 'flex-shrink-0')}
-                  >
-                    <HoverWidthWrapper hoverClassName="w-full md:font-medium">
-                      {(itemRenderItemWrapper || renderItemWrapper)(
-                        {
-                          className: `
+        <MenuContainer
+          className={clsx(
+            contentWrapperClassName,
+            'absolute !right-0 z-sidebar w-fit min-w-fit overflow-y-auto px-6 py-4',
+            {
+              '-translate-x-full': isMobile,
+            },
+          )}
+          hasShadow
+          rounded="s"
+          {...getTooltipProps()}
+          ref={setTooltipRef}
+        >
+          <div className="mb-3 flex items-center justify-between sm:hidden">
+            <p className="uppercase text-gray-400 text-4">
+              {formatText({ id: 'meatballMenu.selectAction' })}
+            </p>
+            <button
+              type="button"
+              className="text-gray-400"
+              onClick={toggleMenuOff}
+            >
+              <X size={18} />
+            </button>
+          </div>
+          <ul>
+            {items.map(
+              ({
+                key,
+                label,
+                onClick,
+                icon: Icon,
+                renderItemWrapper: itemRenderItemWrapper,
+                className: itemClassName,
+              }) => (
+                <li key={key} className={clsx(itemClassName, 'flex-shrink-0')}>
+                  <HoverWidthWrapper hoverClassName="w-full md:font-medium">
+                    {(itemRenderItemWrapper || renderItemWrapper)(
+                      {
+                        className: `
                             flex
                             items-center
                             text-md
                             transition-colors
                             duration-normal
-                            md:hover:text-gray-900
+                            text-gray-900
                             md:hover:bg-gray-50
                             md:hover:font-medium
                             rounded
@@ -125,26 +126,25 @@ const MeatBallMenu: FC<MeatBallMenuProps> = ({
                             flex-grow
                             -mx-4
                           `,
-                          onClick: () => {
-                            if (onClick?.() === false) {
-                              return;
-                            }
+                        onClick: () => {
+                          if (onClick?.() === false) {
+                            return;
+                          }
 
-                            toggleMenuOff();
-                          },
+                          toggleMenuOff();
                         },
-                        <>
-                          {Icon ? <Icon size={16} /> : null}
-                          <span>{label}</span>
-                        </>,
-                      )}
-                    </HoverWidthWrapper>
-                  </li>
-                ),
-              )}
-            </ul>
-          </MenuContainer>
-        </Portal>
+                      },
+                      <>
+                        {Icon ? <Icon size={16} /> : null}
+                        <span className="whitespace-nowrap">{label}</span>
+                      </>,
+                    )}
+                  </HoverWidthWrapper>
+                </li>
+              ),
+            )}
+          </ul>
+        </MenuContainer>
       )}
     </div>
   );