♻️ (tooltip) refactoring to react-aria (vol.9) (#2826)

actualbudget · Jun 16, 2024 · 64cd6ee · 64cd6ee
1 parent abc4636
commit 64cd6ee
Show file tree

Hide file tree

Showing 7 changed files with 137 additions and 233 deletions.
diff --git a/packages/desktop-client/src/components/accounts/Header.jsx b/packages/desktop-client/src/components/accounts/Header.jsx
@@ -19,7 +19,7 @@ import { InitialFocus } from '../common/InitialFocus';
 import { Input } from '../common/Input';
 import { Menu } from '../common/Menu';
 import { MenuButton } from '../common/MenuButton';
-import { MenuTooltip } from '../common/MenuTooltip';
+import { Popover } from '../common/Popover';
 import { Search } from '../common/Search';
 import { Stack } from '../common/Stack';
 import { View } from '../common/View';
@@ -29,7 +29,7 @@ import { NotesButton } from '../NotesButton';
 import { SelectedTransactionsButton } from '../transactions/SelectedTransactions';
 
 import { Balances } from './Balance';
-import { ReconcilingMessage, ReconcileTooltip } from './Reconcile';
+import { ReconcilingMessage, ReconcileMenu } from './Reconcile';
 
 export function AccountHeader({
   filteredAmount,
@@ -86,6 +86,7 @@ export function AccountHeader({
 }) {
   const [menuOpen, setMenuOpen] = useState(false);
   const searchInput = useRef(null);
+  const triggerRef = useRef(null);
   const splitsExpanded = useSplitsExpanded();
   const syncServerStatus = useSyncServerStatus();
   const isUsingServer = syncServerStatus !== 'no-server';
@@ -338,9 +339,14 @@ export function AccountHeader({
           </Button>
           {account ? (
             <View>
-              <MenuButton onClick={() => setMenuOpen(true)} />
+              <MenuButton ref={triggerRef} onClick={() => setMenuOpen(true)} />
 
-              {menuOpen && (
+              <Popover
+                triggerRef={triggerRef}
+                style={{ width: 275 }}
+                isOpen={menuOpen}
+                onOpenChange={() => setMenuOpen(false)}
+              >
                 <AccountMenu
                   account={account}
                   canSync={canSync}
@@ -356,22 +362,31 @@ export function AccountHeader({
                   onReconcile={onReconcile}
                   onClose={() => setMenuOpen(false)}
                 />
-              )}
+              </Popover>
             </View>
           ) : (
             <View>
-              <MenuButton onClick={() => setMenuOpen(true)} />
+              <MenuButton ref={triggerRef} onClick={() => setMenuOpen(true)} />
 
-              {menuOpen && (
-                <CategoryMenu
+              <Popover
+                triggerRef={triggerRef}
+                isOpen={menuOpen}
+                onOpenChange={() => setMenuOpen(false)}
+              >
+                <Menu
                   onMenuSelect={item => {
                     setMenuOpen(false);
                     onMenuSelect(item);
                   }}
-                  onClose={() => setMenuOpen(false)}
-                  isSorted={isSorted}
+                  items={[
+                    isSorted && {
+                      name: 'remove-sorting',
+                      text: 'Remove all sorting',
+                    },
+                    { name: 'export', text: 'Export' },
+                  ]}
                 />
-              )}
+              </Popover>
             </View>
           )}
         </Stack>
@@ -418,76 +433,54 @@ function AccountMenu({
   const syncServerStatus = useSyncServerStatus();
 
   return tooltip === 'reconcile' ? (
-    <ReconcileTooltip
+    <ReconcileMenu
       account={account}
       onClose={onClose}
       onReconcile={onReconcile}
     />
   ) : (
-    <MenuTooltip width={200} onClose={onClose}>
-      <Menu
-        onMenuSelect={item => {
-          if (item === 'reconcile') {
-            setTooltip('reconcile');
-          } else {
-            onMenuSelect(item);
-          }
-        }}
-        items={[
-          isSorted && {
-            name: 'remove-sorting',
-            text: 'Remove all sorting',
-          },
-          canShowBalances && {
-            name: 'toggle-balance',
-            text: (showBalances ? 'Hide' : 'Show') + ' running balance',
-          },
-          {
-            name: 'toggle-cleared',
-            text: (showCleared ? 'Hide' : 'Show') + ' “cleared” checkboxes',
-          },
-          {
-            name: 'toggle-reconciled',
-            text:
-              (showReconciled ? 'Hide' : 'Show') + ' reconciled transactions',
-          },
-          { name: 'export', text: 'Export' },
-          { name: 'reconcile', text: 'Reconcile' },
-          account &&
-            !account.closed &&
-            (canSync
-              ? {
-                  name: 'unlink',
-                  text: 'Unlink account',
-                }
-              : syncServerStatus === 'online' && {
-                  name: 'link',
-                  text: 'Link account',
-                }),
-          account.closed
-            ? { name: 'reopen', text: 'Reopen account' }
-            : { name: 'close', text: 'Close account' },
-        ].filter(x => x)}
-      />
-    </MenuTooltip>
-  );
-}
-
-function CategoryMenu({ onClose, onMenuSelect, isSorted }) {
-  return (
-    <MenuTooltip width={200} onClose={onClose}>
-      <Menu
-        onMenuSelect={item => {
+    <Menu
+      onMenuSelect={item => {
+        if (item === 'reconcile') {
+          setTooltip('reconcile');
+        } else {
           onMenuSelect(item);
-        }}
-        items={[
-          isSorted && {
-            name: 'remove-sorting',
-            text: 'Remove all sorting',
-          },
-          { name: 'export', text: 'Export' },
-        ]}
-      />
-    </MenuTooltip>
+        }
+      }}
+      items={[
+        isSorted && {
+          name: 'remove-sorting',
+          text: 'Remove all sorting',
+        },
+        canShowBalances && {
+          name: 'toggle-balance',
+          text: (showBalances ? 'Hide' : 'Show') + ' running balance',
+        },
+        {
+          name: 'toggle-cleared',
+          text: (showCleared ? 'Hide' : 'Show') + ' “cleared” checkboxes',
+        },
+        {
+          name: 'toggle-reconciled',
+          text: (showReconciled ? 'Hide' : 'Show') + ' reconciled transactions',
+        },
+        { name: 'export', text: 'Export' },
+        { name: 'reconcile', text: 'Reconcile' },
+        account &&
+          !account.closed &&
+          (canSync
+            ? {
+                name: 'unlink',
+                text: 'Unlink account',
+              }
+            : syncServerStatus === 'online' && {
+                name: 'link',
+                text: 'Link account',
+              }),
+        account.closed
+          ? { name: 'reopen', text: 'Reopen account' }
+          : { name: 'close', text: 'Close account' },
+      ].filter(x => x)}
+    />
   );
 }
diff --git a/packages/desktop-client/src/components/accounts/Reconcile.jsx b/packages/desktop-client/src/components/accounts/Reconcile.jsx
@@ -12,7 +12,6 @@ import { Text } from '../common/Text';
 import { View } from '../common/View';
 import { useFormat } from '../spreadsheet/useFormat';
 import { useSheetValue } from '../spreadsheet/useSheetValue';
-import { Tooltip } from '../tooltips';
 
 export function ReconcilingMessage({
   balanceQuery,
@@ -95,7 +94,7 @@ export function ReconcilingMessage({
   );
 }
 
-export function ReconcileTooltip({ account, onReconcile, onClose }) {
+export function ReconcileMenu({ account, onReconcile, onClose }) {
   const balanceQuery = queries.accountBalance(account);
   const clearedBalance = useSheetValue({
     name: balanceQuery.name + '-cleared',
@@ -117,24 +116,22 @@ export function ReconcileTooltip({ account, onReconcile, onClose }) {
   }
 
   return (
-    <Tooltip position="bottom-right" width={275} onClose={onClose}>
-      <View style={{ padding: '5px 8px' }}>
-        <Text>
-          Enter the current balance of your bank account that you want to
-          reconcile with:
-        </Text>
-        <form onSubmit={onSubmit}>
-          {clearedBalance != null && (
-            <InitialFocus>
-              <Input
-                defaultValue={format(clearedBalance, 'financial')}
-                style={{ margin: '7px 0' }}
-              />
-            </InitialFocus>
-          )}
-          <Button type="primary">Reconcile</Button>
-        </form>
-      </View>
-    </Tooltip>
+    <View style={{ padding: '5px 8px' }}>
+      <Text>
+        Enter the current balance of your bank account that you want to
+        reconcile with:
+      </Text>
+      <form onSubmit={onSubmit}>
+        {clearedBalance != null && (
+          <InitialFocus>
+            <Input
+              defaultValue={format(clearedBalance, 'financial')}
+              style={{ margin: '7px 0' }}
+            />
+          </InitialFocus>
+        )}
+        <Button type="primary">Reconcile</Button>
+      </form>
+    </View>
   );
 }
diff --git a/packages/desktop-client/src/components/common/HoverTarget.tsx b/packages/desktop-client/src/components/common/HoverTarget.tsx
diff --git a/packages/desktop-client/src/components/common/MenuTooltip.tsx b/packages/desktop-client/src/components/common/MenuTooltip.tsx