@weareconceptstudio/form 0.2.6 → 0.2.8

package/dist/input/Input.js

@@ -1,10 +1,10 @@
 import React, { forwardRef, useImperativeHandle } from 'react';
-import BaseInput from './BaseInput';
-import { useInput } from '../form/hooks/useInput';
 import { useTranslation } from '@weareconceptstudio/core';
+import { useInput } from '../form/hooks/useInput';
+import BaseInput from './BaseInput';
 const Input = forwardRef((props, ref) => {
     useImperativeHandle(ref, () => ({ childType: 'input' }));
-    const { name, autoComplete = 'new-password', onChange, onFocus, onBlur, onKeyDown, onKeyUp, disabled, className, type = 'text', placeholder } = props;
+    const { name, autoComplete = 'new-password', onChange, onFocus, onBlur, onKeyDown, onKeyUp, disabled, className, placeholder, type = 'text', uppercase = true } = props;
     const { translate } = useTranslation();
     const { field } = useInput({
         type,
@@ -12,8 +12,17 @@ const Input = forwardRef((props, ref) => {
         onChange,
         onBlur,
     });
+    //! On Uppercase
+    const inputFirstLatterUppercase = type == 'text' && (name == 'first_name' || name == 'firstName' || name == 'last_name' || name == 'lastName' || name == 'name') && uppercase
+        ? (e) => {
+            let inputValue = e.target.value.trimStart();
+            if (e.target.value.length > 0) {
+                e.target.value = inputValue.charAt(0).toUpperCase() + inputValue.slice(1);
+            }
+        }
+        : null;
     return (React.createElement(BaseInput, { ...props, value: field.value, disabled: disabled },
-        React.createElement("input", { type: type, onFocus: onFocus, onKeyUp: onKeyUp, disabled: disabled, className: className, onKeyDown: onKeyDown, placeholder: translate(placeholder), autoComplete: autoComplete, ...field })));
+        React.createElement("input", { type: type, onFocus: onFocus, onKeyUp: onKeyUp, disabled: disabled, className: className, onKeyDown: onKeyDown, autoComplete: autoComplete, onInput: inputFirstLatterUppercase, placeholder: translate(placeholder), ...field })));
 });
 if (process.env.NODE_ENV !== 'production') {
     Input.displayName = 'Input';

package/dist/input/Number/index.js

@@ -3,25 +3,28 @@ import Input from '../Input';
 const Number = (props) => {
     //! Disable number input scroll
     useEffect(() => {
-        const handleMouseWheel = (e) => {
-            e.target.blur();
+        const handleWheel = (e) => {
+            if (e.target.type === 'number') {
+                e.target.blur();
+            }
         };
         const handleKeyDown = (e) => {
-            const key = e.charCode || e.keyCode;
-            if (key === 38 || key === 40) {
-                e.preventDefault();
+            if (e.target.type === 'number') {
+                const key = e.charCode || e.keyCode;
+                //! Prevent arrow keys (38 = Up, 40 = Down)
+                if (key === 38 || key === 40) {
+                    e.preventDefault();
+                }
             }
         };
-        const numberInputs = document.querySelectorAll('input[type="number"]');
-        numberInputs.forEach((input) => {
-            input.addEventListener('mousewheel', handleMouseWheel);
-            input.addEventListener('keydown', handleKeyDown);
-        });
+        document.addEventListener('wheel', handleWheel, { passive: false });
+        document.addEventListener('mousewheel', handleWheel, { passive: false });
+        document.addEventListener('keydown', handleKeyDown);
+        //! ✅ Correct cleanup function
         return () => {
-            numberInputs.forEach((input) => {
-                input.removeEventListener('mousewheel', handleMouseWheel);
-                input.removeEventListener('keydown', handleKeyDown);
-            });
+            document.removeEventListener('wheel', handleWheel);
+            document.removeEventListener('mousewheel', handleWheel);
+            document.removeEventListener('keydown', handleKeyDown);
         };
     }, []);
     return (React.createElement(Input, { type: 'number', ...props }));

package/dist/input/TextArea/index.js

@@ -1,8 +1,8 @@
 import React, { forwardRef, useImperativeHandle } from 'react';
-import BaseInput from '../BaseInput';
-import { useInput } from '../../form/hooks/useInput';
 import { useTranslation } from '@weareconceptstudio/core';
-const TextArea = forwardRef((props, ref) => {
+import { useInput } from '../../form/hooks/useInput';
+import BaseInput from '../BaseInput';
+const TextArea = forwardRef(({ uppercase = true, ...props }, ref) => {
     useImperativeHandle(ref, () => ({ childType: 'textarea' }));
     const { translate } = useTranslation();
     const { name, placeholder, rows = 5, onChange, onFocus, onBlur, onKeyDown, onKeyUp, disabled, className, autoComplete } = props;
@@ -11,8 +11,17 @@ const TextArea = forwardRef((props, ref) => {
         onChange: onChange,
         onBlur: onBlur,
     };
+    //! On Uppercase
+    const inputFirstLatterUppercase = uppercase
+        ? (e) => {
+            let inputValue = e.target.value.trimStart();
+            if (e.target.value.length > 0) {
+                e.target.value = inputValue.charAt(0).toUpperCase() + inputValue.slice(1);
+            }
+        }
+        : null;
     return (React.createElement(BaseInput, { ...props },
-        React.createElement("textarea", { ...field, rows: rows, onFocus: onFocus, onKeyUp: onKeyUp, disabled: disabled, className: className, onKeyDown: onKeyDown, autoComplete: autoComplete, placeholder: translate(placeholder) })));
+        React.createElement("textarea", { ...field, rows: rows, onFocus: onFocus, onKeyUp: onKeyUp, disabled: disabled, className: className, onKeyDown: onKeyDown, autoComplete: autoComplete, onInput: inputFirstLatterUppercase, placeholder: translate(placeholder) })));
 });
 if (process.env.NODE_ENV !== 'production') {
     TextArea.displayName = 'TextArea';

package/dist/phone-number/index.js

@@ -24,12 +24,13 @@ const PhoneNumber = forwardRef(({ name, className, autoComplete = 'new-password'
     }, [name, getValues, setValue, country]);
     return (React.createElement(Controller, { name: name, control: control, render: ({ field: { onChange, value, onBlur } }) => {
             return (React.createElement(PhoneInput, { name: name, international: true, value: value, country: country, maxLength: maxLength, withCountryCallingCode: true, className: classString, autoComplete: autoComplete, onChange: (value) => {
-                    onChange({ value: value || '' });
+                    onChange(value || '');
                     setValue(name, value || '');
-                    control._options.mode == 'onChange' && trigger(name);
+                    // control._options.mode == 'onChange' && trigger(name);
+                    trigger(name);
                 }, onBlur: () => {
                     onBlur();
-                    control._options.mode == 'onBlur' && trigger(name);
+                    // control._options.mode == 'onBlur' && trigger(name);
                 }, ...options }));
         } }));
 });

package/dist/styles/formStyle.js

@@ -46,11 +46,11 @@ const FormStyle = createGlobalStyle `${css `
 	input[type='search']::-webkit-search-cancel-button,
 	input[type='search']::-webkit-search-results-button,
 	input[type='search']::-webkit-search-results-decoration {
-		-webkit-appearance: none;
+		-webkit-appearance: none !important;
 	}
 
 	input[type='number'] {
-		-moz-appearance: textfield;
+		-moz-appearance: textfield !important;
 	}
 
 	input:focus::placeholder {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@weareconceptstudio/form",
-	"version": "0.2.6",
+	"version": "0.2.8",
 	"description": "Concept Studio Form",
 	"author": "Concept Studio",
 	"license": "ISC",