Combobox

import * as React from "react"
import {
  OdsCommand,
  OdsCommandInput,
  OdsCommandList,
  OdsCommandEmpty,
  OdsCommandItem
} from '@ods/components/react-alt';
import { OdsButton } from '@ods/components/react.button';
import { OdsPopover } from '@ods/components/react.popover';

type CommandItem = {
  group?: string;
  label: string;
  disabled?: boolean;
}

const commandItems: CommandItem[] = [
  { label: "Add new procedure", group: "Procedures" },
  { label: "Edit procedure", group: "Procedures" },
  { label: "Delete procedure", group: "Procedures", disabled: true },
  { label: "Manage your profile", group: "Settings" },
  { label: "Manage system settings", group: "Settings" }
]

const Example = () => {
  const [open, setOpen] = React.useState(false)
  const [value, setValue] = React.useState("")

  return (
    <OdsPopover open={open}>
      <OdsButton className="trigger-button" slot='trigger' caret>
        {value
          ? commandItems.find((item) => item.label === value)?.label
          : "Select command"}
      </OdsButton>
      <OdsCommand label="OdsCommand Menu">
        <OdsCommandInput placeholder='Search commands...' />
        <OdsCommandList>
          <OdsCommandEmpty>No results found.</OdsCommandEmpty>
          {commandItems.map((item, index) => (
            <OdsCommandItem
              key={index}
              disabled={item.disabled}
              onSelect={(currentValue) => {
                setValue(currentValue === value ? "" : currentValue)
                setOpen(false)
              }}>
              <span>{item.label}</span>
            </OdsCommandItem>
          ))}
        </OdsCommandList>
      </OdsCommand>
    </OdsPopover>
  )
}

export default Example;