Function ComboBox

packages/react-aria/stories/combobox/example.tsx:25–90

(props: AriaComboBoxProps<any>)

import {useOverlay} from '../../src/overlays/useOverlay';

export function ComboBox(props: AriaComboBoxProps<any>): JSX.Element {
  // Setup filter function and state.
  let {contains} = useFilter({sensitivity: 'base'});
  let state = useComboBoxState({...props, defaultFilter: contains});

  // Setup refs and get props for child elements.
  let buttonRef = React.useRef(null);
  let inputRef = React.useRef(null);
  let listBoxRef = React.useRef(null);
  let popoverRef = React.useRef(null);

  let {
    buttonProps: triggerProps,
    inputProps,
    listBoxProps,
    labelProps
  } = useComboBox(
    {
      ...props,
      inputRef,
      buttonRef,
      listBoxRef,
      popoverRef
    },
    state
  );

  // Call useButton to get props for the button element. Alternatively, you can
  // pass the triggerProps to a separate Button component using useButton
  // that you might already have in your component library.
  let {buttonProps} = useButton(triggerProps, buttonRef);

  return (
    <div style={{display: 'inline-flex', flexDirection: 'column'}}>
      <label {...labelProps}>{props.label}</label>
      <div style={{position: 'relative', display: 'inline-block'}}>
        <input
          {...inputProps}
          ref={inputRef}
          style={{
            height: 24,
            boxSizing: 'border-box',
            marginRight: 0,
            fontSize: 16
          }}
        />
        <button
          {...buttonProps}
          ref={buttonRef}
          style={{
            height: 24,
            marginLeft: 0
          }}>
          <span aria-hidden="true" style={{padding: '0 2px'}}>
            ▼
          </span>
        </button>
        {state.isOpen && (