ComboboxPopover() — ui Function Reference

Architecture documentation for the ComboboxPopover() function in combobox-popover.tsx from the ui codebase.

Function tsx ComponentRegistry ChartRegistry

Entity Profile

ComponentRegistry→ ChartRegistry→ ComboboxPopover() — ui Function Reference

Dependency Diagram

graph TD
  6a90ab91_35b3_f760_a68b_1d4edd54d9a8["ComboboxPopover()"]
  fb8d4fe2_1311_2441_d1d8_08eff53b6816["combobox-popover.tsx"]
  6a90ab91_35b3_f760_a68b_1d4edd54d9a8 -->|defined in| fb8d4fe2_1311_2441_d1d8_08eff53b6816
  style 6a90ab91_35b3_f760_a68b_1d4edd54d9a8 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/new-york-v4/examples/combobox-popover.tsx lines 48–91

export default function ComboboxPopover() {
  const [open, setOpen] = React.useState(false)
  const [selectedStatus, setSelectedStatus] = React.useState<Status | null>(
    null
  )

  return (
    <div className="flex items-center space-x-4">
      <p className="text-muted-foreground text-sm">Status</p>
      <Popover open={open} onOpenChange={setOpen}>
        <PopoverTrigger asChild>
          <Button variant="outline" className="w-[150px] justify-start">
            {selectedStatus ? <>{selectedStatus.label}</> : <>+ Set status</>}
          </Button>
        </PopoverTrigger>
        <PopoverContent className="p-0" side="right" align="start">
          <Command>
            <CommandInput placeholder="Change status..." />
            <CommandList>
              <CommandEmpty>No results found.</CommandEmpty>
              <CommandGroup>
                {statuses.map((status) => (
                  <CommandItem
                    key={status.value}
                    value={status.value}
                    onSelect={(value) => {
                      setSelectedStatus(
                        statuses.find((priority) => priority.value === value) ||
                          null
                      )
                      setOpen(false)
                    }}
                  >
                    {status.label}
                  </CommandItem>
                ))}
              </CommandGroup>
            </CommandList>
          </Command>
        </PopoverContent>
      </Popover>
    </div>
  )
}