Function SelectInner

starters/hooks/src/Select.tsx:41–86

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

}

function SelectInner({
  collection,
  ...props
}: StatelySelectProps<object> & {
  collection: ICollection<Node<object>>;
  label?: ReactNode;
}) {
  let state = useSelectState({...props, collection, children: undefined});
  let buttonRef = useRef<HTMLButtonElement>(null);
  let scrollRef = useRef<HTMLDivElement>(null);
  let {labelProps, triggerProps, valueProps, menuProps, hiddenSelectProps} = useSelect(
    props,
    state,
    buttonRef
  );

  return (
    <Provider
      values={[
        [SelectContext, {placeholder: props.placeholder}],
        [SelectStateContext, state],
        [SelectValueContext, valueProps],
        [LabelContext, {...labelProps, elementType: 'span'}],
        [ButtonContext, {...triggerProps, ref: buttonRef, isPressed: state.isOpen}],
        [OverlayTriggerStateContext, state],
        [
          PopoverContext,
          {trigger: 'Select', triggerRef: buttonRef, scrollRef, placement: 'bottom start'}
        ],
        [ListBoxContext, {...menuProps, ref: scrollRef}],
        [ListStateContext, state]
      ]}>
      <div className="react-aria-Select">
        <Label>{props.label}</Label>
        <Button className="react-aria-Button button-base" data-variant="primary">
          <SelectValue />
          <ChevronDown />
        </Button>
        <HiddenSelect {...hiddenSelectProps} />
        <Popover className="react-aria-Popover select-popover">
          <DropdownListBox />
        </Popover>
      </div>
    </Provider>
  );
}