{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "popover", "type": "registry:ui", "title": "Popover", "description": "A slip of paper with a folded corner.", "categories": [ "core" ], "files": [ { "path": "ui/popover.tsx", "type": "registry:ui", "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { Popover as PopoverPrimitive } from \"radix-ui\";\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 slip of paper with a folded corner. */\nexport const Popover = PopoverPrimitive.Root;\nexport const PopoverTrigger = PopoverPrimitive.Trigger;\nexport const PopoverAnchor = PopoverPrimitive.Anchor;\nexport const PopoverClose = PopoverPrimitive.Close;\n\nconst FOLD = 16;\n\nexport function PopoverContent({\n className = \"\",\n align = \"center\",\n sideOffset = 8,\n children,\n ...props\n}: React.ComponentProps) {\n const [anchor, container] = usePaperContainer();\n return (\n <>\n