extract DropdownMenu components similar to existing one

Author: david-crespo

app/components/TopBar.tsx

@@ -5,16 +5,14 @@
  *
  * Copyright Oxide Computer Company
  */
-import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/react'
-import cn from 'classnames'
 import React from 'react'
-import { Link } from 'react-router-dom'
 
 import { navToLogin, useApiMutation } from '@oxide/api'
 import { DirectionDownIcon, Profile16Icon } from '@oxide/design-system/icons/react'
 
 import { useCurrentUser } from '~/layouts/AuthenticatedLayout'
 import { buttonStyle } from '~/ui/lib/Button'
+import * as DropdownMenu from '~/ui/lib/DropdownMenu2'
 import { pb } from '~/util/path-builder'
 
 export function TopBar({ children }: { children: React.ReactNode }) {
@@ -42,42 +40,27 @@ export function TopBar({ children }: { children: React.ReactNode }) {
         <div className="mx-3 flex h-[60px] shrink-0 items-center justify-between">
           <div className="flex items-center">{otherPickers}</div>
           <div className="flex items-center gap-2">
-            <Menu>
-              <MenuButton
-                className={cn(
-                  'flex items-center gap-2',
-                  buttonStyle({ size: 'sm', variant: 'secondary' })
-                )}
+            <DropdownMenu.Root>
+              <DropdownMenu.Trigger
+                className={buttonStyle({ size: 'sm', variant: 'secondary' })}
                 aria-label="User menu"
               >
-                <Profile16Icon className="text-quaternary" />
-                <span className="normal-case text-sans-md text-secondary">
-                  {me.displayName || 'User'}
+                <span className="flex items-center gap-2">
+                  <Profile16Icon className="text-quaternary" />
+                  <span className="normal-case text-sans-md text-secondary">
+                    {me.displayName || 'User'}
+                  </span>
+                  <DirectionDownIcon className="!w-2.5" />
                 </span>
-                <DirectionDownIcon className="!w-2.5" />
-              </MenuButton>
+              </DropdownMenu.Trigger>
               {/* TODO: fix hover style + should be able to click anywhere in the menu item */}
-              <MenuItems
-                anchor="bottom end"
-                className="DropdownMenuContent [--anchor-gap:8px]"
-              >
-                {/* TODO: extract Item and LinkItem components*/}
-                <MenuItem>
-                  <Link className="DropdownMenuItem ox-menu-item" to={pb.profile()}>
-                    Settings
-                  </Link>
-                </MenuItem>
-                <MenuItem>
-                  <button
-                    type="button"
-                    onClick={() => logout.mutate({})}
-                    className="DropdownMenuItem ox-menu-item"
-                  >
-                    Sign out
-                  </button>
-                </MenuItem>
-              </MenuItems>
-            </Menu>
+              <DropdownMenu.Items>
+                <DropdownMenu.LinkItem to={pb.profile()}>Settings</DropdownMenu.LinkItem>
+                <DropdownMenu.Item onSelect={() => logout.mutate({})}>
+                  Sign out
+                </DropdownMenu.Item>
+              </DropdownMenu.Items>
+            </DropdownMenu.Root>
           </div>
         </div>
       </div>

app/ui/lib/DropdownMenu2.tsx

@@ -0,0 +1,61 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, you can obtain one at https://mozilla.org/MPL/2.0/.
+ *
+ * Copyright Oxide Computer Company
+ */
+
+import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/react'
+import cn from 'classnames'
+import { forwardRef, type ForwardedRef, type ReactNode } from 'react'
+import { Link } from 'react-router-dom'
+
+export const Root = Menu
+
+export const Trigger = MenuButton
+
+export function Items({ children }: { children: ReactNode }) {
+  return (
+    <MenuItems
+      anchor="bottom end"
+      className="DropdownMenuContent [--anchor-gap:8px]"
+      // necessary to turn off scroll locking so the scrollbar doesn't pop in
+      // and out as menu closes and opens
+      modal={false}
+    >
+      {children}
+    </MenuItems>
+  )
+}
+
+type LinkItemProps = { className?: string; to: string; children: ReactNode }
+
+export function LinkItem({ className, to, children }: LinkItemProps) {
+  return (
+    <MenuItem>
+      <Link className={cn('DropdownMenuItem ox-menu-item', className)} to={to}>
+        {children}
+      </Link>
+    </MenuItem>
+  )
+}
+
+type ButtonRef = ForwardedRef<HTMLButtonElement>
+type ItemProps = { className?: string; onSelect: () => void; children: ReactNode }
+
+// need to forward ref because of tooltips on disabled menu buttons
+export const Item = forwardRef(
+  ({ className, onSelect, children }: ItemProps, ref: ButtonRef) => (
+    <MenuItem>
+      <button
+        type="button"
+        className={cn('DropdownMenuItem ox-menu-item', className)}
+        ref={ref}
+        onClick={onSelect}
+      >
+        {children}
+      </button>
+    </MenuItem>
+  )
+)