Button.Input

render(
  <Box padding={2} backgroundColor="primary">
    <Button.Input
      title="Add Person"
      theme="light"
      iconLeft={{
        name: 'person',
        color: 'light-6',
      }}
    >
      <Input width={24} />
    </Button.Input>
  </Box>
)

const people = [
  {
    first: 'Charlie',
    last: 'Brown',
    twitter: 'dancounsell',
  },
  {
    first: 'Charlotte',
    last: 'White',
    twitter: 'mtnmissy',
  },
  {
    first: 'Chloe',
    last: 'Jones',
    twitter: 'ladylexy',
  },
  {
    first: 'Cooper',
    last: 'King',
    twitter: 'steveodom',
  },
  {
    first: 'James',
    last: 'Miller',
    twitter: 'bensie',
  },
  {
    first: 'John',
    last: 'James',
    twitter: 'miller',
  },
  {
    first: 'Travis',
    last: 'Arnold',
    twitter: 'souporserious',
  },
]
function ButtonCombobox({ buttonProps, comboboxProps, children }) {
  const comboboxRef = React.useRef(null)
  return (
    <Button.Input {...buttonProps}>
      {({ inputProps, close }) => (
        <Combobox.Popover
          ref={comboboxRef}
          openOnFocus
          closeButton={{
            onClick: () => {
              close()
              comboboxRef.current.closePopover()
            },
          }}
          onClear={() => {
            close()
            comboboxRef.current.closePopover()
          }}
          {...inputProps}
          {...comboboxProps}
        >
          {children}
        </Combobox.Popover>
      )}
    </Button.Input>
  )
}
render(() => {
  const [value, setValue] = React.useState('')
  const [open, setOpen] = React.useState(false)
  const containerRef = React.useRef(null)
  return (
    <StackView
      axis="horizontal"
      alignment="center"
      distribution="space-between"
      minWidth="80%"
      padding={2}
      spacing={2}
      backgroundColor="primary"
    >
      <StackView axis="horizontal" spacing={2}>
        <Link color="white">Link 1</Link>
        <Link color="white">Link 2</Link>
        <Link color="white">Link 3</Link>
      </StackView>
      <ButtonCombobox
        buttonProps={{
          innerRef: containerRef,
          title: 'search',
          icon: { name: 'topbar-search', color: 'light-9' },
          theme: 'light',
          onClose: () => setValue(''),
        }}
        comboboxProps={{
          value,
          onChange: (event) => setValue(event.target.value),
          onSelect: (person) => setValue(person.first + ' ' + person.last),
          placeholder: 'Search by name, email, or phone number',
          width: 40,
          stroke: 'primary-light',
          radius: 'pill',
          placement: 'bottom-end',
          popoverProps: {
            width: 40,
            matchWidths: false,
            relativeTo: containerRef,
          },
        }}
      >
        <Combobox.Items
          value={value}
          filter={{ keys: [(person) => person.first + ' ' + person.last] }}
          items={people}
          renderItem={(person, index) => (
            <Combobox.Item
              key={person.first + ' ' + person.last}
              value={person}
              index={index}
              spacing={1}
            >
              <Avatar
                source={'https://api.adorable.io/avatars/' + index}
                size="sm"
              />
              <Highlight
                query={value}
                text={person.first + ' ' + person.last}
              />
              <Text inline italic fontSize={5} marginLeft="auto" color="grey-6">
                {person.twitter}
              </Text>
            </Combobox.Item>
          )}
          renderEmpty={[
            <Menu.Item>
              No results for
              <Text as="span" inline color="grey-7">
                "{value}"
              </Text>
            </Menu.Item>,
          ]}
        />
      </ButtonCombobox>
    </StackView>
  )
})