import * as React from 'react' ; import { CSSObject } from '@emotion/core' ; import { EmotionCanvasTheme , ErrorType , Themeable , pickForegroundColor , styled , } from '@workday/canvas-kit-react/common' ; import { colors , commonColors , type } from '@workday/canvas-kit-react/tokens' ; export interface SelectOptionProps extends Themeable , React . LiHTMLAttributes < HTMLLIElement > { /**
     * The type of error associated with the SelectOption (if applicable).
     */ error ? : ErrorType ; default focused ? : boolean ; /**
     * The HTML `id` of the SelectOption.
     */ id ? : string ; default interactive ? : boolean ; /**
     * The ref to the list item that the styled component renders. Use this to imperatively manipulate the SelectOption (e.g., to scroll to it if it's out of view in the Select menu).
     */ optionRef ? : React . Ref < HTMLLIElement > ; /**
     * The value of the SelectOption.
     */ value ? : string ; } const optionPadding = 6 ; const activeStyles = ( theme ) : CSSObject => { const activeBgColor = theme . canvas . palette . primary . main ; return { backgroundColor : activeBgColor , color : pickForegroundColor ( activeBgColor ) , } ; } ; const Option = styled ( 'li' ) < SelectOptionProps > ( { ... type . levels . subtext . large , cursor : 'default' , listStyle : 'none' , minHeight : type . levels . subtext . large . lineHeight , textAlign : 'left' , } , ( { 'aria-disabled' : disabled , focused , interactive , theme } ) => { if ( disabled ) { return { color : colors . licorice100 , } ; } else if ( focused ) { return { ... activeStyles ( theme ) , } ; } else { const selectedBgColor = theme . canvas . palette . primary . lightest ; const selectedStyles = { '&[aria-selected="true"]' : { backgroundColor : selectedBgColor , color : pickForegroundColor ( selectedBgColor ) , } , } ; const interactiveStyles = interactive ? { '&:hover' : { backgroundColor : commonColors . hoverBackground , } , '&:active, &:active[aria-selected="true"]' : { ... activeStyles ( theme ) , } , } : { } ; return { ... interactiveStyles , ... selectedStyles , } ; } } , ( { error } ) => ( { padding : `${ optionPadding }px ${ error === ErrorType . Alert ? optionPadding - 1 : optionPadding }px` , } ) ) ; const SelectOption = ( { children , focused = false , interactive = true , optionRef , value , ... elemProps } ) => { return ( < Option data - value = { value } focused = { focused } interactive = { interactive } ref = { optionRef } role = "option" { ... elemProps } > { children } < /Option>); } ; export default SelectOption ;