From fc52deaf6de7831edd82fb6049f3a8acffa105b2 Mon Sep 17 00:00:00 2001
From: Matthew Russell <mattrussell36@gmail.com>
Date: Wed, 25 Jan 2023 15:13:47 -0800
Subject: [PATCH] chore: use portal by default for dropdown menus

---
 .../portfolio/account-history-container.tsx   | 34 ++++++++++-------
 .../vega-wallet-connect-button.tsx            | 24 +++++++-----
 libs/candles-chart/src/lib/candles-chart.tsx  | 32 ++++++++++------
 .../network-switcher/network-switcher.tsx     | 19 ++++++----
 .../dropdown-menu/dropdown-menu.stories.tsx   | 37 ++++++++++++-------
 .../dropdown-menu/dropdown-menu.tsx           | 18 ++++++++-
 6 files changed, 107 insertions(+), 57 deletions(-)

diff --git a/apps/trading/client-pages/portfolio/account-history-container.tsx b/apps/trading/client-pages/portfolio/account-history-container.tsx
index a414bb8bc..04a44fb7a 100644
--- a/apps/trading/client-pages/portfolio/account-history-container.tsx
+++ b/apps/trading/client-pages/portfolio/account-history-container.tsx
@@ -139,16 +139,19 @@ const AccountHistoryManager = ({
     <div className="h-full w-full flex flex-col gap-8">
       <div className="w-full flex flex-col-reverse lg:flex-row items-start lg:items-center justify-between gap-4 px-2">
         <div className="flex items-center gap-4 shrink-0">
-          <DropdownMenu>
-            <DropdownMenuTrigger>
-              {accountType
-                ? `${
-                    AccountTypeMapping[
-                      accountType as keyof typeof Schema.AccountType
-                    ]
-                  } Account`
-                : t('Select account type')}
-            </DropdownMenuTrigger>
+          <DropdownMenu
+            trigger={
+              <DropdownMenuTrigger>
+                {accountType
+                  ? `${
+                      AccountTypeMapping[
+                        accountType as keyof typeof Schema.AccountType
+                      ]
+                    } Account`
+                  : t('Select account type')}
+              </DropdownMenuTrigger>
+            }
+          >
             <DropdownMenuContent>
               {[
                 Schema.AccountType.ACCOUNT_TYPE_GENERAL,
@@ -164,10 +167,13 @@ const AccountHistoryManager = ({
               ))}
             </DropdownMenuContent>
           </DropdownMenu>
-          <DropdownMenu>
-            <DropdownMenuTrigger>
-              {asset ? asset.symbol : t('Select asset')}
-            </DropdownMenuTrigger>
+          <DropdownMenu
+            trigger={
+              <DropdownMenuTrigger>
+                {asset ? asset.symbol : t('Select asset')}
+              </DropdownMenuTrigger>
+            }
+          >
             <DropdownMenuContent>
               {assets.map((a) => (
                 <DropdownMenuItem key={a.id} onClick={() => setAsset(a)}>
diff --git a/apps/trading/components/vega-wallet-connect-button/vega-wallet-connect-button.tsx b/apps/trading/components/vega-wallet-connect-button/vega-wallet-connect-button.tsx
index 7833ca1b3..1109b61be 100644
--- a/apps/trading/components/vega-wallet-connect-button/vega-wallet-connect-button.tsx
+++ b/apps/trading/components/vega-wallet-connect-button/vega-wallet-connect-button.tsx
@@ -142,15 +142,21 @@ export const VegaWalletConnectButton = () => {
     return (
       <>
         <div className="hidden lg:block">
-          <DropdownMenu open={dropdownOpen}>
-            <DropdownMenuTrigger
-              data-testid="manage-vega-wallet"
-              onClick={() => setDropdownOpen((curr) => !curr)}
-            >
-              {activeKey && <span className="uppercase">{activeKey.name}</span>}
-              {': '}
-              {truncateByChars(pubKey)}
-            </DropdownMenuTrigger>
+          <DropdownMenu
+            open={dropdownOpen}
+            trigger={
+              <DropdownMenuTrigger
+                data-testid="manage-vega-wallet"
+                onClick={() => setDropdownOpen((curr) => !curr)}
+              >
+                {activeKey && (
+                  <span className="uppercase">{activeKey.name}</span>
+                )}
+                {': '}
+                {truncateByChars(pubKey)}
+              </DropdownMenuTrigger>
+            }
+          >
             <DropdownMenuContent
               onInteractOutside={() => setDropdownOpen(false)}
             >
diff --git a/libs/candles-chart/src/lib/candles-chart.tsx b/libs/candles-chart/src/lib/candles-chart.tsx
index 04ad908ab..abd873c9c 100644
--- a/libs/candles-chart/src/lib/candles-chart.tsx
+++ b/libs/candles-chart/src/lib/candles-chart.tsx
@@ -60,10 +60,13 @@ export const CandlesChartContainer = ({
   return (
     <div className="h-full flex flex-col">
       <div className="px-4 py-2 flex flex-row flex-wrap gap-4">
-        <DropdownMenu>
-          <DropdownMenuTrigger>
-            {t(`Interval: ${intervalLabels[interval]}`)}
-          </DropdownMenuTrigger>
+        <DropdownMenu
+          trigger={
+            <DropdownMenuTrigger>
+              {t(`Interval: ${intervalLabels[interval]}`)}
+            </DropdownMenuTrigger>
+          }
+        >
           <DropdownMenuContent>
             <DropdownMenuRadioGroup
               value={interval}
@@ -84,10 +87,13 @@ export const CandlesChartContainer = ({
             </DropdownMenuRadioGroup>
           </DropdownMenuContent>
         </DropdownMenu>
-        <DropdownMenu>
-          <DropdownMenuTrigger>
-            <Icon name={chartTypeIcon.get(chartType) as IconName} />
-          </DropdownMenuTrigger>
+        <DropdownMenu
+          trigger={
+            <DropdownMenuTrigger>
+              <Icon name={chartTypeIcon.get(chartType) as IconName} />
+            </DropdownMenuTrigger>
+          }
+        >
           <DropdownMenuContent>
             <DropdownMenuRadioGroup
               value={chartType}
@@ -104,8 +110,9 @@ export const CandlesChartContainer = ({
             </DropdownMenuRadioGroup>
           </DropdownMenuContent>
         </DropdownMenu>
-        <DropdownMenu>
-          <DropdownMenuTrigger>{t('Overlays')}</DropdownMenuTrigger>
+        <DropdownMenu
+          trigger={<DropdownMenuTrigger>{t('Overlays')}</DropdownMenuTrigger>}
+        >
           <DropdownMenuContent>
             {Object.values(Overlay).map((overlay) => (
               <DropdownMenuCheckboxItem
@@ -128,8 +135,9 @@ export const CandlesChartContainer = ({
             ))}
           </DropdownMenuContent>
         </DropdownMenu>
-        <DropdownMenu>
-          <DropdownMenuTrigger>{t('Studies')}</DropdownMenuTrigger>
+        <DropdownMenu
+          trigger={<DropdownMenuTrigger>{t('Studies')}</DropdownMenuTrigger>}
+        >
           <DropdownMenuContent>
             {Object.values(Study).map((study) => (
               <DropdownMenuCheckboxItem
diff --git a/libs/environment/src/components/network-switcher/network-switcher.tsx b/libs/environment/src/components/network-switcher/network-switcher.tsx
index fb8220a52..f849f6d3a 100644
--- a/libs/environment/src/components/network-switcher/network-switcher.tsx
+++ b/libs/environment/src/components/network-switcher/network-switcher.tsx
@@ -96,13 +96,18 @@ export const NetworkSwitcher = () => {
   const menuRef = useRef<HTMLButtonElement | null>(null);
 
   return (
-    <DropdownMenu open={isOpen} onOpenChange={handleOpen}>
-      <DropdownMenuTrigger
-        ref={menuRef}
-        className="flex justify-between items-center"
-      >
-        {envTriggerMapping[VEGA_ENV]}
-      </DropdownMenuTrigger>
+    <DropdownMenu
+      open={isOpen}
+      onOpenChange={handleOpen}
+      trigger={
+        <DropdownMenuTrigger
+          ref={menuRef}
+          className="flex justify-between items-center"
+        >
+          {envTriggerMapping[VEGA_ENV]}
+        </DropdownMenuTrigger>
+      }
+    >
       <DropdownMenuContent
         align="start"
         style={{ minWidth: `${menuRef.current?.offsetWidth || 290}px` }}
diff --git a/libs/ui-toolkit/src/components/dropdown-menu/dropdown-menu.stories.tsx b/libs/ui-toolkit/src/components/dropdown-menu/dropdown-menu.stories.tsx
index 1c8fcce22..66aef069e 100644
--- a/libs/ui-toolkit/src/components/dropdown-menu/dropdown-menu.stories.tsx
+++ b/libs/ui-toolkit/src/components/dropdown-menu/dropdown-menu.stories.tsx
@@ -29,16 +29,21 @@ export const CheckboxItems = () => {
   console.log(checkboxItems);
 
   return (
-    <DropdownMenu>
-      <DropdownMenuTrigger>
-        <span>Select many things</span>
-      </DropdownMenuTrigger>
+    <DropdownMenu
+      trigger={
+        <DropdownMenuTrigger>
+          <span>Select many things</span>
+        </DropdownMenuTrigger>
+      }
+    >
       <DropdownMenuContent>
         {checkboxItems.map(({ label, state: [checked, setChecked] }) => (
           <DropdownMenuCheckboxItem
             key={label}
             checked={checked}
-            onCheckedChange={setChecked}
+            onCheckedChange={(checked) =>
+              setChecked(typeof checked === 'boolean' ? checked : false)
+            }
           >
             {label}
             <DropdownMenuItemIndicator />
@@ -55,10 +60,13 @@ export const RadioItems = () => {
 
   return (
     <div style={{ textAlign: 'center', padding: 50 }}>
-      <DropdownMenu>
-        <DropdownMenuTrigger>
-          <span>Open</span>
-        </DropdownMenuTrigger>
+      <DropdownMenu
+        trigger={
+          <DropdownMenuTrigger>
+            <span>Open</span>
+          </DropdownMenuTrigger>
+        }
+      >
         <DropdownMenuContent>
           <DropdownMenuItem onSelect={() => console.log('minimize')}>
             Minimize window
@@ -92,10 +100,13 @@ export const IconMenu = () => {
 
   return (
     <div style={{ textAlign: 'center', padding: 50 }}>
-      <DropdownMenu>
-        <DropdownMenuTrigger>
-          <Icon name="cog" />
-        </DropdownMenuTrigger>
+      <DropdownMenu
+        trigger={
+          <DropdownMenuTrigger>
+            <Icon name="cog" />
+          </DropdownMenuTrigger>
+        }
+      >
         <DropdownMenuContent>
           {iconMenuItems.map(({ label }) => (
             <DropdownMenuItem key={label}>{label}</DropdownMenuItem>
diff --git a/libs/ui-toolkit/src/components/dropdown-menu/dropdown-menu.tsx b/libs/ui-toolkit/src/components/dropdown-menu/dropdown-menu.tsx
index 906efc934..8c000a171 100644
--- a/libs/ui-toolkit/src/components/dropdown-menu/dropdown-menu.tsx
+++ b/libs/ui-toolkit/src/components/dropdown-menu/dropdown-menu.tsx
@@ -1,5 +1,6 @@
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import classNames from 'classnames';
+import type { ReactNode } from 'react';
 import { forwardRef } from 'react';
 import { Icon } from '../icon';
 
@@ -12,11 +13,24 @@ const itemClass = classNames(
   'whitespace-nowrap'
 );
 
+type DropdownMenuProps = DropdownMenuPrimitive.DropdownMenuProps & {
+  trigger: ReactNode;
+};
 /**
  * Contains all the parts of a dropdown menu.
  */
-export const DropdownMenu = DropdownMenuPrimitive.Root;
-
+export const DropdownMenu = ({
+  children,
+  trigger,
+  ...props
+}: DropdownMenuProps) => {
+  return (
+    <DropdownMenuPrimitive.Root {...props}>
+      {trigger}
+      <DropdownMenuPrimitive.Portal>{children}</DropdownMenuPrimitive.Portal>
+    </DropdownMenuPrimitive.Root>
+  );
+};
 /**
  * The button that toggles the dropdown menu.
  * By default, the {@link DropdownMenuContent} will position itself against the trigger.