@hyphen/hyphen-components 2.15.2 → 2.15.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyphen/hyphen-components",
-  "version": "2.15.2",
+  "version": "2.15.4",
   "license": "MIT",
   "author": {
     "name": "@hyphen"

package/src/components/Formik/FormikSelectInput/FormikSelectInput.tsx

@@ -16,6 +16,7 @@ export interface FormikSelectInputProps
     errors: FormikErrors<FormikValues>;
   };
   onChange?: SelectInputProps['onChange'];
+  error?: any[] | string;
 }
 
 export const FormikSelectInput: React.FC<FormikSelectInputProps> = ({
@@ -25,11 +26,18 @@ export const FormikSelectInput: React.FC<FormikSelectInputProps> = ({
   id,
   label,
   options,
+  error: errorProp,
   ...props
 }) => {
-  const error = getIn(errors, name);
-  const errorMessage =
-    typeof error !== 'string' && error?.find((error: any) => error?.label);
+  let errorMessage;
+  const error = errorProp ?? (getIn(touched, name) && getIn(errors, name));
+
+  if (typeof error === 'string') {
+    errorMessage = error;
+  } else if (error && typeof error !== 'string') {
+    errorMessage = error?.find((err: any) => err?.label)?.label;
+  }
+
   return (
     <SelectInput
       id={id}
@@ -39,7 +47,7 @@ export const FormikSelectInput: React.FC<FormikSelectInputProps> = ({
       onBlur={onBlur}
       onChange={onChange ?? formikOnChange}
       value={value}
-      error={errorMessage?.label ?? (getIn(touched, name) && error)}
+      error={errorMessage}
       {...props}
     />
   );

package/src/components/SelectInput/SelectInput.module.scss

@@ -206,10 +206,15 @@
     }
 
     :global(.react-select__option),
-    :global(.react-select__single-value) {
+    :global(.react-select__single-value),
+    :global(.react-select__input-container) {
       color: var(--color-font-base);
     }
 
+    :global(.react-select__multi-value__remove) {
+      color: var(--color-font-grey);
+    }
+
     :global(.react-select__control) {
       line-height: var(
         --form-control-line-height,