{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "dropdown-menu", "type": "registry:ui", "title": "Dropdown Menu", "description": "A typed menu on an index card.", "categories": [ "core" ], "files": [ { "path": "ui/dropdown-menu.tsx", "type": "registry:ui", "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { DropdownMenu as MenuPrimitive } from \"radix-ui\";\n\nconst type = { fontFamily: \"var(--font-type, 'Courier New', ui-monospace, monospace)\" };\n\n// Popups render in a layer on that copies the paper type of the nearest [data-paper]\n// element (and follows it if it changes). That keeps their theme without trapping them inside the\n// container's stacking context, so sticky headers can't cover them.\nfunction usePaperContainer() {\n const anchor = React.useRef(null);\n const [container, setContainer] = React.useState();\n React.useEffect(() => {\n const source = anchor.current?.closest(\"[data-paper]\");\n if (!source || source === document.documentElement) return;\n const layer = document.createElement(\"div\");\n layer.setAttribute(\"data-paper-layer\", \"\");\n const sync = () => layer.setAttribute(\"data-paper\", source.getAttribute(\"data-paper\") ?? \"\");\n sync();\n document.body.appendChild(layer);\n const observer = new MutationObserver(sync);\n observer.observe(source, { attributes: true, attributeFilter: [\"data-paper\"] });\n setContainer(layer);\n return () => {\n observer.disconnect();\n layer.remove();\n };\n }, []);\n return [anchor, container] as const;\n}\n\n/** A typed menu on an index card. */\nexport const DropdownMenu = MenuPrimitive.Root;\nexport const DropdownMenuTrigger = MenuPrimitive.Trigger;\nexport const DropdownMenuGroup = MenuPrimitive.Group;\nexport const DropdownMenuRadioGroup = MenuPrimitive.RadioGroup;\nexport const DropdownMenuSub = MenuPrimitive.Sub;\n\nconst surface =\n \"paper z-50 min-w-[12rem] overflow-hidden rounded-[3px] border border-(--edge) bg-(--paper-raised) p-1 text-(--ink) shadow-[0_14px_30px_-12px_rgb(0_0_0/.45)] data-[state=open]:animate-[paper-pop-in_.14s_ease-out]\";\n\nconst item =\n \"group/item relative flex cursor-pointer select-none items-center gap-2 rounded-[2px] py-2 pl-7 pr-3 text-[13.5px] outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-(--paper-sunk) data-[disabled]:opacity-45 [&_svg]:size-4\";\n\nexport function DropdownMenuContent({ className = \"\", sideOffset = 6, ...props }: React.ComponentProps) {\n const [anchor, container] = usePaperContainer();\n return (\n <>\n