Function SelectInner

packages/react-aria-components/src/Select.tsx:177–293

({props, selectRef: ref, collection}: SelectInnerProps<T>)

}

function SelectInner<T>({props, selectRef: ref, collection}: SelectInnerProps<T>) {
  let {validationBehavior: formValidationBehavior} = useSlottedContext(FormContext) || {};
  let validationBehavior = props.validationBehavior ?? formValidationBehavior ?? 'native';
  let state = useSelectState({
    ...props,
    collection,
    children: undefined,
    validationBehavior
  });

  let {isFocusVisible, focusProps} = useFocusRing({within: true});

  // Get props for child elements from useSelect
  let buttonRef = useRef<HTMLButtonElement>(null);
  let [labelRef, label] = useSlot(!props['aria-label'] && !props['aria-labelledby']);
  let {
    labelProps,
    triggerProps,
    valueProps,
    menuProps,
    descriptionProps,
    errorMessageProps,
    hiddenSelectProps,
    ...validation
  } = useSelect(
    {
      ...removeDataAttributes(props),
      label,
      validationBehavior
    },
    state,
    buttonRef
  );

  // Only expose a subset of state to renderProps function to avoid infinite render loop
  let renderPropsState = useMemo(
    () => ({
      isOpen: state.isOpen,
      isFocused: state.isFocused,
      isFocusVisible,
      isDisabled: props.isDisabled || false,
      isInvalid: validation.isInvalid || false,
      isRequired: props.isRequired || false
    }),
    [
      state.isOpen,
      state.isFocused,
      isFocusVisible,
      props.isDisabled,
      validation.isInvalid,
      props.isRequired
    ]
  );

  let renderProps = useRenderProps({
    ...props,
    values: renderPropsState,
    defaultClassName: 'react-aria-Select'