diff --git a/src/use-chakra-select-props.ts b/src/use-chakra-select-props.ts index a68d437..4d18989 100644 --- a/src/use-chakra-select-props.ts +++ b/src/use-chakra-select-props.ts @@ -13,17 +13,17 @@ const useChakraSelectProps = < // eslint-disable-next-line deprecation/deprecation theme, size, - tagColorScheme = "gray", isDisabled, isInvalid, isReadOnly, required, isRequired, inputId, - tagVariant, selectedOptionStyle = "color", selectedOptionColorScheme = "blue", variant, + tagColorScheme, + tagVariant, focusBorderColor, errorBorderColor, chakraStyles = {}, @@ -33,7 +33,12 @@ const useChakraSelectProps = < ...props }: Props): Props => { const chakraTheme = useTheme(); - const { variant: defaultVariant } = chakraTheme.components.Input.defaultProps; + const { variant: defaultVariant = "outline" } = + chakraTheme.components.Input.defaultProps; + const { + colorScheme: defaultTagColorScheme = "gray", + variant: defaultTagVariant = "subtle", + } = chakraTheme.components.Tag.defaultProps; // Combine the props passed into the component with the props that can be set // on a surrounding form control to get the values of `isDisabled` and @@ -61,23 +66,23 @@ const useChakraSelectProps = < // Ensure that the color used for the selected options is a string let realSelectedOptionColorScheme: string = selectedOptionColorScheme; - if (typeof realSelectedOptionColorScheme !== "string") { + if (!(selectedOptionColorScheme in chakraTheme.colors)) { realSelectedOptionColorScheme = "blue"; } - const select: Props = { + const selectProps: Props = { // Allow overriding of custom components components: { ...chakraComponents, ...components, }, // Custom select props - tagColorScheme, size, - tagVariant, selectedOptionStyle: realSelectedOptionStyle, selectedOptionColorScheme: realSelectedOptionColorScheme, variant: variant ?? defaultVariant, + tagColorScheme: tagColorScheme ?? defaultTagColorScheme, + tagVariant: tagVariant ?? defaultTagVariant, chakraStyles, focusBorderColor, errorBorderColor, @@ -96,7 +101,7 @@ const useChakraSelectProps = < "aria-invalid": props["aria-invalid"] ?? inputProps["aria-invalid"], }; - return select; + return selectProps; }; export default useChakraSelectProps;