import { useColorModeValue , useFormControl } from "@chakra-ui/react" ; import { GroupBase , Props } from "react-select" ; import chakraComponents from "./chakra-components" ; import { SelectedOptionStyle , Size , TagVariant } from "./types" ; const useChakraSelectProps = < Option , IsMulti extends boolean = false , Group extends GroupBase < Option > = GroupBase < Option > > ( { styles , components = { } , theme , size = "md" , colorScheme = "gray" , isDisabled , isInvalid , inputId , tagVariant , hasStickyGroupHeaders = false , selectedOptionStyle = "color" , selectedOptionColor = "blue" , focusBorderColor , errorBorderColor , chakraStyles = { } , ... props } ) : Props < Option , IsMulti , Group > => { const inputProps = useFormControl ( { isDisabled , isInvalid } ) ; const placeholderColor = useColorModeValue ( "gray.400" , "whiteAlpha.400" ) ; let realSize = size ; const sizeOptions = [ "sm" , "md" , "lg" ] ; if ( ! sizeOptions . includes ( size ) ) { realSize = "md" ; } let realTagVariant = tagVariant ; const tagVariantOptions = [ "subtle" , "solid" , "outline" ] ; if ( tagVariant !== undefined ) { if ( ! tagVariantOptions . includes ( tagVariant ) ) { realTagVariant = "subtle" ; } } let realSelectedOptionStyle = selectedOptionStyle ; const selectedOptionStyleOptions = [ "color" , "check" ] ; if ( ! selectedOptionStyleOptions . includes ( selectedOptionStyle ) ) { realSelectedOptionStyle = "color" ; } let realSelectedOptionColor = selectedOptionColor ; if ( typeof selectedOptionColor !== "string" ) { realSelectedOptionColor = "blue" ; } const select = { components : { ... chakraComponents , ... components , } , colorScheme , size : realSize , tagVariant : realTagVariant , selectedOptionStyle : realSelectedOptionStyle , selectedOptionColor : realSelectedOptionColor , isDisabled : inputProps . disabled , isInvalid : ! ! inputProps [ "aria-invalid" ] , inputId : inputId || inputProps . id , hasStickyGroupHeaders , placeholderColor , chakraStyles , focusBorderColor , errorBorderColor , ... props , "aria-invalid" : props [ "aria-invalid" ] ?? inputProps [ "aria-invalid" ] ? true : undefined , } ; return select ; } ; export default useChakraSelectProps ;