hunk.code_window: 	border-style: solid;
   	border-width: $select-arrow-width $select-arrow-width ($select-arrow-width / 2);
   	display: inline-block;
   	height: 0;
   	width: 0;
   }
   .is-open .Select-arrow,
   .Select-arrow-zone:hover > .Select-arrow {
   	border-top-color: $select-arrow-color-hover;
   }
  
hunk.labels: keep keep keep keep add keep keep keep keep keep
hunk.after_edit: 	position: relative;
  
hunk.file_path: scss/control.scss
hunk.type: add
file: import classNames from 'classnames';
  import React from 'react';
  
  function menuRenderer ({
  	focusedOption,
  	instancePrefix,
  	labelKey,
  	onFocus,
  	onSelect,
  	optionClassName,
  	optionComponent,
  	optionRenderer,
  	options,
  	valueArray,
  	valueKey,
  	onOptionRef
  }) {
  	let Option = optionComponent;
  
  	return options.map((option, i) => {
  		let isSelected = valueArray && valueArray.indexOf(option) > -1;
  		let isFocused = option === focusedOption;
  		let optionClass = classNames(optionClassName, {
  			'Select-option': true,
  			'is-selected': isSelected,
  			'is-focused': isFocused,
  			'is-disabled': option.disabled,
  		});
  
  		return (
  			<Option
  				className={optionClass}
  				instancePrefix={instancePrefix}
  				isDisabled={option.disabled}
  				isFocused={isFocused}
  				isSelected={isSelected}
  				key={`option-${i}-${option[valueKey]}`}
  				onFocus={onFocus}
  				onSelect={onSelect}
  				option={option}
  				optionIndex={i}
  				ref={ref => { onOptionRef(ref, isFocused); }}
  			>
  				{optionRenderer(option, i)}
  			</Option>
  		);
  	});
  }
  
  module.exports = menuRenderer;
  