{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "dropdown-menu",
"title": "Dropdown Menu",
"description": "Displays a menu of actions or options, triggered by a button.",
"dependencies": [
"@base-ui/react",
"lucide-react"
],
"registryDependencies": [
"utils"
],
"files": [
{
"path": "registry/base/ui/dropdown-menu.tsx",
"content": "\"use client\"\n\nimport { Menu as MenuPrimitive } from \"@base-ui/react/menu\"\nimport { CheckIcon } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/**\n * DropdownMenuContent renders through a Portal, so it doesn't inherit `dir`\n * from a nearby wrapper (only from document.documentElement).\n * DropdownMenuTrigger measures the ambient direction where it's actually\n * rendered and pushes it here so DropdownMenuContent can apply it explicitly\n * to the portaled popup.\n */\nconst DropdownMenuDirContext = React.createContext<{\n dir: \"ltr\" | \"rtl\"\n setDir: (dir: \"ltr\" | \"rtl\") => void\n}>({ dir: \"ltr\", setDir: () => {} })\n\nfunction DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {\n const [dir, setDir] = React.useState<\"ltr\" | \"rtl\">(\"ltr\")\n const contextValue = React.useMemo(() => ({ dir, setDir }), [dir])\n\n return (\n \n \n \n )\n}\n\nfunction DropdownMenuTrigger({\n className,\n ...props\n}: MenuPrimitive.Trigger.Props) {\n const ref = React.useRef(null)\n const { setDir } = React.useContext(DropdownMenuDirContext)\n\n React.useEffect(() => {\n function update() {\n if (!ref.current) return\n setDir(getComputedStyle(ref.current).direction === \"rtl\" ? \"rtl\" : \"ltr\")\n }\n\n update()\n\n const observer = new MutationObserver(update)\n observer.observe(document.documentElement, {\n attributes: true,\n attributeFilter: [\"dir\"],\n subtree: true,\n })\n\n return () => observer.disconnect()\n }, [setDir])\n\n return (\n \n )\n}\n\nfunction DropdownMenuContent({\n className,\n sideOffset = 6,\n align,\n alignOffset,\n side,\n children,\n ...props\n}: MenuPrimitive.Popup.Props &\n Pick & {\n sideOffset?: number\n }) {\n const { dir } = React.useContext(DropdownMenuDirContext)\n\n return (\n \n \n \n {children}\n \n \n \n )\n}\n\nfunction DropdownMenuItem({\n className,\n variant = \"default\",\n ...props\n}: MenuPrimitive.Item.Props & {\n variant?: \"default\" | \"destructive\"\n}) {\n return (\n \n )\n}\n\nfunction DropdownMenuCheckboxItem({\n className,\n children,\n ...props\n}: MenuPrimitive.CheckboxItem.Props) {\n return (\n \n \n \n \n {children}\n \n )\n}\n\nfunction DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props) {\n return \n}\n\nfunction DropdownMenuGroupLabel({\n className,\n ...props\n}: MenuPrimitive.GroupLabel.Props) {\n return (\n \n )\n}\n\nfunction DropdownMenuSeparator({\n className,\n ...props\n}: MenuPrimitive.Separator.Props) {\n return (\n \n )\n}\n\nexport {\n DropdownMenu,\n DropdownMenuCheckboxItem,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuGroupLabel,\n DropdownMenuItem,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n}\n",
"type": "registry:ui"
}
],
"type": "registry:ui"
}