| 1 | "use client"; |
| 2 | |
| 3 | import { Menu as MenuPrimitive |
| 4 | import { cn } |
| 5 | import { ChevronRightIcon, CheckIcon |
| 6 | import * as React |
| 7 | |
| 8 | function DropdownMenu({ ... |
| 9 | return <MenuPrimitive.Root data-slot |
| 10 | } |
| 11 | |
| 12 | function DropdownMenuPortal({ ... |
| 13 | return <MenuPrimitive.Portal data-slot |
| 14 | } |
| 15 | |
| 16 | function DropdownMenuTrigger({ ... |
| 17 | return <MenuPrimitive.Trigger data-slot |
| 18 | } |
| 19 | |
| 20 | function DropdownMenuContent({ |
| 21 | align = "start" |
| 22 | alignOffset = 0, |
| 23 | side = "bottom" |
| 24 | sideOffset = 4, |
| 25 | className, |
| 26 | ...props |
| 27 | }: MenuPrimitive. |
| 28 | Pick<MenuPrimitive |
| 29 | return ( |
| 30 | <MenuPrimitive.Portal> |
| 31 | <MenuPrimitive.Positioner |
| 32 | className="isolate z-50 outline-none" |
| 33 | align={align} |
| 34 | alignOffset={alignOffset} |
| 35 | side={side} |
| 36 | sideOffset={sideOffset} |
| 37 | > |
| 38 | <MenuPrimitive.Popup |
| 39 | data-slot="dropdown-menu-content" |
| 40 | className={cn( |
| 41 | "z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-xl border border-border bg-card p-1 text-popover-foreground shadow-lg duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95", |
| 42 | className, |
| 43 | )} |
| 44 | {...props} |
| 45 | /> |
| 46 | </MenuPrimitive.Positioner> |
| 47 | </MenuPrimitive.Portal> |
| 48 | ); |
| 49 | } |
| 50 | |
| 51 | function DropdownMenuGroup({ ... |
| 52 | return <MenuPrimitive.Group data-slot |
| 53 | } |
| 54 | |
| 55 | function DropdownMenuLabel({ |
| 56 | className, |
| 57 | inset, |
| 58 | ...props |
| 59 | }: MenuPrimitive. |
| 60 | inset?: boolean |
| 61 | }) { |
| 62 | return ( |
| 63 | <MenuPrimitive.GroupLabel |
| 64 | data-slot="dropdown-menu-label" |
| 65 | data-inset={inset} |
| 66 | className={cn(" |
| 67 | {...props} |
| 68 | /> |
| 69 | ); |
| 70 | } |
| 71 | |
| 72 | function DropdownMenuItem({ |
| 73 | className, |
| 74 | inset, |
| 75 | variant = "default" |
| 76 | ...props |
| 77 | }: MenuPrimitive. |
| 78 | inset?: boolean |
| 79 | variant?: " |
| 80 | }) { |
| 81 | return ( |
| 82 | <MenuPrimitive.Item |
| 83 | data-slot="dropdown-menu-item" |
| 84 | data-inset={inset} |
| 85 | data-variant={variant} |
| 86 | className={cn( |
| 87 | "group/dropdown-menu-item relative flex cursor-default items-center gap-2 rounded-lg px-2 py-2 text-xs outline-hidden select-none focus:bg-muted focus:text-foreground not-data-[variant=destructive]:focus:**:text-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive", |
| 88 | className, |
| 89 | )} |
| 90 | {...props} |
| 91 | /> |
| 92 | ); |
| 93 | } |
| 94 | |
| 95 | function DropdownMenuSub({ ... |
| 96 | return <MenuPrimitive.SubmenuRoot data-slot |
| 97 | } |
| 98 | |
| 99 | function DropdownMenuSubTrigger({ |
| 100 | className, |
| 101 | inset, |
| 102 | children, |
| 103 | ...props |
| 104 | }: MenuPrimitive. |
| 105 | inset?: boolean |
| 106 | }) { |
| 107 | return ( |
| 108 | <MenuPrimitive.SubmenuTrigger |
| 109 | data-slot="dropdown-menu-sub-trigger" |
| 110 | data-inset={inset} |
| 111 | className={cn( |
| 112 | "flex cursor-default items-center gap-2 rounded-lg px-2 py-2 text-xs outline-hidden select-none focus:bg-muted focus:text-foreground not-data-[variant=destructive]:focus:**:text-foreground data-inset:pl-7 data-popup-open:bg-muted data-popup-open:text-foreground data-open:bg-muted data-open:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", |
| 113 | className, |
| 114 | )} |
| 115 | {...props} |
| 116 | > |
| 117 | {children} |
| 118 | <ChevronRightIcon className=" |
| 119 | </MenuPrimitive.SubmenuTrigger> |
| 120 | ); |
| 121 | } |
| 122 | |
| 123 | function DropdownMenuSubContent({ |
| 124 | align = "start" |
| 125 | alignOffset = -3, |
| 126 | side = "right" |
| 127 | sideOffset = 0, |
| 128 | className, |
| 129 | ...props |
| 130 | }: React. |
| 131 | return ( |
| 132 | <DropdownMenuContent |
| 133 | data-slot="dropdown-menu-sub-content" |
| 134 | className={cn( |
| 135 | "w-auto min-w-[96px] rounded-xl border border-border bg-card text-popover-foreground shadow-lg duration-100 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 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", |
| 136 | className, |
| 137 | )} |
| 138 | align={align} |
| 139 | alignOffset={alignOffset} |
| 140 | side={side} |
| 141 | sideOffset={sideOffset} |
| 142 | {...props} |
| 143 | /> |
| 144 | ); |
| 145 | } |
| 146 | |
| 147 | function DropdownMenuCheckboxItem({ |
| 148 | className, |
| 149 | children, |
| 150 | checked, |
| 151 | inset, |
| 152 | ...props |
| 153 | }: MenuPrimitive. |
| 154 | inset?: boolean |
| 155 | }) { |
| 156 | return ( |
| 157 | <MenuPrimitive.CheckboxItem |
| 158 | data-slot="dropdown-menu-checkbox-item" |
| 159 | data-inset={inset} |
| 160 | className={cn( |
| 161 | "relative flex cursor-default items-center gap-2 rounded-lg py-2 pr-8 pl-2 text-xs outline-hidden select-none focus:bg-muted focus:text-foreground focus:**:text-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", |
| 162 | className, |
| 163 | )} |
| 164 | checked={checked} |
| 165 | {...props} |
| 166 | > |
| 167 | <span |
| 168 | className="pointer-events-none absolute right-2 flex items-center justify-center" |
| 169 | data-slot="dropdown-menu-checkbox-item-indicator" |
| 170 | > |
| 171 | <MenuPrimitive.CheckboxItemIndicator> |
| 172 | <CheckIcon /> |
| 173 | </MenuPrimitive.CheckboxItemIndicator> |
| 174 | </span> |
| 175 | {children} |
| 176 | </MenuPrimitive.CheckboxItem> |
| 177 | ); |
| 178 | } |
| 179 | |
| 180 | function DropdownMenuRadioGroup({ ... |
| 181 | return <MenuPrimitive.RadioGroup data-slot |
| 182 | } |
| 183 | |
| 184 | function DropdownMenuRadioItem({ |
| 185 | className, |
| 186 | children, |
| 187 | inset, |
| 188 | ...props |
| 189 | }: MenuPrimitive. |
| 190 | inset?: boolean |
| 191 | }) { |
| 192 | return ( |
| 193 | <MenuPrimitive.RadioItem |
| 194 | data-slot="dropdown-menu-radio-item" |
| 195 | data-inset={inset} |
| 196 | className={cn( |
| 197 | "relative flex cursor-default items-center gap-2 rounded-lg py-2 pr-8 pl-2 text-xs outline-hidden select-none focus:bg-muted focus:text-foreground focus:**:text-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", |
| 198 | className, |
| 199 | )} |
| 200 | {...props} |
| 201 | > |
| 202 | <span |
| 203 | className="pointer-events-none absolute right-2 flex items-center justify-center" |
| 204 | data-slot="dropdown-menu-radio-item-indicator" |
| 205 | > |
| 206 | <MenuPrimitive.RadioItemIndicator> |
| 207 | <CheckIcon /> |
| 208 | </MenuPrimitive.RadioItemIndicator> |
| 209 | </span> |
| 210 | {children} |
| 211 | </MenuPrimitive.RadioItem> |
| 212 | ); |
| 213 | } |
| 214 | |
| 215 | function DropdownMenuSeparator({ className |
| 216 | return ( |
| 217 | <MenuPrimitive.Separator |
| 218 | data-slot="dropdown-menu-separator" |
| 219 | className={cn(" |
| 220 | {...props} |
| 221 | /> |
| 222 | ); |
| 223 | } |
| 224 | |
| 225 | function DropdownMenuShortcut({ className |
| 226 | return ( |
| 227 | <span |
| 228 | data-slot="dropdown-menu-shortcut" |
| 229 | className={cn( |
| 230 | "ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground", |
| 231 | className, |
| 232 | )} |
| 233 | {...props} |
| 234 | /> |
| 235 | ); |
| 236 | } |
| 237 | |
| 238 | export { |
| 239 | DropdownMenu, |
| 240 | DropdownMenuPortal, |
| 241 | DropdownMenuTrigger, |
| 242 | DropdownMenuContent, |
| 243 | DropdownMenuGroup, |
| 244 | DropdownMenuLabel, |
| 245 | DropdownMenuItem, |
| 246 | DropdownMenuCheckboxItem, |
| 247 | DropdownMenuRadioGroup, |
| 248 | DropdownMenuRadioItem, |
| 249 | DropdownMenuSeparator, |
| 250 | DropdownMenuShortcut, |
| 251 | DropdownMenuSub, |
| 252 | DropdownMenuSubTrigger, |
| 253 | DropdownMenuSubContent, |
| 254 | }; |