mirror of
https://github.com/hex248/sprint.git
synced 2026-02-07 18:23:03 +00:00
added dropdown menu component (shadcn)
This commit is contained in:
Oliver Bryan
@@ -12,13 +12,39 @@ function DropdownMenuPortal({ ...props }: React.ComponentProps<typeof DropdownMe
|
||||
return <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />;
|
||||
}
|
||||
|
||||
function DropdownMenuTrigger({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
|
||||
return <DropdownMenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />;
|
||||
function DropdownMenuTrigger({
|
||||
className,
|
||||
size = "default",
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger> & {
|
||||
size?: "sm" | "default";
|
||||
}) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.Trigger
|
||||
data-slot="dropdown-menu-trigger"
|
||||
data-size={size}
|
||||
className={cn(
|
||||
"cursor-pointer border data-[placeholder]:text-muted-foreground",
|
||||
"[&_svg:not([class*='text-'])]:text-foreground",
|
||||
"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",
|
||||
"aria-invalid:border-destructive dark:hover:bg-muted/40",
|
||||
"flex w-fit items-center justify-between gap-2 border",
|
||||
"bg-transparent px-3 py-2 text-sm whitespace-nowrap",
|
||||
"shadow-xs outline-none disabled:cursor-not-allowed",
|
||||
"disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8",
|
||||
"*:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex",
|
||||
"*:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2",
|
||||
"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function DropdownMenuContent({
|
||||
className,
|
||||
sideOffset = 4,
|
||||
sideOffset = 0,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
|
||||
return (
|
||||
@@ -27,7 +53,16 @@ function DropdownMenuContent({
|
||||
data-slot="dropdown-menu-content"
|
||||
sideOffset={sideOffset}
|
||||
className={cn(
|
||||
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
|
||||
"bg-popover text-popover-foreground",
|
||||
"data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95",
|
||||
"data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2",
|
||||
"data-[side=left]:slide-in-from-right-2",
|
||||
"data-[side=right]:slide-in-from-left-2",
|
||||
"data-[side=top]:slide-in-from-bottom-2",
|
||||
"z-50 max-h-(--radix-dropdown-menu-content-available-height)",
|
||||
"min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin)",
|
||||
"overflow-x-hidden overflow-y-auto border p-1 shadow-md",
|
||||
"data-[side=bottom]:translate-y-1",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
@@ -55,7 +90,18 @@ function DropdownMenuItem({
|
||||
data-inset={inset}
|
||||
data-variant={variant}
|
||||
className={cn(
|
||||
"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
"focus:bg-accent/40 focus:text-accent-foreground",
|
||||
"data-[variant=destructive]:text-destructive",
|
||||
"data-[variant=destructive]:focus:bg-destructive/10",
|
||||
"dark:data-[variant=destructive]:focus:bg-destructive/20",
|
||||
"data-[variant=destructive]:focus:text-destructive",
|
||||
"data-[variant=destructive]:*:[svg]:!text-destructive",
|
||||
"[&_svg:not([class*='text-'])]:text-foreground relative",
|
||||
"flex w-full cursor-pointer items-center gap-2 py-1.5 pr-8 pl-2",
|
||||
"px-2 py-1.5 text-sm outline-hidden select-none",
|
||||
"data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
||||
"data-[inset]:pl-8 [&_svg]:pointer-events-none",
|
||||
"[&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
@@ -73,7 +119,11 @@ function DropdownMenuCheckboxItem({
|
||||
<DropdownMenuPrimitive.CheckboxItem
|
||||
data-slot="dropdown-menu-checkbox-item"
|
||||
className={cn(
|
||||
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
"focus:bg-accent focus:text-accent-foreground relative",
|
||||
"flex cursor-default items-center gap-2 py-1.5 pr-2 pl-8",
|
||||
"text-sm outline-hidden select-none data-[disabled]:pointer-events-none",
|
||||
"data-[disabled]:opacity-50 [&_svg]:pointer-events-none",
|
||||
"[&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className,
|
||||
)}
|
||||
checked={checked}
|
||||
@@ -102,7 +152,11 @@ function DropdownMenuRadioItem({
|
||||
<DropdownMenuPrimitive.RadioItem
|
||||
data-slot="dropdown-menu-radio-item"
|
||||
className={cn(
|
||||
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
"focus:bg-accent focus:text-accent-foreground relative",
|
||||
"flex cursor-default items-center gap-2 py-1.5 pr-2 pl-8",
|
||||
"text-sm outline-hidden select-none data-[disabled]:pointer-events-none",
|
||||
"data-[disabled]:opacity-50 [&_svg]:pointer-events-none",
|
||||
"[&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
@@ -174,7 +228,10 @@ function DropdownMenuSubTrigger({
|
||||
data-slot="dropdown-menu-sub-trigger"
|
||||
data-inset={inset}
|
||||
className={cn(
|
||||
"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent",
|
||||
"data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-foreground",
|
||||
"flex cursor-default items-center gap-2 px-2 py-1.5 text-sm outline-hidden select-none",
|
||||
"data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
@@ -193,7 +250,14 @@ function DropdownMenuSubContent({
|
||||
<DropdownMenuPrimitive.SubContent
|
||||
data-slot="dropdown-menu-sub-content"
|
||||
className={cn(
|
||||
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
|
||||
"bg-popover text-popover-foreground data-[state=open]:animate-in",
|
||||
"data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
|
||||
"data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95",
|
||||
"data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2",
|
||||
"data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
|
||||
"data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem]",
|
||||
"origin-(--radix-dropdown-menu-content-transform-origin)",
|
||||
"overflow-hidden border p-1 shadow-lg",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
|
||||
@@ -68,6 +68,7 @@ function SelectContent({
|
||||
<SelectPrimitive.Portal>
|
||||
<SelectPrimitive.Content
|
||||
data-slot="select-content"
|
||||
data-align={align}
|
||||
className={cn(
|
||||
"bg-popover text-popover-foreground",
|
||||
"data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95",
|
||||
@@ -79,6 +80,7 @@ function SelectContent({
|
||||
"overflow-y-auto border shadow-md",
|
||||
position === "popper" &&
|
||||
"data-[side=bottom]:translate-y-1 data-[side=bottom]:-translate-x-1.5 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1 data-[side=top]:-translate-x-0.5",
|
||||
position === "popper" && align === "start" && "data-[side=bottom]:-translate-x-0",
|
||||
className,
|
||||
)}
|
||||
position={position}
|
||||
|
||||
Reference in New Issue
Block a user