DropdownMenuItemTooltip.tsx35 lines · main

1	import { ComponentProps, ComponentPropsWithoutRef, ElementRef, forwardRef } from 'react'
2	import { cn, DropdownMenuItem, Tooltip, TooltipContent, TooltipTrigger } from 'ui'
3
4	export const DropdownMenuItemTooltip = forwardRef<
5	ElementRef<typeof DropdownMenuItem>,
6	ComponentPropsWithoutRef<typeof DropdownMenuItem> & {
7	tooltip: {
8	content: ComponentProps<typeof TooltipContent> & {
9	text?: string
10	}
11	}
12	}
13	>(({ ...props }, ref) => {
14	return (
15	<Tooltip>
16	<TooltipTrigger asChild>
17	<DropdownMenuItem
18	ref={ref}
19	{...props}
20	className={cn(props.className, 'pointer-events-auto!')}
21	onClick={(e) => {
22	if (!props.disabled && props.onClick) props.onClick(e)
23	}}
24	>
25	{props.children}
26	</DropdownMenuItem>
27	</TooltipTrigger>
28	{props.disabled && props.tooltip.content.text !== undefined && (
29	<TooltipContent {...props.tooltip.content}>{props.tooltip.content.text}</TooltipContent>
30	)}
31	</Tooltip>
32	)
33	})
34
35	DropdownMenuItemTooltip.displayName = 'DropdownMenuItemTooltip'