{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "select", "type": "registry:ui", "title": "Select", "description": "A card-catalogue drawer of options.", "categories": [ "core" ], "files": [ { "path": "ui/select.tsx", "type": "registry:ui", "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { Select as SelectPrimitive } 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 card-catalogue drawer of options. */\nexport const Select = SelectPrimitive.Root;\nexport const SelectGroup = SelectPrimitive.Group;\nexport const SelectValue = SelectPrimitive.Value;\n\nexport function SelectTrigger({ className = \"\", style, children, ...props }: React.ComponentProps) {\n return (\n span]:truncate ${className}`}\n style={{ ...type, ...style }}\n {...props}\n >\n {children}\n {/* no asChild inside registry files: the shadcn CLI rewrites it to `render` in Base UI projects */}\n \n ▼\n \n \n );\n}\n\nexport function SelectContent({\n className = \"\",\n children,\n position = \"popper\",\n ...props\n}: React.ComponentProps) {\n const [anchor, container] = usePaperContainer();\n return (\n <>\n