[Major] onChange and onBlur undefined error parameter in Text, Number and Password

docs/src/pages/components/cdk-components/number-input/api.jsx

@@ -14,7 +14,9 @@ const NumberInputPropsTable = () => {
         <td>
           <code></code>
         </td>
-        <td>Initial value of the input element, only when it is uncontrolled.</td>
+        <td>
+          Initial value of the input element, only when it is uncontrolled.
+        </td>
       </tr>
       <tr>
         <td>value: string</td>
@@ -82,7 +84,7 @@ const NumberInputPropsTable = () => {
           user is lower than min, the onBlur and onChange functions will be
           called with the current value and an internal error informing that the
           current value is not correct. If a valid state is reached, the error
-          parameter will be null in both events.
+          parameter will not be defined in both events.
         </td>
       </tr>
       <tr>
@@ -93,7 +95,7 @@ const NumberInputPropsTable = () => {
           user surpasses max, the onBlur and onChange functions will be called
           with the current value and an internal error informing that the
           current value is not correct. If a valid state is reached, the error
-          parameter will be null in both events.
+          parameter will not be defined in both events.
         </td>
       </tr>
       <tr>
@@ -113,7 +115,7 @@ const NumberInputPropsTable = () => {
           the error (if the value entered is not valid) will be passed to this
           function. An example of this object is: {"{ "}
           <code>value: value, error: error</code>
-          {" }"}. If there is no error, error will be null.
+          {" }"}. If there is no error, error will not be defined.
         </td>
       </tr>
       <tr>
@@ -125,16 +127,19 @@ const NumberInputPropsTable = () => {
           entered is not valid) will be passed to this function. An example of
           this object is: {"{ "}
           <code>value: value, error: error</code>
-          {" }"}. If there is no error, error will be null.
+          {" }"}. If there is no error, error will not be defined.
         </td>
       </tr>
       <tr>
         <td>error: string</td>
         <td></td>
         <td>
-          If it is defined, the component will change its appearance, showing
-          the error below the input component. If it is not defined, the error
-          messages will be managed internally, but never displayed on its own.
+          If it is a defined value and also a truthy string, the component will
+          change its appearance, showing the error below the input component. If
+          the defined value is an empty string, it will reserve a space below
+          the component for a future error, but it would not change its look. In
+          case of being undefined or null, both the appearance and the space for
+          the error message would not be modified.
         </td>
       </tr>
       <tr>

docs/src/pages/components/cdk-components/number-input/examples/customErrorsNumberInput.js

@@ -3,20 +3,20 @@ import { useState } from "react";
 
 const code = `() => {
   const [value, setValue] = useState("");
-  const [errorMessage, setErrorMessage] = useState("");
+  const [errorMessage, setErrorMessage] = useState();
   const onChange = ({ value, error }) => {
     setValue(value);
-    error ? setErrorMessage("Invalid number.") : setErrorMessage("");
+    setErrorMessage(error);
   };
 
   const [secondValue, setSecondValue] = useState("");
-  const [customErrorOnChange, setCustomErrorOnChange] = useState("");
+  const [customErrorOnChange, setCustomErrorOnChange] = useState();
   const onChangeSecond = ({ value }) => {
     setSecondValue(value);
   };
   const onBlur = ({ value, error }) => {
     setSecondValue(value);
-    error ? setCustomErrorOnChange("The typed number is not valid. Please, check it.") : setCustomErrorOnChange("");
+    setCustomErrorOnChange(error);
   };
 
   return (
@@ -26,7 +26,7 @@ const code = `() => {
         helperText="Using onChange event for handling errors"
         value={value}
         onChange={onChange}
-        error={errorMessage}
+        error={errorMessage == undefined ? "" : "Invalid number."}
         min={5}
         max={20}
         step={5}
@@ -39,7 +39,7 @@ const code = `() => {
         value={secondValue}
         onChange={onChangeSecond}
         onBlur={onBlur}
-        error={customErrorOnChange}
+        error={customErrorOnChange == undefined ? "" : "The typed number is not valid. Please, check it."}
         min={5}
         max={20}
         step={5}

docs/src/pages/components/cdk-components/number-input/examples/minMaxStepNumberInput.js

@@ -3,7 +3,7 @@ import { useState } from "react";
 
 const code = `() => {
   const [value, setValue] = useState("");
-  const [error, setError] = useState("");
+  const [error, setError] = useState();
 
   const onChange = ({ value }) => {
     setValue(value);
@@ -19,7 +19,7 @@ const code = `() => {
       value={value}
       onChange={onChange}
       onBlur={onBlur}
-      error={error}
+      error={error == undefined ? "" : error}
       min={5}
       max={20}
       step={5}

docs/src/pages/components/cdk-components/password-input/api.jsx

@@ -52,7 +52,7 @@ const PasswordInputPropsTable = () => {
           the error (if the value entered is not valid) will be passed to this
           function. An example of this object is: {"{ "}
           <code>value: value, error: error</code>
-          {" }"}. If there is no error, error will be null.
+          {" }"}. If there is no error, error will not be defined.
         </td>
       </tr>
       <tr>
@@ -64,17 +64,19 @@ const PasswordInputPropsTable = () => {
           entered is not valid) will be passed to this function. An example of
           this object is: {"{ "}
           <code>value: value, error: error</code>
-          {" }"}. If there is no error, error will be null.
+          {" }"}. If there is no error, error will not be defined.
         </td>
       </tr>
       <tr>
         <td>error: string</td>
         <td></td>
         <td>
-          If it is defined, the component will change its appearance, showing
-          the error below the password input component. If it is not defined,
-          the error messages will be managed internally, but never displayed on
-          its own.
+          If it is a defined value and also a truthy string, the component will
+          change its appearance, showing the error below the password input
+          component. If the defined value is an empty string, it will reserve a
+          space below the component for a future error, but it would not change
+          its look. In case of being undefined or null, both the appearance and
+          the space for the error message would not be modified.
         </td>
       </tr>
       <tr>
@@ -87,7 +89,7 @@ const PasswordInputPropsTable = () => {
           match the pattern, the onBlur and onChange functions will be called
           with the current value and an internal error informing that this value
           does not match the pattern. If the pattern is met, the error parameter
-          of both events will be null.
+          of both events will not be defined.
         </td>
       </tr>
       <tr>
@@ -100,7 +102,7 @@ const PasswordInputPropsTable = () => {
           the onBlur and onChange functions will be called with the current
           value and an internal error informing that the value length does not
           comply the specified range. If a valid length is reached, the error
-          parameter of both events will be null.
+          parameter of both events will not be defined.
         </td>
       </tr>
       <tr>
@@ -113,7 +115,7 @@ const PasswordInputPropsTable = () => {
           the onBlur and onChange functions will be called with the current
           value and an internal error informing that the value length does not
           comply the specified range. If a valid length is reached, the error
-          parameter of both events will be null.
+          parameter of both events will not be defined.
         </td>
       </tr>
       <tr>

docs/src/pages/components/cdk-components/password-input/examples/customErrorsPasswordInput.js

@@ -3,20 +3,20 @@ import { useState } from "react";
 
 const code = `() => {
   const [firstValue, setFirstValue] = useState("");
-  const [customLengthError, setCustomLengthError] = useState("");
+  const [customLengthError, setCustomLengthError] = useState();
   const onChangeFirst = ({ value, error }) => {
     setFirstValue(value);
-    error ? setCustomLengthError("The password does not have the right length.") : setCustomLengthError("");
+    setCustomLengthError(error);
   };
 
   const [secondValue, setSecondValue] = useState("");
-  const [customPatternError, setCustomPatternError] = useState("");
+  const [customPatternError, setCustomPatternError] = useState();
   const onChangeSecond = ({ value }) => {
     setSecondValue(value);
   };
   const onBlur = ({ value, error }) => {
     setSecondValue(value);
-    error ? setCustomPatternError("The password does not comply the allowed format.") : setCustomPatternError("");
+    setCustomPatternError(error);
   };
 
   return (
@@ -28,7 +28,7 @@ const code = `() => {
         onChange={onChangeFirst}
         minLength={5}
         maxLength={10}
-        error={customLengthError}
+        error={customLengthError == undefined ? "" : "The password does not have the right length."}
         margin="medium"
         clearable
       />
@@ -39,7 +39,7 @@ const code = `() => {
         onChange={onChangeSecond}
         onBlur={onBlur}
         pattern='^.*(?=.*[a-zA-Z])(?=.*)(?=.*[!&$%&? "]).*$'
-        error={customPatternError}
+        error={customPatternError == undefined ? "" : "The password does not comply the allowed format."}
         margin="medium"
         clearable
       />

docs/src/pages/components/cdk-components/password-input/examples/lengthPasswordInput.js

@@ -3,7 +3,7 @@ import { useState } from "react";
 
 const code = `() => {
   const [value, setValue] = useState("");
-  const [error, setError] = useState("");
+  const [error, setError] = useState();
 
   const onChange = ({ value }) => {
     setValue(value);
@@ -21,7 +21,7 @@ const code = `() => {
       clearable
       onChange={onChange}
       onBlur={onBlur}
-      error={error}
+      error={error == undefined ? "" : error}
       minLength={5}
       maxLength={10}
       margin="medium"

docs/src/pages/components/cdk-components/password-input/examples/patternPasswordInput.js

@@ -3,7 +3,7 @@ import { useState } from "react";
 
 const code = `() => {
   const [value, setValue] = useState("");
-  const [error, setError] = useState("");
+  const [error, setError] = useState();
 
   const onChange = ({ value }) => {
     setValue(value);
@@ -21,7 +21,7 @@ const code = `() => {
       clearable
       onChange={onChange}
       onBlur={onBlur}
-      error={error}
+      error={error == undefined ? "" : error}
       pattern='^.*(?=.*[a-zA-Z])(?=.*)(?=.*[!&$%&? "]).*$'
       margin="medium"
     />

docs/src/pages/components/cdk-components/text-input/api.jsx

@@ -107,7 +107,7 @@ const textInputPropsTable = () => {
           the error (if the value entered is not valid) will be passed to this
           function. An example of this object is: {"{ "}
           <code>value: value, error: error</code>
-          {" }"}. If there is no error, error will be null.
+          {" }"}. If there is no error, error will not be defined.
         </td>
       </tr>
       <tr>
@@ -119,16 +119,19 @@ const textInputPropsTable = () => {
           entered is not valid) will be passed to this function. An example of
           this object is: {"{ "}
           <code>value: value, error: error</code>
-          {" }"}. If there is no error, error will be null.
+          {" }"}. If there is no error, error will not be defined.
         </td>
       </tr>
       <tr>
         <td>error: string</td>
         <td></td>
         <td>
-          If it is defined, the component will change its appearance, showing
-          the error below the input component. If it is not defined, the error
-          messages will be managed internally, but never displayed on its own.
+          If it is a defined value and also a truthy string, the component will
+          change its appearance, showing the error below the input component. If
+          the defined value is an empty string, it will reserve a space below
+          the component for a future error, but it would not change its look. In
+          case of being undefined or null, both the appearance and the space for
+          the error message would not be modified.
         </td>
       </tr>
       <tr>
@@ -161,7 +164,7 @@ const textInputPropsTable = () => {
           pattern, the onBlur and onChange functions will be called with the
           current value and an internal error informing that this value does not
           match the pattern. If the pattern is met, the error parameter of both
-          events will be null.
+          events will not be defined.
         </td>
       </tr>
       <tr>
@@ -174,7 +177,7 @@ const textInputPropsTable = () => {
           the onBlur and onChange functions will be called with the current
           value and an internal error informing that the value length does not
           comply the specified range. If a valid length is reached, the error
-          parameter of both events will be null.
+          parameter of both events will not be defined.
         </td>
       </tr>
       <tr>
@@ -187,7 +190,7 @@ const textInputPropsTable = () => {
           the onBlur and onChange functions will be called with the current
           value and an internal error informing that the value length does not
           comply the specified range. If a valid length is reached, the error
-          parameter of both events will be null.
+          parameter of both events will not be defined.
         </td>
       </tr>
       <tr>

docs/src/pages/components/cdk-components/text-input/examples/customErrorsTextInput.js

@@ -3,20 +3,20 @@ import { useState } from "react";
 
 const code = `() => {
   const [firstValue, setFirstValue] = useState("");
-  const [customLengthError, setCustomLengthError] = useState("");
+  const [customLengthError, setCustomLengthError] = useState();
   const onChangeFirst = ({ value, error }) => {
     setFirstValue(value);
-    error ? setCustomLengthError("The text input value does not have the right length.") : setCustomLengthError(null);
+    setCustomLengthError(error);
   };
 
   const [secondValue, setSecondValue] = useState("");
-  const [customPatternError, setCustomPatternError] = useState("");
+  const [customPatternError, setCustomPatternError] = useState();
   const onChangeSecond = ({ value }) => {
     setSecondValue(value);
   };
   const onBlur = ({ value, error }) => {
     setSecondValue(value);
-    error ? setCustomPatternError("The text input value does not comply the allowed format.") : setCustomPatternError(null);
+    setCustomPatternError(error);
   };
 
   return (
@@ -28,7 +28,7 @@ const code = `() => {
         onChange={onChangeFirst}
         minLength={5}
         maxLength={10}
-        error={customLengthError}
+        error={customLengthError == undefined ? "" : "The text input value does not have the right length."}
         margin="medium"
         clearable
         optional
@@ -40,7 +40,7 @@ const code = `() => {
         onChange={onChangeSecond}
         onBlur={onBlur}
         pattern='^.*(?=.*[a-zA-Z])(?=.*)(?=.*[!&$%&? "]).*$'
-        error={customPatternError}
+        error={customPatternError == undefined ? "" : "The text input value does not comply the allowed format."}
         margin="medium"
         clearable
         optional

docs/src/pages/components/cdk-components/text-input/examples/lengthTextInput.js

@@ -3,7 +3,7 @@ import { useState } from "react";
 
 const code = `() => {
   const [value, setValue] = useState("");
-  const [error, setError] = useState("");
+  const [error, setError] = useState();
 
   const onChange = ({ value }) => {
     setValue(value);
@@ -20,7 +20,7 @@ const code = `() => {
       value={value}
       onChange={onChange}
       onBlur={onBlur}
-      error={error}
+      error={error == undefined ? "" : error}
       margin="medium"
       clearable
       minLength={5}