veza/apps/web/src/components/ui/dropdown-menu/DropdownMenuItem.tsx

import * as React from 'react';
import { cn } from '@/lib/utils';
import type { DropdownMenuItemProps } from './types';

export const DropdownMenuItem = React.forwardRef<
  HTMLButtonElement,
  DropdownMenuItemProps
>(({ className, inset, onKeyDown, onClick, ...props }, ref) => {
  const handleKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>) => {
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault();
      if (onClick && !props.disabled) {
        (onClick as (e: React.KeyboardEvent<HTMLButtonElement>) => void)(e);
      }
    }
    onKeyDown?.(e);
  };
  return (
    <button
      ref={ref}
      type="button"
      role="menuitem"
      className={cn(
        'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none',
        'transition-colors duration-[var(--duration-fast)] focus-visible:bg-white/5 focus-visible:text-foreground focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-inset disabled:pointer-events-none disabled:opacity-50',
        'text-foreground hover:bg-muted/50 w-full text-left',
        inset && 'pl-8',
        className,
      )}
      onKeyDown={handleKeyDown}
      onClick={onClick}
      {...props}
    />
  );
});
DropdownMenuItem.displayName = 'DropdownMenuItem';