@weareconceptstudio/form 0.2.5 → 0.2.7

package/dist/form/hooks/rules.js

@@ -30,7 +30,7 @@ export const useRules = ({ rules, required, requiredMessage, childType, errorKey
         if (childType.toLowerCase() === 'phone') {
             r.push({
                 validator: (value) => {
-                    if (required || value.length > 0) {
+                    if (required || value?.length > 0) {
                         return isValidPhoneNumber(value);
                     }
                     return true;

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' && 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

@@ -26,9 +26,10 @@ const PhoneNumber = forwardRef(({ name, className, autoComplete = 'new-password'
             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 || '' });
                     setValue(name, value || '');
-                    trigger(name);
+                    control._options.mode == 'onChange' && trigger(name);
                 }, onBlur: () => {
                     onBlur();
+                    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.5",
+	"version": "0.2.7",
 	"description": "Concept Studio Form",
 	"author": "Concept Studio",
 	"license": "ISC",