{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "combobox", "title": "Combobox", "description": "A searchable, accessible combobox built on Base UI.", "dependencies": [ "@base-ui/react", "react-virtuoso" ], "registryDependencies": [ "utils", "https://ui.persian-labs.ir/r/scroll-area.json" ], "files": [ { "path": "registry/base/ui/combobox.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Combobox as ComboboxPrimitive } from \"@base-ui/react/combobox\"\nimport { CheckIcon, ChevronDownIcon, XIcon } from \"lucide-react\"\nimport { Virtuoso, type VirtuosoHandle } from \"react-virtuoso\"\n\nimport { Hitbox } from \"@/components/ui/hitbox\"\nimport { ScrollArea } from \"@/components/ui/scroll-area\"\nimport { cn } from \"@/lib/utils\"\n\n/**\n * ComboboxContent renders through a Portal, so it doesn't inherit `dir` from\n * a nearby wrapper (only from document.documentElement). ComboboxInputGroup\n * measures the ambient direction where it's actually rendered and pushes it\n * here so ComboboxContent can apply it explicitly to the portaled popup.\n */\nconst ComboboxDirContext = React.createContext<{\n dir: \"ltr\" | \"rtl\"\n setDir: (dir: \"ltr\" | \"rtl\") => void\n}>({ dir: \"ltr\", setDir: () => {} })\n\n/**\n * The scrollable viewport element behind ComboboxContent's ScrollArea.\n * ComboboxVirtualList reads this to drive react-virtuoso's\n * `customScrollParent`, so it needs the real DOM node, not ScrollArea's\n * Radix-style wrapper.\n */\nconst ComboboxViewportContext = React.createContext(null)\n\ninterface ComboboxVirtualizerHandle {\n scrollToIndex: (index: number) => void\n}\n\n/**\n * Bridges keyboard highlight events on the (possibly distant) Combobox Root\n * down to whichever ComboboxVirtualList is currently mounted inside it, so\n * arrowing onto an item that's scrolled out of the virtualized window still\n * scrolls it into view. A ref (not state) on purpose: it's written by a\n * descendant after Root has already rendered, and reading it happens inside\n * an event callback, not during render.\n */\nconst ComboboxVirtualizerContext =\n React.createContext | null>(\n null\n )\n\nfunction Combobox({\n onItemHighlighted,\n ...props\n}: ComboboxPrimitive.Root.Props) {\n const [dir, setDir] = React.useState<\"ltr\" | \"rtl\">(\"ltr\")\n const contextValue = React.useMemo(() => ({ dir, setDir }), [dir])\n const virtualizerHandleRef = React.useRef(\n null\n )\n\n return (\n \n \n {\n onItemHighlighted?.(value, eventDetails)\n if (eventDetails.reason === \"keyboard\") {\n virtualizerHandleRef.current?.scrollToIndex(eventDetails.index)\n }\n }}\n {...props}\n />\n \n \n )\n}\n\nfunction ComboboxInputGroup({\n className,\n ...props\n}: ComboboxPrimitive.InputGroup.Props) {\n const ref = React.useRef(null)\n const { setDir } = React.useContext(ComboboxDirContext)\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 ComboboxInput({ className, ...props }: ComboboxPrimitive.Input.Props) {\n return (\n \n )\n}\n\nfunction ComboboxIcon({ className, ...props }: ComboboxPrimitive.Icon.Props) {\n return (\n \n \n \n )\n}\n\nfunction ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {\n return (\n \n \n \n )\n}\n\nfunction ComboboxContent({\n className,\n sideOffset = 6,\n children,\n ...props\n}: ComboboxPrimitive.Positioner.Props & {\n sideOffset?: number\n}) {\n const { dir } = React.useContext(ComboboxDirContext)\n const [viewportElement, setViewportElement] =\n React.useState(null)\n\n return (\n \n \n \n \n \n {children}\n \n \n \n \n \n )\n}\n\nfunction ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {\n return (\n \n )\n}\n\nfunction ComboboxCollection(props: ComboboxPrimitive.Collection.Props) {\n return \n}\n\n/**\n * A windowed alternative to `ComboboxList`, for lists with enough items that\n * rendering them all as DOM nodes becomes a real cost (see the \"virtualize\n * lists exceeding 50 items\" guideline). Opt in per-usage by swapping\n * `ComboboxList` for this component — everything else about `Combobox`\n * composition stays the same.\n *\n * Must be used with `` on the root so Base UI hands\n * scroll-position and typeahead bookkeeping over to the virtualizer instead\n * of assuming every item is mounted.\n *\n * Reads the currently filtered items directly from Base UI's internal\n * filtering (`Combobox.useFilteredItems`) rather than taking an `items` prop,\n * so it always windows exactly what the root would otherwise render — typing\n * a search query re-windows automatically.\n */\nfunction ComboboxVirtualList({\n estimateSize = 36,\n overscan = 8,\n className,\n children,\n ...props\n}: {\n /** Estimated row height in pixels, used before an item's real height is measured on mount. @default 36 */\n estimateSize?: number\n /** Extra pixels rendered outside the visible viewport, in each direction, to reduce blank flashes while scrolling fast. @default 8 */\n overscan?: number\n children: (item: T, index: number) => React.ReactNode\n} & Omit) {\n const items = ComboboxPrimitive.useFilteredItems()\n const viewportElement = React.useContext(ComboboxViewportContext)\n const virtualizerHandleRef = React.useContext(ComboboxVirtualizerContext)\n const virtuosoRef = React.useRef(null)\n\n React.useEffect(() => {\n if (!virtualizerHandleRef) return\n virtualizerHandleRef.current = {\n scrollToIndex: (index) =>\n virtuosoRef.current?.scrollIntoView({ index, behavior: \"auto\" }),\n }\n return () => {\n virtualizerHandleRef.current = null\n }\n }, [virtualizerHandleRef])\n\n return (\n \n {/* customScrollParent falls back to Virtuoso's own self-contained\n scrolling until the outer ScrollArea's viewport DOM node is\n available, instead of rendering nothing while it waits — gating\n the whole list on that ref could leave it permanently empty if\n the ref never resolved in time. `style` height is only used in\n that fallback case; Virtuoso ignores it once customScrollParent\n is set. */}\n children(items[index] as T, index)}\n />\n \n )\n}\n\nfunction ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {\n return (\n \n )\n}\n\nfunction ComboboxItem({\n className,\n children,\n ...props\n}: ComboboxPrimitive.Item.Props) {\n return (\n \n \n \n \n {children}\n \n )\n}\n\nfunction ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props) {\n return (\n \n )\n}\n\nfunction ComboboxGroupLabel({\n className,\n ...props\n}: ComboboxPrimitive.GroupLabel.Props) {\n return (\n \n )\n}\n\nfunction ComboboxSeparator({\n className,\n ...props\n}: ComboboxPrimitive.Separator.Props) {\n return (\n \n )\n}\n\nfunction ComboboxChips({ className, ...props }: ComboboxPrimitive.Chips.Props) {\n const ref = React.useRef(null)\n const { setDir } = React.useContext(ComboboxDirContext)\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 ComboboxValue(props: ComboboxPrimitive.Value.Props) {\n return \n}\n\nfunction ComboboxChip({\n className,\n children,\n ...props\n}: ComboboxPrimitive.Chip.Props) {\n return (\n \n {children}\n \n \n \n \n \n \n )\n}\n\nfunction ComboboxChipsInput({\n className,\n ...props\n}: ComboboxPrimitive.Input.Props) {\n return (\n \n )\n}\n\nexport {\n Combobox,\n ComboboxChip,\n ComboboxChips,\n ComboboxChipsInput,\n ComboboxClear,\n ComboboxCollection,\n ComboboxContent,\n ComboboxEmpty,\n ComboboxGroup,\n ComboboxGroupLabel,\n ComboboxIcon,\n ComboboxInput,\n ComboboxInputGroup,\n ComboboxItem,\n ComboboxList,\n ComboboxSeparator,\n ComboboxValue,\n ComboboxVirtualList,\n}\n", "type": "registry:ui" } ], "type": "registry:ui" }