tp-react-elements-dev 1.4.11 → 1.4.14

package/dist/components/Form/FormRender.d.ts

@@ -4,6 +4,9 @@ interface OptionsProps {
     label: string | boolean | number;
     value: string | number;
 }
+interface TextFieldInputProps {
+    autoComplete: 'new-password' | 'off';
+}
 export interface FormSectionPropsItem {
     name: string;
     label: string;
@@ -25,6 +28,7 @@ export interface FormSectionPropsItem {
     monthSpan?: number;
     variant?: string;
     allowSpecialChars?: boolean;
+    InputProps?: TextFieldInputProps;
 }
 export interface FormRenderProps {
     item: FormSectionPropsItem;

package/dist/index.esm.js

@@ -52082,24 +52082,27 @@ const PasswordField = ({ props }) => {
     const handleTogglePasswordVisibility = () => {
         setShowPassword((prevShowPassword) => !prevShowPassword);
     };
-    return (jsxRuntimeExports.jsxs(FormControl, Object.assign({ fullWidth: true }, { children: [" ", jsxRuntimeExports.jsx(Controller, { control: props.control, name: props.item.name, render: ({ field }) => (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsxs(Box, Object.assign({ sx: { position: "relative" } }, { children: [" ", jsxRuntimeExports.jsx(TextField, Object.assign({ size: "small", type: showPassword ? "text" : "password" }, field, { label: `${props.item.label}${props.item.required ? ' *' : ''}`, sx: {
-                                        width: "100%",
-                                        "& .css-kichxs-MuiFormLabel-root-MuiInputLabel-root,.css-1holvmy": {
-                                            top: "-8px",
-                                        },
-                                    }, value: field.value || null, disabled: props.item.disable })), jsxRuntimeExports.jsx(IconButton, Object.assign({ sx: {
-                                        position: "absolute",
-                                        right: "14px",
-                                        top: "50%",
-                                        transform: "translateY(-50%)",
-                                        width: '25px'
-                                    }, "aria-label": "toggle password visibility", onClick: handleTogglePasswordVisibility, edge: "end" }, { children: showPassword ? (jsxRuntimeExports.jsx(Visibility, { sx: {
-                                            fontSize: "12px",
-                                            position: "absolute",
-                                        } })) : (jsxRuntimeExports.jsx(VisibilityOff, { sx: {
-                                            fontSize: "12px",
+    return (jsxRuntimeExports.jsxs(FormControl, Object.assign({ fullWidth: true }, { children: [" ", jsxRuntimeExports.jsx(Controller, { control: props.control, name: props.item.name, render: ({ field }) => {
+                    var _a, _b;
+                    return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsxs(Box, Object.assign({ sx: { position: "relative" } }, { children: [" ", jsxRuntimeExports.jsx(TextField, Object.assign({ size: "small", type: showPassword ? "text" : "password", autoComplete: ((_b = (_a = props.item) === null || _a === void 0 ? void 0 : _a.InputProps) === null || _b === void 0 ? void 0 : _b.autoComplete) || 'off', placeholder: props.item.placeholder || "" }, field, { label: `${props.item.label}${props.item.required ? ' *' : ''}`, sx: {
+                                            width: "100%",
+                                            "& .css-kichxs-MuiFormLabel-root-MuiInputLabel-root,.css-1holvmy": {
+                                                top: "-8px",
+                                            },
+                                        }, value: field.value || null, disabled: props.item.disable })), jsxRuntimeExports.jsx(IconButton, Object.assign({ sx: {
                                             position: "absolute",
-                                        } })) }))] })), jsxRuntimeExports.jsx(ErrorMessageComponent, { children: jsxRuntimeExports.jsx(s, { errors: props.errors, name: props.item.name }) })] })) })] })));
+                                            right: "14px",
+                                            top: "50%",
+                                            transform: "translateY(-50%)",
+                                            width: '25px'
+                                        }, "aria-label": "toggle password visibility", onClick: handleTogglePasswordVisibility, edge: "end" }, { children: showPassword ? (jsxRuntimeExports.jsx(Visibility, { sx: {
+                                                fontSize: "12px",
+                                                position: "absolute",
+                                            } })) : (jsxRuntimeExports.jsx(VisibilityOff, { sx: {
+                                                fontSize: "12px",
+                                                position: "absolute",
+                                            } })) }))] })), jsxRuntimeExports.jsx(ErrorMessageComponent, { children: jsxRuntimeExports.jsx(s, { errors: props.errors, name: props.item.name }) })] }));
+                } })] })));
 };
 
 const Monthpickerrender = ({ props }) => {
@@ -52293,7 +52296,7 @@ const RenderForm = (props) => {
                         var _a, _b;
                         return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(TextField, Object.assign({}, field, { fullWidth: true, 
                                     // error={props.errors}
-                                    label: `${props.item.label}${props.item.required ? ' *' : ''}`, InputProps: {
+                                    label: `${props.item.label}${props.item.required ? ' *' : ''}`, placeholder: props.item.placeholder || "", InputProps: {
                                         style: {
                                             fontFamily: "Roboto-Reg",
                                             border: "none",
@@ -52868,9 +52871,9 @@ const FormRenderWrapper = ({ formArray, name, numberOfColumns = 3, form, }) => {
     // useEffect(() => {
     //   // form.reset(initialValues, { resolver: yupResolver(validationSchema) });
     // }, [formArray, validationSchema, initialValues]);
-    return (jsxRuntimeExports.jsx(ThemeProvider, Object.assign({ theme: customTheme }, { children: jsxRuntimeExports.jsx(FormComponent, Object.assign({ container: true, margin: "auto" }, { children: formArray.map((item, i) => {
-                return (jsxRuntimeExports.jsx(Formitem, Object.assign({ container: true, sx: item.CustomProps, noOfColumn: item.numberOfColumns || numberOfColumns }, { children: jsxRuntimeExports.jsx(RenderForm, { item: item, register: form.register, control: form.control, errors: form.formState.errors, getValues: form.getValues, clearErrors: form.clearErrors, setValue: form.setValue }) }), i));
-            }) })) })));
+    return (jsxRuntimeExports.jsx(ThemeProvider, Object.assign({ theme: customTheme }, { children: jsxRuntimeExports.jsx(Box, Object.assign({ component: 'form', autoComplete: "off" }, { children: jsxRuntimeExports.jsx(FormComponent, Object.assign({ container: true, margin: "auto" }, { children: formArray.map((item, i) => {
+                    return (jsxRuntimeExports.jsx(Formitem, Object.assign({ container: true, sx: item.CustomProps, noOfColumn: item.numberOfColumns || numberOfColumns }, { children: jsxRuntimeExports.jsx(RenderForm, { item: item, register: form.register, control: form.control, errors: form.formState.errors, getValues: form.getValues, clearErrors: form.clearErrors, setValue: form.setValue }) }), i));
+                }) })) })) })));
 };
 
 /**
@@ -55124,6 +55127,14 @@ const useFormValidatingContext = (formArray) => {
                         .required(field.errorMessage);
                 }
                 break;
+            case "password":
+                initialValues[field.name] = "";
+                if (field.required && field.errorMessage) {
+                    validationShape[field.name] = create$6()
+                        .typeError(field.errorMessage)
+                        .required(field.errorMessage);
+                }
+                break;
             case "email":
                 initialValues[field.name] = "";
                 if (field.required && field.errorMessage) {
@@ -55203,15 +55214,6 @@ const useFormValidatingContext = (formArray) => {
                     });
                 }
                 break;
-            case "password":
-                initialValues[field.name] = "";
-                if (field.required && field.errorMessage) {
-                    validationShape[field.name] = create$5()
-                        .nullable()
-                        .typeError(`Please enter ${field.label}`)
-                        .required(field.errorMessage);
-                }
-                break;
             case "select":
                 initialValues[field.name] = "";
                 if (field.required && field.errorMessage) {