Function ComboBoxInner

starters/hooks/src/ComboBox.tsx:40–100

({
  collection,
  ...props
}: StatelyComboBoxProps<object> & {
  collection: ICollection<Node<object>>;
  label?: ReactNode;
})

}

function ComboBoxInner({
  collection,
  ...props
}: StatelyComboBoxProps<object> & {
  collection: ICollection<Node<object>>;
  label?: ReactNode;
}) {
  let {contains} = useFilter({sensitivity: 'base'});
  let state = useComboBoxState({
    ...props,
    defaultFilter: contains,
    collection,
    children: undefined
  });
  let fieldRef = useRef<HTMLDivElement>(null);
  let inputRef = useRef<HTMLInputElement>(null);
  let buttonRef = useRef<HTMLButtonElement>(null);
  let listBoxRef = useRef<HTMLDivElement>(null);
  let popoverRef = useRef<HTMLDivElement>(null);
  let {labelProps, inputProps, buttonProps, listBoxProps} = useComboBox(
    {...props, inputRef, buttonRef, listBoxRef, popoverRef},
    state
  );

  return (
    <Provider
      values={[
        [ComboBoxStateContext, state],
        [LabelContext, labelProps],
        [ButtonContext, {...buttonProps, ref: buttonRef, isPressed: state.isOpen}],
        [InputContext, {...inputProps, ref: inputRef}],
        [OverlayTriggerStateContext, state],
        [
          PopoverContext,
          {
            ref: popoverRef,
            triggerRef: fieldRef,
            scrollRef: listBoxRef,
            trigger: 'ComboBox',
            placement: 'bottom start',
            isNonModal: true
          }
        ],
        [ListBoxContext, {...listBoxProps, ref: listBoxRef}],
        [ListStateContext, state]
      ]}>
      <div className="react-aria-ComboBox">
        <Label>{props.label}</Label>
        <div className="combobox-field" ref={fieldRef}>
          <Input className="react-aria-Input inset" />
          <Button className="field-Button">
            <ChevronDown />
          </Button>
        </div>
        <Popover className="react-aria-Popover combobox-popover">
          <DropdownListBox />
        </Popover>
      </div>