Event handler props on input component should be non-optional (#768)

* Event handler props on input component should be non-optional

* version and changelog change

---------

Co-authored-by: rishabhpoddar <[email protected]>

Author: amitbadala

CHANGELOG.md

@@ -5,7 +5,11 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html)
 
-## [0.35.7] - 2023-11-16
+## [0.35.8] - 2023-11-26
+
+-   Fixes `inputComponent` props to make them non optional. This is in the context of customizing the sign up form to add custom react components.
+
+## [0.35.7] - 2023-11-24
 
 ### Added
 

lib/build/recipe/emailpassword/components/library/input.d.ts

@@ -31,9 +31,9 @@ export type InputProps = {
     hasError: boolean;
     placeholder: string;
     value: string;
-    onInputBlur?: (value: string) => void;
-    onInputFocus?: (value: string) => void;
-    onChange?: (value: string) => void;
+    onInputBlur: (value: string) => void;
+    onInputFocus: (value: string) => void;
+    onChange: (value: string) => void;
 };
 
 const Input: React.FC<InputProps> = ({

lib/build/version.d.ts

@@ -12,4 +12,4 @@
  * License for the specific language governing permissions and limitations
  * under the License.
  */
-export const package_version = "0.35.7";
+export const package_version = "0.35.8";

lib/ts/recipe/emailpassword/components/library/input.tsx

@@ -1,6 +1,6 @@
 {
     "name": "supertokens-auth-react",
-    "version": "0.35.7",
+    "version": "0.35.8",
     "description": "ReactJS SDK that provides login functionality with SuperTokens.",
     "main": "./index.js",
     "engines": {

lib/ts/version.ts

@@ -400,9 +400,7 @@ function getEmailPasswordConfigs() {
                                     value={inputProps.value}
                                     checked={inputProps.value === "true"}
                                     onChange={(e) => {
-                                        if (inputProps.onChange) {
-                                            inputProps.onChange(e.target.checked.toString());
-                                        }
+                                        inputProps.onChange(e.target.checked.toString());
                                     }}></input>
                                 <span style={{ marginLeft: 5 }}>I agree to the terms and conditions</span>
                             </div>
@@ -421,21 +419,15 @@ function getEmailPasswordConfigs() {
                         inputComponent: (inputProps) => (
                             <select
                                 onBlur={(e) => {
-                                    if (inputProps.onInputBlur) {
-                                        inputProps.onInputBlur(e.target.value);
-                                    }
+                                    inputProps.onInputBlur(e.target.value);
                                 }}
                                 onFocus={(e) => {
-                                    if (inputProps.onInputFocus) {
-                                        inputProps.onInputFocus(e.target.value);
-                                    }
+                                    inputProps.onInputFocus(e.target.value);
                                 }}
                                 value={inputProps.value}
                                 name={inputProps.name}
                                 onChange={(e) => {
-                                    if (inputProps.onChange) {
-                                        inputProps.onChange(e.target.value);
-                                    }
+                                    inputProps.onChange(e.target.value);
                                 }}>
                                 <option value="" disabled hidden>
                                     Select an option