jsx import { CSSObject , jsx } from '@emotion/core' ; import { COLOR } from '../Identity' ; import type { Theme } from '../Layout' ; import { filterProps , inlineSVG } from '../util' ; import { InputProps , inputStyle } from './Input' ; export interface SelectProps < T = HTMLSelectElement > extends InputProps < T > { disabled ? : boolean ; markInvalid ? : boolean ; } const ArrowDown = ( theme ) => `
  <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8">
    <path fill="${ theme . general . color }" fillRule="evenodd" d="M0 2h8L4 7" />
  </svg>
` ; export const selectStyle = ( theme , { disabled = false , markInvalid , ... props } ) => ( { ... inputStyle ( theme , props ) , '&:-moz-focusring' : { color : 'transparent' , textShadow : '0 0 0 #000' , } , '&:disabled' : { color : COLOR . GRAY , } , appearance : 'none' , background : disabled ? theme . Input . backgroundColorDisabled : `${ theme . Input . backgroundColor } center right 16px no-repeat url("${ inlineSVG ( ArrowDown ( theme ) ) }")` , boxShadow : markInvalid ? `0 0 0 1px ${ COLOR . RED }` : `0 0 0 1px ${ COLOR . GRAY }` , cursor : disabled ? 'normal' : 'pointer' , fontSize : '16px' , fontWeight : 300 , paddingRight : '30px' , } ) ; const filterSelectProps = ( props ) => filterProps ( props , [ 'markInvalid' ] ) ; export const Select = ( props ) => ( < select css = { theme => selectStyle ( theme , props ) } { ... filterSelectProps ( props ) } />);