fix: switch to new aria components

app/routes/machines/components/machine.tsx

@@ -79,6 +79,14 @@ export default function MachineRow({
 		tags.unshift('Subnets');
 	}
 
+	const ipOptions = useMemo(() => {
+		if (magic) {
+			return [...machine.ipAddresses, `${machine.givenName}.${prefix}`];
+		}
+
+		return machine.ipAddresses;
+	}, [magic, machine.ipAddresses]);
+
 	return (
 		<tr
 			key={machine.id}
@@ -108,46 +116,32 @@ export default function MachineRow({
 			<td className="py-2">
 				<div className="flex items-center gap-x-1">
 					{machine.ipAddresses[0]}
-					<Menu>
+					<Menu placement="bottom end">
 						<Menu.IconButton className="bg-transparent" label="IP Addresses">
 							<ChevronDownIcon className="w-4 h-4" />
 						</Menu.IconButton>
-						<Menu.Items>
-							{machine.ipAddresses.map((ip) => (
-								<Menu.ItemButton
-									key={ip}
-									type="button"
-									className={cn(
-										'flex items-center gap-x-1.5 text-sm',
-										'justify-between w-full',
-									)}
-									onPress={async () => {
-										await navigator.clipboard.writeText(ip);
-										toast('Copied IP address to clipboard');
-									}}
-								>
-									{ip}
-									<CopyIcon className="w-3 h-3" />
-								</Menu.ItemButton>
-							))}
-							{magic ? (
-								<Menu.ItemButton
-									type="button"
-									className={cn(
-										'flex items-center gap-x-1.5 text-sm',
-										'justify-between w-full break-keep',
-									)}
-									onPress={async () => {
-										const ip = `${machine.givenName}.${prefix}`;
-										await navigator.clipboard.writeText(ip);
-										toast('Copied hostname to clipboard');
-									}}
-								>
-									{machine.givenName}.{prefix}
-									<CopyIcon className="w-3 h-3" />
-								</Menu.ItemButton>
-							) : undefined}
-						</Menu.Items>
+						<Menu.Panel
+							onAction={async (key) => {
+								await navigator.clipboard.writeText(key.toString());
+								toast('Copied IP address to clipboard');
+							}}
+						>
+							<Menu.Section>
+								{ipOptions.map((ip) => (
+									<Menu.Item key={ip} textValue={ip}>
+										<div
+											className={cn(
+												'flex items-center justify-between',
+												'text-sm w-full gap-x-6',
+											)}
+										>
+											{ip}
+											<CopyIcon className="w-3 h-3" />
+										</div>
+									</Menu.Item>
+								))}
+							</Menu.Section>
+						</Menu.Panel>
 					</Menu>
 				</div>
 			</td>

app/routes/machines/components/menu.tsx

@@ -1,9 +1,8 @@
-import { KebabHorizontalIcon } from '@primer/octicons-react';
-import React, { useState } from 'react';
-import MenuComponent from '~/components/Menu';
+import { Cog, Ellipsis } from 'lucide-react';
+import { useState } from 'react';
+import Menu from '~/components/Menu';
 import type { Machine, Route, User } from '~/types';
 import { cn } from '~/utils/cn';
-
 import Delete from '../dialogs/delete';
 import Expire from '../dialogs/expire';
 import Move from '../dialogs/move';
@@ -16,17 +15,17 @@ interface MenuProps {
 	routes: Route[];
 	users: User[];
 	magic?: string;
-	buttonChild?: React.ReactNode;
+	isFullButton?: boolean;
 }
 
 type Modal = 'rename' | 'expire' | 'remove' | 'routes' | 'move' | 'tags' | null;
 
-export default function Menu({
+export default function MachineMenu({
 	machine,
 	routes,
 	magic,
 	users,
-	buttonChild,
+	isFullButton,
 }: MenuProps) {
 	const [modal, setModal] = useState<Modal>(null);
 
@@ -97,44 +96,45 @@ export default function Menu({
 				/>
 			)}
 
-			<MenuComponent>
-				{buttonChild ?? (
-					<MenuComponent.Button
+			<Menu>
+				{isFullButton ? (
+					<Menu.Button className="flex items-center gap-x-2">
+						<Cog className="h-5" />
+						<p>Machine Settings</p>
+					</Menu.Button>
+				) : (
+					<Menu.IconButton
+						label="Machine Options"
 						className={cn(
-							'flex items-center justify-center',
-							'border border-transparent rounded-lg py-0.5 w-10',
-							'group-hover:border-gray-200 dark:group-hover:border-zinc-700',
+							'py-0.5 w-10 bg-transparent border-transparent',
+							'border group-hover:border-headplane-200',
+							'dark:group-hover:border-headplane-700',
 						)}
 					>
-						<KebabHorizontalIcon className="w-5" />
-					</MenuComponent.Button>
+						<Ellipsis className="h-5" />
+					</Menu.IconButton>
 				)}
-				<MenuComponent.Items>
-					<MenuComponent.ItemButton onPress={() => setModal('rename')}>
-						Edit machine name
-					</MenuComponent.ItemButton>
-					<MenuComponent.ItemButton onPress={() => setModal('routes')}>
-						Edit route settings
-					</MenuComponent.ItemButton>
-					<MenuComponent.ItemButton onPress={() => setModal('tags')}>
-						Edit ACL tags
-					</MenuComponent.ItemButton>
-					<MenuComponent.ItemButton onPress={() => setModal('move')}>
-						Change owner
-					</MenuComponent.ItemButton>
-					{expired ? undefined : (
-						<MenuComponent.ItemButton onPress={() => setModal('expire')}>
-							Expire
-						</MenuComponent.ItemButton>
-					)}
-					<MenuComponent.ItemButton
-						className="text-red-500 dark:text-red-400"
-						onPress={() => setModal('remove')}
-					>
-						Remove
-					</MenuComponent.ItemButton>
-				</MenuComponent.Items>
-			</MenuComponent>
+				<Menu.Panel onAction={(key) => setModal(key as Modal)}>
+					<Menu.Section>
+						<Menu.Item key="rename">Edit machine name</Menu.Item>
+						<Menu.Item key="routes">Edit route settings</Menu.Item>
+						<Menu.Item key="tags">Edit ACL tags</Menu.Item>
+						<Menu.Item key="move">Change owner</Menu.Item>
+					</Menu.Section>
+					<Menu.Section>
+						{expired ? (
+							<></>
+						) : (
+							<Menu.Item key="expire" textValue="Expire">
+								<p className="text-red-500 dark:text-red-400">Expire</p>
+							</Menu.Item>
+						)}
+						<Menu.Item key="remove" textValue="Remove">
+							<p className="text-red-500 dark:text-red-400">Remove</p>
+						</Menu.Item>
+					</Menu.Section>
+				</Menu.Panel>
+			</Menu>
 		</>
 	);
 }