import React from 'react' ; import { Select as PicassoSelect , SelectProps , SelectValueType } from '@toptal/picasso' ; import { generateRandomStringOrGetEmptyInTest } from '@toptal/picasso/utils' ; import FieldWrapper , { FieldProps } from '../FieldWrapper' ; export type Props < T extends SelectValueType , M extends boolean = false > = SelectProps < T , M > & FieldProps < SelectProps < T , M > [ 'value' ] > ; export const Select = < T extends SelectValueType , M extends boolean = false > ( { name , id = name , ... rest } ) => { const randomizedId = id ? generateRandomStringOrGetEmptyInTest ( id ) : undefined ; return ( < FieldWrapper < SelectProps < any , any > > { ... rest } name = { name } id = { randomizedId } > { ( selectProps ) => { return ( < PicassoSelect { ... selectProps } id = { randomizedId } autoComplete = { id ? 'none' : rest . autoComplete || 'off' } / > ) ; } } < /FieldWrapper>); } ; Select . defaultProps = { } ; Select . displayName = 'Select' ; export default Select ;