tp-react-elements-dev 1.12.20 → 1.12.22

package/dist/components/FormComponents/FormNumberField/FormNumberFieldDecimal.js

@@ -0,0 +1,45 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { TextField } from '@mui/material';
+import { Controller } from 'react-hook-form';
+import { renderLabel } from '../../../lib/Constants/FormConstants.js';
+import FormBottomField from '../FormBottomField/FormBottomField.js';
+
+const FormNumberFieldDecimal = ({ props, variant, }) => {
+    const fixedLength = props.item.decimalFixedTo || 2;
+    const onInput = (e) => {
+        // Allow numbers, a single decimal point, and negation in the input
+        e.target.value = e.target.value.replace(/[^0-9.-]/g, "");
+        // Ensure only one decimal point is present
+        const decimalPointCount = e.target.value.split(".").length - 1;
+        if (decimalPointCount > 1) {
+            e.target.value = e.target.value.slice(0, -1);
+        }
+        // Ensure only two digits after the decimal point
+        const parts = e.target.value.split(".");
+        if (parts.length === fixedLength && parts[1].length > fixedLength) {
+            e.target.value = `${parts[0]}.${parts[1].slice(0, fixedLength)}`;
+        }
+    };
+    const label = variant !== "standard"
+        ? `${props.item.label}${props.item.required ? " *" : ""}`
+        : "";
+    const isError = !!props.errors?.[props.item.name];
+    const isShowBorderError = isError && props.fieldError;
+    return (jsx(Controller, { name: props.item.name, control: props.control, disabled: props.item?.disable, render: ({ field }) => (jsxs(Fragment, { children: [renderLabel(variant, props), jsx(TextField, { type: "text", size: "small", label: label, error: isShowBorderError, ...field, onChange: () => props?.clearErrors && props?.clearErrors(props.item.name), sx: {
+                        "& input": {
+                            textAlign: "right",
+                        },
+                        "& .css-16hdwvj,.css-1idq7r3-MuiFormLabel-root-MuiInputLabel-root": {
+                            top: "-5px",
+                        },
+                    }, onBlur: (e) => {
+                        props?.item?.onBlurFn && props?.item?.onBlurFn(e);
+                    }, onInput: onInput, InputProps: {
+                        inputProps: {
+                            pattern: "[1-9]",
+                            maxLength: 7,
+                        },
+                    } }), jsx(FormBottomField, { ...props })] })) }, props.item.name));
+};
+
+export { FormNumberFieldDecimal as default };

package/dist/components/FormComponents/FormRadioGroup/FormRadioGroup.d.ts

@@ -1,4 +1,4 @@
-import { FormRenderProps, VariantProps } from "../../../Utilities/Interface/FormInterface";
+import { FormRenderProps, VariantProps } from "../../../lib/Interface/FormInterface";
 declare const FormRadioGroup: ({ props, variant, }: {
     props: FormRenderProps;
     variant: VariantProps;

package/dist/components/FormComponents/FormRadioGroup/FormRadioGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormRadioGroup.d.ts","sourceRoot":"","sources":["../../../../src/components/FormComponents/FormRadioGroup/FormRadioGroup.tsx"],"names":[],"mappings":"AASA,OAAO,EACL,eAAe,EACf,YAAY,EACb,MAAM,4CAA4C,CAAC;AAGpD,QAAA,MAAM,cAAc,GAAI,qBAGrB;IACD,KAAK,EAAE,eAAe,CAAC;IACvB,OAAO,EAAE,YAAY,CAAC;CACvB,4CAwDA,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"FormRadioGroup.d.ts","sourceRoot":"","sources":["../../../../src/components/FormComponents/FormRadioGroup/FormRadioGroup.tsx"],"names":[],"mappings":"AASA,OAAO,EACL,eAAe,EACf,YAAY,EACb,MAAM,sCAAsC,CAAC;AAG9C,QAAA,MAAM,cAAc,GAAI,qBAGrB;IACD,KAAK,EAAE,eAAe,CAAC;IACvB,OAAO,EAAE,YAAY,CAAC;CACvB,4CAwDA,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/components/FormComponents/FormRadioGroup/FormRadioGroup.js

@@ -0,0 +1,26 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { FormControl, RadioGroup, FormControlLabel, Typography, Radio } from '@mui/material';
+import { Controller } from 'react-hook-form';
+import { renderLabel } from '../../../lib/Constants/FormConstants.js';
+import FormBottomField from '../FormBottomField/FormBottomField.js';
+
+const FormRadioGroup = ({ props, variant, }) => {
+    return (jsxs(Fragment, { children: [renderLabel(variant, props), jsx(FormControl, { component: "fieldset", children: jsx(Controller, { name: props.item.name, control: props.control, render: ({ field }) => (jsx(RadioGroup, { value: field.value, onChange: (e) => {
+                            field.onChange(e.target.value); // ✅ update form state
+                            console.log(e.target.value, "radio value selected");
+                            props.item.onChangeFn && props.item.onChangeFn(e.target.value); // optional handler
+                        }, row: true, sx: {
+                            gap: "8px",
+                        }, children: props.item?.settings?.map((option, i) => (jsx(FormControlLabel, { value: option.name, control: jsx(Radio, { sx: {
+                                    padding: "6px 2px 6px 8px",
+                                    color: "black",
+                                    "&.Mui-checked": {
+                                        color: "#1976d2", // blue when selected
+                                    },
+                                    "& .MuiSvgIcon-root": {
+                                        fontSize: 16, // 🔹 this actually controls the radio icon size
+                                    },
+                                } }), label: jsx(Typography, { fontSize: "11px", fontWeight: "normal !important", children: option.label }) }, i))) })) }) }), jsx(FormBottomField, { ...props })] }));
+};
+
+export { FormRadioGroup as default };

package/dist/components/FormComponents/FormTextAreaField/FormTextAreaField.d.ts

@@ -1,4 +1,4 @@
-import { FormRenderProps, VariantProps } from "../../../Utilities/Interface/FormInterface";
+import { FormRenderProps, VariantProps } from "../../../lib/Interface/FormInterface";
 declare const FormTextAreaField: ({ props, variant, }: {
     props: FormRenderProps;
     variant: VariantProps;

package/dist/components/FormComponents/FormTextAreaField/FormTextAreaField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormTextAreaField.d.ts","sourceRoot":"","sources":["../../../../src/components/FormComponents/FormTextAreaField/FormTextAreaField.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,eAAe,EACf,YAAY,EACb,MAAM,4CAA4C,CAAC;AAIpD,QAAA,MAAM,iBAAiB,GAAI,qBAGxB;IACD,KAAK,EAAE,eAAe,CAAC;IACvB,OAAO,EAAE,YAAY,CAAC;CACvB,4CAqDA,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"FormTextAreaField.d.ts","sourceRoot":"","sources":["../../../../src/components/FormComponents/FormTextAreaField/FormTextAreaField.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,eAAe,EACf,YAAY,EACb,MAAM,sCAAsC,CAAC;AAI9C,QAAA,MAAM,iBAAiB,GAAI,qBAGxB;IACD,KAAK,EAAE,eAAe,CAAC;IACvB,OAAO,EAAE,YAAY,CAAC;CACvB,4CAqDA,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/components/FormComponents/FormTextAreaField/FormTextAreaField.js

@@ -0,0 +1,31 @@
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { Controller } from 'react-hook-form';
+import { renderLabel } from '../../../lib/Constants/FormConstants.js';
+import FormBottomField from '../FormBottomField/FormBottomField.js';
+import { TextAreaField } from './FormTextAreaField.styles.js';
+
+const FormTextAreaField = ({ props, variant, }) => {
+    const isError = !!props.errors?.[props.item.name];
+    const isShowBorderError = isError && props.fieldError;
+    return (jsx(Fragment, { children: jsx(Controller, { control: props.control, name: props.item.name, render: ({ field }) => (jsxs(Fragment, { children: [renderLabel(variant, props), jsx(TextAreaField, { multiline: true, size: "small", InputProps: {
+                            style: {
+                                border: "none",
+                            },
+                        }, sx: {
+                            ...props.item.sx,
+                        }, minRows: props.item.minRows || 1, maxRows: props.item.maxRows || 100, placeholder: props.item.placeholder || "Type Something...", ...field, label: variant !== "standard"
+                            ? `${props.item.label}${props.item.required ? " *" : ""}`
+                            : "", error: isShowBorderError, value: field.value || "", disabled: props.item.disable, inputProps: {
+                            onInput: (e) => {
+                                if (!props?.item?.allowSpecialChars) {
+                                    const value = e.target.value;
+                                    e.target.value = value.replace(/[^a-zA-Z0-9 ]/g, "");
+                                } // Allow only alphanumeric and space
+                                if (e.target.value.length === 1 && e.target.value === " ") {
+                                    e.target.value = "";
+                                }
+                            },
+                        } }), jsx(FormBottomField, { ...props })] })) }, props.item.name) }));
+};
+
+export { FormTextAreaField as default };

package/dist/components/FormComponents/FormTextAreaField/FormTextAreaField.styles.js

@@ -0,0 +1,35 @@
+import styled from '@emotion/styled';
+import { TextField } from '@mui/material';
+
+const TextAreaField = styled(TextField)(() => ({
+    "& .css-1holvmy,.css-lqj8pz-MuiFormLabel-root-MuiInputLabel-root, .css-kichxs-MuiFormLabel-root-MuiInputLabel-root": {
+        top: "-10px",
+    },
+    "& input": {
+        fontSize: "11px",
+    },
+    "& .css-2rul56-MuiFormLabel-root-MuiInputLabel-root": {
+        top: "-10px",
+    },
+    "& .css-12ciryo-MuiFormLabel-root-MuiInputLabel-root ": {},
+    "& .css-1gq5vhi-MuiInputBase-root-MuiOutlinedInput-root input ": {
+        outline: "none",
+        border: "1px solid #ced4da", // Add this line to set border to none
+    },
+    "& .css-1gq5vhi-MuiInputBase-root-MuiOutlinedInput-root input:focus ": {
+        outline: "none",
+        border: "none", // Set border to none when input is focused
+    },
+    "& .css-1y03twt-MuiInputBase-root-MuiOutlinedInput-root": {
+        padding: "5px 5px", // Set border to none when input is focused
+        fontSize: "11px",
+    },
+    "& textarea": {
+        fontSize: "11px",
+        // textTransform:'uppercase'
+        maxHeight: "500px !important",
+        overflow: "auto",
+    },
+}));
+
+export { TextAreaField };

package/dist/components/FormComponents/FormTextField/FormTextField.d.ts

@@ -1,4 +1,4 @@
-import { FormRenderProps, VariantProps } from "../../../Utilities/Interface/FormInterface";
+import { FormRenderProps, VariantProps } from "../../../lib/Interface/FormInterface";
 declare const FormTextField: ({ props, variant, }: {
     props: FormRenderProps;
     variant: VariantProps;

package/dist/components/FormComponents/FormTextField/FormTextField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormTextField.d.ts","sourceRoot":"","sources":["../../../../src/components/FormComponents/FormTextField/FormTextField.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,4CAA4C,CAAC;AAE3F,QAAA,MAAM,aAAa,GAAI,qBAGpB;IACD,KAAK,EAAE,eAAe,CAAC;IACvB,OAAO,EAAE,YAAY,CAAC;CACvB,4CAiEA,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"FormTextField.d.ts","sourceRoot":"","sources":["../../../../src/components/FormComponents/FormTextField/FormTextField.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAC;AAErF,QAAA,MAAM,aAAa,GAAI,qBAGpB;IACD,KAAK,EAAE,eAAe,CAAC;IACvB,OAAO,EAAE,YAAY,CAAC;CACvB,4CAiEA,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/components/FormComponents/FormTextField/FormTextField.js

@@ -0,0 +1,46 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Controller } from 'react-hook-form';
+import { FormTextFieldComponent } from './FormTextField.styles.js';
+import FormBottomField from '../FormBottomField/FormBottomField.js';
+import { renderLabel } from '../../../lib/Constants/FormConstants.js';
+
+const FormTextField = ({ props, variant, }) => {
+    const isError = !!props.errors?.[props.item.name];
+    const isShowBorderError = isError && props.fieldError;
+    const label = variant !== "standard"
+        ? `${props.item.label}${props.item.required ? " *" : ""}`
+        : "";
+    const onInput = (e) => {
+        if (props?.item?.donotAllowSpace) {
+            const value = e.target.value;
+            e.target.value = value.replace(" ", "");
+        }
+        if (!props?.item?.allowSpecialChars) {
+            const value = e.target.value;
+            e.target.value = value.replace(/[^a-zA-Z0-9 ]/g, "");
+        } // Allow only alphanumeric and space
+        if (e.target.value.length === 1 && e.target.value === " ") {
+            e.target.value = "";
+        }
+        props.item.onInputProps && props.item.onInputProps(e);
+    };
+    return (jsx(Controller, { control: props.control, name: props.item.name, render: ({ field }) => (jsxs(Fragment, { children: [renderLabel(variant, props), jsx(FormTextFieldComponent, { ...field, fullWidth: true, error: isShowBorderError, label: label, placeholder: props.item.placeholder || "", InputProps: {
+                        style: {
+                            border: "none",
+                        },
+                    }, autoComplete: "off", sx: {
+                        ...props.item.sx,
+                    }, value: field.value || "", size: "small", disabled: props.item.disable, onBlur: (e) => {
+                        props?.item?.onBlurFn && props?.item?.onBlurFn(e);
+                    }, inputProps: {
+                        maxLength: props.item.maxLength || 100,
+                        onInput: onInput,
+                        onPaste: (e) => {
+                            if (props.item.doNotAllowPaste) {
+                                e.preventDefault();
+                            }
+                        },
+                    } }), jsx(FormBottomField, { ...props })] })) }, props.item.name));
+};
+
+export { FormTextField as default };

package/dist/components/FormComponents/FormTextField/FormTextField.styles.js

@@ -0,0 +1,22 @@
+import styled from '@emotion/styled';
+import { TextField } from '@mui/material';
+
+const FormTextFieldComponent = styled(TextField)(() => ({
+    "& .css-1holvmy,.css-lqj8pz-MuiFormLabel-root-MuiInputLabel-root, .css-kichxs-MuiFormLabel-root-MuiInputLabel-root": {
+        top: "-10px",
+    },
+    "& .css-2rul56-MuiFormLabel-root-MuiInputLabel-root": {
+        top: "-10px",
+    },
+    "& .css-12ciryo-MuiFormLabel-root-MuiInputLabel-root ": {},
+    "& .css-1gq5vhi-MuiInputBase-root-MuiOutlinedInput-root input ": {
+        outline: "none",
+        border: "1px solid #ced4da", // Add this line to set border to none
+    },
+    "& .css-1gq5vhi-MuiInputBase-root-MuiOutlinedInput-root input:focus ": {
+        outline: "none",
+        border: "none", // Set border to none when input is focused
+    },
+}));
+
+export { FormTextFieldComponent };

package/dist/components/FormComponents/HelperText/HelperText.d.ts

@@ -1,4 +1,4 @@
-import { FormRenderProps } from "../../../Utilities/Interface/FormInterface";
+import { FormRenderProps } from "../../../lib/Interface/FormInterface";
 declare const HelperText: (props: FormRenderProps) => import("react/jsx-runtime").JSX.Element;
 export default HelperText;
 //# sourceMappingURL=HelperText.d.ts.map

package/dist/components/FormComponents/HelperText/HelperText.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HelperText.d.ts","sourceRoot":"","sources":["../../../../src/components/FormComponents/HelperText/HelperText.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,4CAA4C,CAAC;AAE7E,QAAA,MAAM,UAAU,GAAI,OAAO,eAAe,4CAazC,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"HelperText.d.ts","sourceRoot":"","sources":["../../../../src/components/FormComponents/HelperText/HelperText.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,sCAAsC,CAAC;AAEvE,QAAA,MAAM,UAAU,GAAI,OAAO,eAAe,4CAazC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/FormComponents/HelperText/HelperText.js

@@ -0,0 +1,10 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+
+const HelperText = (props) => {
+    return props?.item?.helperText ? (jsx("span", { style: {
+            fontSize: "11px",
+            color: "#3651d3",
+        }, children: props?.item?.helperText })) : (jsx(Fragment, {}));
+};
+
+export { HelperText as default };

package/dist/components/FormComponents/PasswordField/PasswordField.d.ts

@@ -1,4 +1,4 @@
-import { FormRenderProps, VariantProps } from "../../../Utilities/Interface/FormInterface";
+import { FormRenderProps, VariantProps } from "../../../lib/Interface/FormInterface";
 declare const PasswordField: ({ props, variant, }: {
     props: FormRenderProps;
     variant: VariantProps;

package/dist/components/FormComponents/PasswordField/PasswordField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordField.d.ts","sourceRoot":"","sources":["../../../../src/components/FormComponents/PasswordField/PasswordField.tsx"],"names":[],"mappings":"AAKA,OAAO,EACL,eAAe,EACf,YAAY,EACb,MAAM,4CAA4C,CAAC;AAEpD,QAAA,MAAM,aAAa,GAAI,qBAGpB;IACD,KAAK,EAAE,eAAe,CAAC;IACvB,OAAO,EAAE,YAAY,CAAC;CACvB,4CAwFA,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"PasswordField.d.ts","sourceRoot":"","sources":["../../../../src/components/FormComponents/PasswordField/PasswordField.tsx"],"names":[],"mappings":"AAKA,OAAO,EACL,eAAe,EACf,YAAY,EACb,MAAM,sCAAsC,CAAC;AAE9C,QAAA,MAAM,aAAa,GAAI,qBAGpB;IACD,KAAK,EAAE,eAAe,CAAC;IACvB,OAAO,EAAE,YAAY,CAAC;CACvB,4CAwFA,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/components/FormComponents/PasswordField/PasswordField.js

@@ -0,0 +1,49 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Visibility, VisibilityOff } from '@mui/icons-material';
+import { Box, FormControl, TextField, IconButton } from '@mui/material';
+import { useState } from 'react';
+import { Controller } from 'react-hook-form';
+import { renderLabel } from '../../../lib/Constants/FormConstants.js';
+import FormBottomField from '../FormBottomField/FormBottomField.js';
+
+const PasswordField = ({ props, variant, }) => {
+    const [showPassword, setShowPassword] = useState(false);
+    const handleTogglePasswordVisibility = () => {
+        setShowPassword((prevShowPassword) => !prevShowPassword);
+    };
+    const label = variant !== "standard"
+        ? `${props.item.label}${props.item.required ? " *" : ""}`
+        : "";
+    const isError = !!props.errors?.[props.item.name];
+    const isShowBorderError = isError && props.fieldError;
+    return (jsx(Box, { position: "relative", children: jsxs(FormControl, { fullWidth: true, children: [" ", jsx(Controller, { control: props.control, name: props.item.name, render: ({ field }) => (jsxs(Fragment, { children: [jsxs(Box, { sx: { position: "relative" }, children: [" ", renderLabel(variant, props), jsx(TextField, { size: "small", error: isShowBorderError, type: showPassword ? "text" : "password", autoComplete: props.item?.InputProps?.autoComplete || "off", placeholder: props.item.placeholder || "", ...field, label: label, sx: {
+                                            width: "100%",
+                                            "& .css-kichxs-MuiFormLabel-root-MuiInputLabel-root,.css-1holvmy": {
+                                                top: "-8px",
+                                            },
+                                        }, inputProps: {
+                                            maxLength: props.item.maxLength || 100,
+                                            onInput: (e) => {
+                                                props.item.onInputProps && props.item.onInputProps(e);
+                                            },
+                                            onPaste: (e) => {
+                                                if (props.item?.doNotAllowPaste) {
+                                                    e.preventDefault();
+                                                }
+                                            },
+                                        }, value: field.value || null, disabled: props.item.disable }), jsx(IconButton, { sx: {
+                                            position: "absolute",
+                                            right: "14px",
+                                            top: variant === "standard" ? "70%" : "50%",
+                                            transform: "translateY(-50%)",
+                                            width: "25px",
+                                        }, "aria-label": "toggle password visibility", onClick: handleTogglePasswordVisibility, edge: "end", children: showPassword ? (jsx(Visibility, { sx: {
+                                                fontSize: "12px",
+                                                position: "absolute",
+                                            } })) : (jsx(VisibilityOff, { sx: {
+                                                fontSize: "12px",
+                                                position: "absolute",
+                                            } })) })] }), jsx(FormBottomField, { ...props })] })) })] }) }, props.item.name));
+};
+
+export { PasswordField as default };

package/dist/components/FormComponents/RichTextEditor/RichTextEditor.d.ts

@@ -1,4 +1,4 @@
-import { FormRenderProps } from "../../../Utilities/Interface/FormInterface";
+import { FormRenderProps } from "../../../lib/Interface/FormInterface";
 declare const RichTextEditor: ({ props }: {
     props: FormRenderProps;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/components/FormComponents/RichTextEditor/RichTextEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RichTextEditor.d.ts","sourceRoot":"","sources":["../../../../src/components/FormComponents/RichTextEditor/RichTextEditor.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,4CAA4C,CAAC;AAG7E,QAAA,MAAM,cAAc,GAAI,WAAW;IAAE,KAAK,EAAE,eAAe,CAAA;CAAE,4CAoG5D,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"RichTextEditor.d.ts","sourceRoot":"","sources":["../../../../src/components/FormComponents/RichTextEditor/RichTextEditor.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,sCAAsC,CAAC;AAGvE,QAAA,MAAM,cAAc,GAAI,WAAW;IAAE,KAAK,EAAE,eAAe,CAAA;CAAE,4CAoG5D,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/components/FormComponents/RichTextEditor/RichTextEditor.js

@@ -0,0 +1,95 @@
+import { jsx } from 'react/jsx-runtime';
+import { useRef, useState, useEffect } from 'react';
+import JoditEditor from 'jodit-react';
+import { Jodit } from 'jodit';
+
+const RichTextEditor = ({ props }) => {
+    const editor = useRef(null);
+    const [content, setContent] = useState("");
+    const value = props.getValues(props.item.name);
+    const config = {
+        readonly: false,
+        placeholder: props.item.placeholder || "Start typing...",
+        statusbar: false,
+        removeButtons: props.item.removeButtons,
+        style: {
+            "font-family": "Arial",
+        },
+        controls: {
+            font: {
+                list: {
+                    Arial: "Arial",
+                    ...props.item?.FontFamily,
+                },
+            },
+            fontsize: {
+                list: Jodit.atom(props.item.Fonts || [
+                    8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24,
+                    25, 26, 27, 28, 29, 30,
+                ]),
+            },
+        },
+        defaultFont: "Arial",
+        defaultFontSize: "11px",
+        askBeforePasteFromWord: false,
+        askBeforePasteHTML: false,
+        hotkeys: {
+            redo: "ctrl+z",
+            undo: "ctrl+y,ctrl+shift+z",
+            indent: "ctrl+]",
+            outdent: "ctrl+[",
+            bold: "ctrl+b",
+            italic: "ctrl+i",
+            removeFormat: "ctrl+shift+m",
+            insertOrderedList: "ctrl+shift+7",
+            insertUnorderedList: "ctrl+shift+8",
+            openSearchDialog: "ctrl+f",
+            openReplaceDialog: "ctrl+r",
+        },
+        events: {
+            processPaste: (_event, html) => {
+                const instance = editor.current;
+                if (instance?.editor) {
+                    const joditEditor = instance.editor;
+                    joditEditor.selection.insertHTML(html);
+                    joditEditor.tempContent = joditEditor.getHTML();
+                }
+            },
+            afterPaste: () => {
+                const instance = editor.current;
+                if (instance?.editor) {
+                    const joditEditor = instance.editor;
+                    const el = document.createElement("div");
+                    el.innerHTML = joditEditor.tempContent
+                        ? joditEditor.tempContent
+                        : joditEditor.getHTML();
+                    joditEditor.setHTML(el.innerHTML);
+                    joditEditor.tempContent = null;
+                }
+            },
+        },
+        ...props.item.sx,
+    };
+    useEffect(() => {
+        setContent(value);
+    }, [value]);
+    const handleBlur = (newContent) => {
+        if (newContent === "<p><br></p>") {
+            setContent(newContent);
+            props.setValue(props.item.name, "");
+        }
+        else {
+            setContent(newContent);
+            props.setValue(props.item.name, newContent);
+        }
+        props.item.onBlurFn && props.item.onBlurFn(newContent);
+    };
+    const handleChange = (newContent) => {
+        props.item.onChangeFn && props.item.onChangeFn(newContent);
+    };
+    return (jsx(JoditEditor, { ref: editor, value: content, config: config, 
+        // tabIndex={1 as IJoditEditorProps["tabIndex"]}
+        onBlur: handleBlur, onChange: handleChange }));
+};
+
+export { RichTextEditor as default };

package/dist/components/FormComponents/RichTextEditor/RichTextEditorWrapper.d.ts

@@ -1,4 +1,4 @@
-import { FormRenderProps, VariantProps } from "../../../Utilities/Interface/FormInterface";
+import { FormRenderProps, VariantProps } from "../../../lib/Interface/FormInterface";
 declare const RichTextEditorWrapper: ({ props, variant, }: {
     props: FormRenderProps;
     variant: VariantProps;

package/dist/components/FormComponents/RichTextEditor/RichTextEditorWrapper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RichTextEditorWrapper.d.ts","sourceRoot":"","sources":["../../../../src/components/FormComponents/RichTextEditor/RichTextEditorWrapper.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,eAAe,EACf,YAAY,EACb,MAAM,4CAA4C,CAAC;AAIpD,QAAA,MAAM,qBAAqB,GAAI,qBAG5B;IACD,KAAK,EAAE,eAAe,CAAC;IACvB,OAAO,EAAE,YAAY,CAAC;CACvB,4CAeA,CAAC;AAEF,eAAe,qBAAqB,CAAC"}
+{"version":3,"file":"RichTextEditorWrapper.d.ts","sourceRoot":"","sources":["../../../../src/components/FormComponents/RichTextEditor/RichTextEditorWrapper.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,eAAe,EACf,YAAY,EACb,MAAM,sCAAsC,CAAC;AAI9C,QAAA,MAAM,qBAAqB,GAAI,qBAG5B;IACD,KAAK,EAAE,eAAe,CAAC;IACvB,OAAO,EAAE,YAAY,CAAC;CACvB,4CAeA,CAAC;AAEF,eAAe,qBAAqB,CAAC"}

package/dist/components/FormComponents/RichTextEditor/RichTextEditorWrapper.js

@@ -0,0 +1,11 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Controller } from 'react-hook-form';
+import { renderLabel } from '../../../lib/Constants/FormConstants.js';
+import FormBottomField from '../FormBottomField/FormBottomField.js';
+import RichTextEditor from './RichTextEditor.js';
+
+const RichTextEditorWrapper = ({ props, variant, }) => {
+    return (jsx(Controller, { control: props.control, name: props.item.name, render: () => (jsxs(Fragment, { children: [renderLabel(variant, props), jsx(RichTextEditor, { props: props }), jsx(FormBottomField, { ...props })] })) }, props.item.name));
+};
+
+export { RichTextEditorWrapper as default };

package/dist/components/FormComponents/RichTextEditor/jodit.index.js

@@ -0,0 +1,27 @@
+import JoditEditor from 'jodit-react';
+export { default } from 'jodit-react';
+export { Jodit } from 'jodit';
+
+// import { Jodit } from 'jodit/esm/index';
+// import * as React from 'react';
+// type DeepPartial<T> = T extends object
+//     ? {
+//             [P in keyof T]?: DeepPartial<T[P]>;
+//       }
+//     : T;
+// export interface IJoditEditorProps {
+//     value: string;
+//     className?: string;
+//     config?: DeepPartial<Jodit['options']>;
+//     tabIndex?: DeepPartial<Jodit['tabIndex']>;
+//     // eslint-disable-next-line no-unused-vars
+//     onChange?: (newValue: string) => void;
+//     // eslint-disable-next-line no-unused-vars
+//     onBlur?: (newValue: string) => void;
+// }
+// declare const JoditEditor: React.ForwardRefExoticComponent<
+//     React.PropsWithoutRef<IJoditEditorProps> & React.RefAttributes<Jodit>
+// >;
+// export default JoditEditor;
+// export { Jodit };
+// Import the runtime React component

package/dist/components/FormComponents/Select/MultiSelectv1.d.ts

@@ -1,4 +1,4 @@
-import { FormRenderProps, VariantProps } from "../../../Utilities/Interface/FormInterface";
+import { FormRenderProps, VariantProps } from "../../../lib/Interface/FormInterface";
 export default function MultiSelectV1({ props, variant, }: {
     props: FormRenderProps;
     variant: VariantProps;

package/dist/components/FormComponents/Select/MultiSelectv1.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelectv1.d.ts","sourceRoot":"","sources":["../../../../src/components/FormComponents/Select/MultiSelectv1.tsx"],"names":[],"mappings":"AAUA,OAAO,EACL,eAAe,EACf,YAAY,EACb,MAAM,4CAA4C,CAAC;AA+BpD,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,KAAK,EACL,OAAO,GACR,EAAE;IACD,KAAK,EAAE,eAAe,CAAC;IACvB,OAAO,EAAE,YAAY,CAAC;CACvB,2CAqOA"}
+{"version":3,"file":"MultiSelectv1.d.ts","sourceRoot":"","sources":["../../../../src/components/FormComponents/Select/MultiSelectv1.tsx"],"names":[],"mappings":"AAUA,OAAO,EACL,eAAe,EACf,YAAY,EACb,MAAM,sCAAsC,CAAC;AA+B9C,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,KAAK,EACL,OAAO,GACR,EAAE;IACD,KAAK,EAAE,eAAe,CAAC;IACvB,OAAO,EAAE,YAAY,CAAC;CACvB,2CAqOA"}