101 lines
3.8 KiB
TypeScript
101 lines
3.8 KiB
TypeScript
import { CheckCircleIcon } from "@heroicons/react/outline";
|
|
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
|
|
import { ComponentProps, forwardRef } from "react";
|
|
|
|
import classNames from "@calcom/lib/classNames";
|
|
|
|
export const Dropdown = DropdownMenuPrimitive.Root;
|
|
|
|
type DropdownMenuTriggerProps = ComponentProps<typeof DropdownMenuPrimitive["Trigger"]>;
|
|
export const DropdownMenuTrigger = forwardRef<HTMLButtonElement, DropdownMenuTriggerProps>(
|
|
({ className = "", ...props }, forwardedRef) => (
|
|
<DropdownMenuPrimitive.Trigger
|
|
{...props}
|
|
className={
|
|
props.asChild
|
|
? className
|
|
: `inline-flex items-center rounded-sm bg-transparent px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:ring-offset-1 group-hover:text-black ${className}`
|
|
}
|
|
ref={forwardedRef}
|
|
/>
|
|
)
|
|
);
|
|
DropdownMenuTrigger.displayName = "DropdownMenuTrigger";
|
|
|
|
export const DropdownMenuTriggerItem = DropdownMenuPrimitive.Trigger;
|
|
|
|
export const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
|
|
|
|
type DropdownMenuContentProps = ComponentProps<typeof DropdownMenuPrimitive["Content"]>;
|
|
export const DropdownMenuContent = forwardRef<HTMLDivElement, DropdownMenuContentProps>(
|
|
({ children, ...props }, forwardedRef) => {
|
|
return (
|
|
<DropdownMenuPrimitive.Content
|
|
{...props}
|
|
className={classNames(
|
|
`slideInTop w-50 relative z-10 mt-1 -ml-0 origin-top-right rounded-sm bg-white text-sm shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none`,
|
|
props.className
|
|
)}
|
|
ref={forwardedRef}>
|
|
{children}
|
|
</DropdownMenuPrimitive.Content>
|
|
);
|
|
}
|
|
);
|
|
DropdownMenuContent.displayName = "DropdownMenuContent";
|
|
|
|
type DropdownMenuLabelProps = ComponentProps<typeof DropdownMenuPrimitive["Label"]>;
|
|
export const DropdownMenuLabel = (props: DropdownMenuLabelProps) => (
|
|
<DropdownMenuPrimitive.Label {...props} className="px-3 py-2 text-neutral-500" />
|
|
);
|
|
|
|
type DropdownMenuItemProps = ComponentProps<typeof DropdownMenuPrimitive["CheckboxItem"]>;
|
|
export const DropdownMenuItem = forwardRef<HTMLDivElement, DropdownMenuItemProps>(
|
|
({ className = "", ...props }, forwardedRef) => (
|
|
<DropdownMenuPrimitive.Item
|
|
className={`text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 ${className}`}
|
|
{...props}
|
|
ref={forwardedRef}
|
|
/>
|
|
)
|
|
);
|
|
DropdownMenuItem.displayName = "DropdownMenuItem";
|
|
|
|
export const DropdownMenuGroup = DropdownMenuPrimitive.Group;
|
|
|
|
type DropdownMenuCheckboxItemProps = ComponentProps<typeof DropdownMenuPrimitive["CheckboxItem"]>;
|
|
export const DropdownMenuCheckboxItem = forwardRef<HTMLDivElement, DropdownMenuCheckboxItemProps>(
|
|
({ children, ...props }, forwardedRef) => {
|
|
return (
|
|
<DropdownMenuPrimitive.CheckboxItem {...props} ref={forwardedRef}>
|
|
{children}
|
|
<DropdownMenuPrimitive.ItemIndicator>
|
|
<CheckCircleIcon />
|
|
</DropdownMenuPrimitive.ItemIndicator>
|
|
</DropdownMenuPrimitive.CheckboxItem>
|
|
);
|
|
}
|
|
);
|
|
DropdownMenuCheckboxItem.displayName = "DropdownMenuCheckboxItem";
|
|
|
|
export const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
|
|
|
|
type DropdownMenuRadioItemProps = ComponentProps<typeof DropdownMenuPrimitive["RadioItem"]>;
|
|
export const DropdownMenuRadioItem = forwardRef<HTMLDivElement, DropdownMenuRadioItemProps>(
|
|
({ children, ...props }, forwardedRef) => {
|
|
return (
|
|
<DropdownMenuPrimitive.RadioItem {...props} ref={forwardedRef}>
|
|
{children}
|
|
<DropdownMenuPrimitive.ItemIndicator>
|
|
<CheckCircleIcon />
|
|
</DropdownMenuPrimitive.ItemIndicator>
|
|
</DropdownMenuPrimitive.RadioItem>
|
|
);
|
|
}
|
|
);
|
|
DropdownMenuRadioItem.displayName = "DropdownMenuRadioItem";
|
|
|
|
export const DropdownMenuSeparator = DropdownMenuPrimitive.Separator;
|
|
|
|
export default Dropdown;
|