@trackunit/react-form-components 0.1.10 → 0.1.12

package/index.cjs.js

@@ -973,11 +973,11 @@ const validateNumber = (number, required = false, min, max) => {
         return "INVALID_NUMBER";
     }
     // if the value is empty and not required
-    if (!Number.isNaN(parsedNumber) && !parsedNumber && !required && !min && !max) {
+    if (!parsedNumber && !required && !min && !max && !!number) {
         return undefined;
     }
     // if the value is empty and required
-    if (!Number.isNaN(parsedNumber) && !parsedNumber && required) {
+    if (required && !!number === false) {
         return "REQUIRED";
     }
     // if the value is not in between min and max
@@ -1016,7 +1016,7 @@ NumberInput.displayName = "NumberInput";
  *
  * _**Do not use**_ this fields for non-serialized numbers. Use TextField instead.
  */
-const NumberField = React.forwardRef(({ label, id, tip, helpText, errorMessage, helpAddon, isInvalid, maxLength, className, value, dataTestId, defaultValue, onBlur, ...rest }, ref) => {
+const NumberField = React.forwardRef(({ label, id, tip, helpText, errorMessage, helpAddon, isInvalid, maxLength, className, value, dataTestId, defaultValue, onBlur, onChange, ...rest }, ref) => {
     const htmlForId = id ? id : "numberField-" + uuid.v4();
     const [t] = useTranslation();
     const [innerValue, setInnerValue] = React.useState(() => {
@@ -1048,7 +1048,13 @@ const NumberField = React.forwardRef(({ label, id, tip, helpText, errorMessage,
         }
         onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
     }, [errorMessage, onBlur, rest.max, rest.min, rest.required]);
-    return (jsxRuntime.jsx(FormGroup, { dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: (renderAsInvalid && error) || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required, tip: tip, children: jsxRuntime.jsx(NumberInput, { "aria-labelledby": htmlForId + "-label", id: htmlForId, isInvalid: renderAsInvalid, maxLength: maxLength, onBlur: handleBlur, ref: ref, value: value, ...rest, className: className, dataTestId: dataTestId }) }));
+    const handleChange = React.useCallback((event) => {
+        setInnerValue(event.target.value);
+        if (onChange) {
+            onChange(event);
+        }
+    }, [onChange]);
+    return (jsxRuntime.jsx(FormGroup, { dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: (renderAsInvalid && error) || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required, tip: tip, children: jsxRuntime.jsx(NumberInput, { "aria-labelledby": htmlForId + "-label", id: htmlForId, isInvalid: renderAsInvalid, maxLength: maxLength, onBlur: handleBlur, onChange: handleChange, ref: ref, value: value, ...rest, className: className, dataTestId: dataTestId }) }));
 });
 NumberField.displayName = "NumberField";
 

package/index.esm.js

@@ -954,11 +954,11 @@ const validateNumber = (number, required = false, min, max) => {
         return "INVALID_NUMBER";
     }
     // if the value is empty and not required
-    if (!Number.isNaN(parsedNumber) && !parsedNumber && !required && !min && !max) {
+    if (!parsedNumber && !required && !min && !max && !!number) {
         return undefined;
     }
     // if the value is empty and required
-    if (!Number.isNaN(parsedNumber) && !parsedNumber && required) {
+    if (required && !!number === false) {
         return "REQUIRED";
     }
     // if the value is not in between min and max
@@ -997,7 +997,7 @@ NumberInput.displayName = "NumberInput";
  *
  * _**Do not use**_ this fields for non-serialized numbers. Use TextField instead.
  */
-const NumberField = forwardRef(({ label, id, tip, helpText, errorMessage, helpAddon, isInvalid, maxLength, className, value, dataTestId, defaultValue, onBlur, ...rest }, ref) => {
+const NumberField = forwardRef(({ label, id, tip, helpText, errorMessage, helpAddon, isInvalid, maxLength, className, value, dataTestId, defaultValue, onBlur, onChange, ...rest }, ref) => {
     const htmlForId = id ? id : "numberField-" + v4();
     const [t] = useTranslation();
     const [innerValue, setInnerValue] = useState(() => {
@@ -1029,7 +1029,13 @@ const NumberField = forwardRef(({ label, id, tip, helpText, errorMessage, helpAd
         }
         onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
     }, [errorMessage, onBlur, rest.max, rest.min, rest.required]);
-    return (jsx(FormGroup, { dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: (renderAsInvalid && error) || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required, tip: tip, children: jsx(NumberInput, { "aria-labelledby": htmlForId + "-label", id: htmlForId, isInvalid: renderAsInvalid, maxLength: maxLength, onBlur: handleBlur, ref: ref, value: value, ...rest, className: className, dataTestId: dataTestId }) }));
+    const handleChange = useCallback((event) => {
+        setInnerValue(event.target.value);
+        if (onChange) {
+            onChange(event);
+        }
+    }, [onChange]);
+    return (jsx(FormGroup, { dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: (renderAsInvalid && error) || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required, tip: tip, children: jsx(NumberInput, { "aria-labelledby": htmlForId + "-label", id: htmlForId, isInvalid: renderAsInvalid, maxLength: maxLength, onBlur: handleBlur, onChange: handleChange, ref: ref, value: value, ...rest, className: className, dataTestId: dataTestId }) }));
 });
 NumberField.displayName = "NumberField";
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-form-components",
-  "version": "0.1.10",
+  "version": "0.1.12",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {