@granto-umbrella/umbrella-components 2.0.8 → 2.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@granto-umbrella/umbrella-components",
-  "version": "2.0.8",
+  "version": "2.1.0",
   "description": "Umbrella Components for React",
   "type": "module",
   "main": "src/index.js",

package/src/components/atoms/Input/Input.tsx

@@ -40,6 +40,8 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
       style,
       register,
       testId,
+      className,
+      onBlur,
     },
     ref
   ) => {
@@ -62,6 +64,8 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
             placeholder={placeholder}
             value={value}
             onChange={onChange}
+            onBlur={onBlur}
+            className={className}
             disabled={disabled}
           />
         </InputWrapper>

package/src/components/atoms/Input/Input.types.ts

@@ -4,6 +4,8 @@ export interface InputProps {
   placeholder?: string;
   value?: string;
   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  onBlur?: () => void;
+  className?: string;
   error?: boolean;
   disabled?: boolean;
   icon?: React.ReactNode;

package/src/components/atoms/Select/Select.styles.ts

@@ -88,4 +88,8 @@ export const CustomSelect = styled(Select).attrs({
   .react-select__indicator-separator {
     background-color: ${semanticColors.base.background};
   }
+
+  .react-select__input-container {
+    padding: 0px;
+  }
 `;

package/src/components/atoms/Textarea/Textarea.styles.ts

@@ -41,6 +41,7 @@ export const StyledTextarea = styled.textarea`
   }
 
   &:disabled {
+    color: ${semanticColors.neutral[300]};
     background-color: ${semanticColors.neutral[100]};
     cursor: not-allowed;
   }