Combobox

import {ReactNode} from "react"

import {MapPin} from "lucide-react"

import {QCombobox} from "@qui/react"

export default function OptionAsString(): ReactNode {
  return (
    <div className="flex w-full flex-col items-center gap-4">
      <QCombobox
        className="max-w-[200px]"
        fullWidth
        options={[
          "San Diego",
          "Nashville",
          "Denver",
          "Miami",
          "Las Vegas",
          "New York City",
          "San Francisco",
        ]}
        placeholder="Select a City"
        startIcon={MapPin}
      />

      {/* Option as object: must use optionLabel */}
      <QCombobox
        className="max-w-[200px]"
        fullWidth
        optionLabel="name"
        options={[
          {id: 1, name: "San Diego"},
          {id: 2, name: "Nashville"},
          {id: 3, name: "Denver"},
          {disabled: true, id: 4, name: "Miami"},
          {id: 5, name: "Las Vegas"},
          {id: 6, name: "New York City"},
          {id: 7, name: "San Francisco"},
        ]}
        placeholder="Select a City"
        startIcon={MapPin}
      />
    </div>
  )
}

import {ReactNode} from "react"

import {MapPin} from "lucide-react"

import {QCombobox} from "@qui/react"

export default function Showcase(): ReactNode {
  return (
    <QCombobox
      className="max-w-[200px]"
      fullWidth
      optionLabel="name"
      options={[
        {id: 1, name: "San Diego"},
        {id: 2, name: "Nashville"},
        {id: 3, name: "Denver"},
        {disabled: true, id: 4, name: "Miami"},
        {id: 5, name: "Las Vegas"},
        {id: 6, name: "New York City"},
        {id: 7, name: "San Francisco"},
      ]}
      placeholder="Select a City"
      startIcon={MapPin}
    />
  )
}

import {ReactNode} from "react"

import {Grape} from "lucide-react"

import {QComboboxOption} from "@qui/base"
import {QCombobox} from "@qui/react"

interface Fruit extends QComboboxOption {
  id: number
  name: string
}

const options: Fruit[] = [
  {id: 1, name: "Banana"},
  {id: 2, name: "Orange"},
  {id: 3, name: "Pineapple"},
  {id: 4, name: "Mango"},
  {id: 5, name: "Grapes"},
  {id: 6, name: "Watermelon"},
  {id: 7, name: "Strawberry"},
  {id: 8, name: "Blueberry"},
]

export default function Multiple(): ReactNode {
  return (
    <QCombobox
      className="w-[300px]"
      defaultValue={options.slice(0, 3)}
      filterable
      label="Choose your favorite fruits"
      multiple
      optionLabel="name"
      optionValue="id"
      options={options}
      placeholder="Fruit"
      startIcon={Grape}
    />
  )
}

import {ReactNode} from "react"

import {Info} from "lucide-react"

import {QComboboxOption} from "@qui/base"
import {QCombobox, QIcon} from "@qui/react"

interface City extends QComboboxOption {
  id: number
  name: string
}

const options: City[] = [
  {id: 1, name: "San Diego"},
  {id: 2, name: "Nashville"},
  {id: 3, name: "Denver"},
  {disabled: true, id: 4, name: "Miami"},
  {id: 5, name: "Las Vegas"},
  {id: 6, name: "New York City"},
  {id: 7, name: "San Francisco"},
]

export default function Customization(): ReactNode {
  return (
    <div className="grid justify-center">
      <div className="grid w-[300px] gap-y-5">
        <QCombobox
          fullWidth
          hint="Hint"
          label="Label"
          optionLabel="name"
          optionValue="id"
          options={options}
          placeholder="Select a City"
        />

        <QCombobox
          fullWidth
          hint={
            <span className="text-primary q-font-metadata-sm">Custom Hint</span>
          }
          label={
            <div className="mb-1 flex items-center gap-1 text-primary q-font-heading-xxs">
              <QIcon icon={Info} size="s" />
              <span>Custom Label</span>
            </div>
          }
          optionLabel="name"
          options={options}
          placeholder="Select a City"
        />

        <QCombobox
          error="Error"
          fullWidth
          label="Label"
          optionLabel="name"
          options={options}
          placeholder="Select a City"
        />

        <QCombobox
          defaultValue={options[0]}
          fullWidth
          label="Read Only + Default Value"
          optionLabel="name"
          options={options}
          placeholder="Select a City"
          readOnly
        />

        <QCombobox
          disabled
          fullWidth
          label="Disabled"
          optionLabel="name"
          optionValue="id"
          options={options}
          placeholder="Select a City"
        />

        <QCombobox
          fullWidth
          label="Loading Indicator"
          loading
          optionLabel="name"
          optionValue="id"
          options={options}
          placeholder="Select a City"
        />
      </div>
    </div>
  )
}

import {forwardRef, ReactNode} from "react"

import {CheckIcon, MapPin} from "lucide-react"

import {QCombobox, QComboboxOptionProps, QIcon} from "@qui/react"

CustomOptions.displayName = "CustomOptions"

interface Product {
  name: string
  type: string
}

const CustomOption = forwardRef<
  HTMLButtonElement,
  QComboboxOptionProps<Product>
>(({"data-selected": selected, option, ...props}, ref) => {
  return (
    <button ref={ref} {...props}>
      <div className="flex w-full justify-between">
        <div className="flex flex-col items-start">
          <div className="text-primary q-font-body-sm">{option.name}</div>
          <div className="text-secondary q-font-metadata-md">{option.type}</div>
        </div>
        {selected ? (
          <div className="flex items-center justify-end">
            <QIcon
              className="q-foreground-1-secondary"
              icon={CheckIcon}
              size="m"
            />
          </div>
        ) : null}
      </div>
    </button>
  )
})

export default function CustomOptions(): ReactNode {
  return (
    <QCombobox
      className="max-w-[250px]"
      fullWidth
      optionLabel="name"
      options={
        [
          {name: "QCC2076.WIN.1.0", type: "Software"},
          {name: "QUTS", type: "Tool"},
        ] satisfies Product[]
      }
      placeholder="Select a Product"
      renderOption={CustomOption}
      startIcon={MapPin}
    />
  )
}

import {forwardRef, ReactNode, useMemo, useState} from "react"

import {MapPin} from "lucide-react"

import {clsx} from "@qui/base"
import {QCheckbox, QCombobox, QComboboxOptionProps} from "@qui/react"

SelectAll.displayName = "SelectAll"

interface Product {
  name: string
}

export default function SelectAll(): ReactNode {
  const [value, setValue] = useState<Product[]>([])
  const [open, setOpen] = useState(false)
  const [allSelected, setAllSelected] = useState(false)

  const options = useMemo<Product[]>(
    () => [{name: "QCC2076.WIN.1.0"}, {name: "QUTS"}],
    [],
  )

  const deselectAll = () => {
    setAllSelected(false)
    setValue([])
  }

  const selectAll = () => {
    setAllSelected(true)
    setValue(options)
  }

  return (
    <QCombobox
      className="max-w-[250px]"
      fullWidth
      multiple
      onChange={(event, value) => {
        setValue(value)
        setAllSelected(value.length === options.length)
      }}
      onOpenChange={setOpen}
      open={open}
      optionLabel="name"
      options={[{name: "Select All"}, ...options] satisfies Product[]}
      placeholder="Select a Product"
      renderOption={forwardRef<
        HTMLButtonElement,
        QComboboxOptionProps<Product>
      >((props, ref) => {
        if (props.option.name === "Select All") {
          return (
            <button
              ref={ref}
              {...props}
              className={clsx(props.className, "border-b border-b-subtle")}
              onClick={() => {
                allSelected ? deselectAll() : selectAll()
                setOpen(false)
              }}
            >
              <span className="flex gap-3">
                <QCheckbox checked={allSelected} />
                Select All
              </span>
            </button>
          )
        }
        return <button {...props} ref={ref} />
      })}
      startIcon={MapPin}
      value={value}
    />
  )
}

import {ReactNode} from "react"

import {faker} from "@faker-js/faker"
import {SearchIcon} from "lucide-react"

import {QCombobox} from "@qui/react"

const data = faker.helpers.uniqueArray(faker.location.city, 10000).sort()

export default function Virtual(): ReactNode {
  return (
    <QCombobox
      className="w-[250px]"
      filterable
      label="Cities"
      options={data}
      placeholder="Cities"
      startIcon={SearchIcon}
      virtual
    />
  )
}