| 26 | } |
| 27 | |
| 28 | export function DisabledOption({ children, reason, className, inline }: DisabledOptionProps) { |
| 29 | let child: ReactElement<DisabledOptionChildProps>; |
| 30 | |
| 31 | if (isValidElement<DisabledOptionChildProps>(children)) { |
| 32 | child = cloneElement(children, { |
| 33 | className: cn( |
| 34 | children.props.className, |
| 35 | "cursor-not-allowed data-[disabled]:pointer-events-auto data-[disabled=true]:pointer-events-auto", |
| 36 | className |
| 37 | ), |
| 38 | disabled: true, |
| 39 | "aria-disabled": true, |
| 40 | }); |
| 41 | } else { |
| 42 | child = ( |
| 43 | <div |
| 44 | className={cn( |
| 45 | "relative flex cursor-not-allowed select-none items-center rounded-sm text-sm opacity-50 outline-none", |
| 46 | className |
| 47 | )} |
| 48 | role="option" |
| 49 | aria-disabled="true" |
| 50 | > |
| 51 | {children} |
| 52 | </div> |
| 53 | ); |
| 54 | } |
| 55 | |
| 56 | if (inline) { |
| 57 | return ( |
| 58 | <div className="flex flex-col"> |
| 59 | {cloneElement(child, { |
| 60 | ...child.props, |
| 61 | className: cn(child.props.className, "pb-1"), |
| 62 | })} |
| 63 | <div className="flex items-start px-4 -mt-2 pb-2"> |
| 64 | <div className="size-4 mr-3 shrink-0" aria-hidden="true" /> |
| 65 | <span className="text-xs text-muted-foreground/80 leading-tight"> |
| 66 | {reason} |
| 67 | </span> |
| 68 | </div> |
| 69 | </div> |
| 70 | ); |
| 71 | } |
| 72 | |
| 73 | return ( |
| 74 | <Tooltip> |
| 75 | <TooltipTrigger asChild> |
| 76 | <div> |
| 77 | {child} |
| 78 | </div> |
| 79 | </TooltipTrigger> |
| 80 | <TooltipContent side="right" className="max-w-[200px]"> |
| 81 | {reason} |
| 82 | </TooltipContent> |
| 83 | </Tooltip> |
| 84 | ); |
| 85 | } |