tp-react-elements-dev 1.12.24 → 1.12.25

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

@@ -0,0 +1,91 @@
+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 FormBottomField from '../FormBottomField/FormBottomField.esm.js';
+import 'dayjs';
+import { renderLabel } from '../../../utils/Constants/FormConstants.esm.js';
+
+/**
+ * PasswordField Component
+ *
+ * A password input field component that integrates with react-hook-form for form state management.
+ * Includes a visibility toggle button to show/hide the password.
+ *
+ * @component
+ * @param {Object} props - The component props
+ * @param {FormRenderProps} props.props - Form rendering properties from parent form
+ * @param {VariantProps} props.variant - UI variant style ('standard', 'outlined', etc.)
+ *
+ * @example
+ * // Basic usage in FormRender
+ * <PasswordField props={formRenderProps} variant="outlined" />
+ */
+const PasswordField = ({ props, variant }) => {
+    /**
+     * State to track password visibility
+     */
+    const [showPassword, setShowPassword] = useState(false);
+    /**
+     * Toggles password visibility between plain text and hidden
+     */
+    const handleTogglePasswordVisibility = () => {
+        setShowPassword((prevShowPassword) => !prevShowPassword);
+    };
+    /**
+     * Generates the field label based on variant type
+     * For non-standard variants, appends an asterisk if the field is required
+     */
+    const label = variant !== 'standard' ? `${props.item.label}${props.item.required ? ' *' : ''}` : '';
+    /**
+     * Determines if the field has an error based on form validation
+     */
+    const isError = !!props.errors?.[props.item.name];
+    const isShowBorderError = isError;
+    /**
+     * Renders the password field component with visibility toggle
+     */
+    return (jsx(Box, { position: 'relative', children: jsx(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,
+                                        /**
+                                         * Handles input events
+                                         * Calls custom onInputProps handler if provided
+                                         *
+                                         * @param {any} e - The input event object
+                                         */
+                                        onInput: (e) => {
+                                            props.item.onInputProps && props.item.onInputProps(e);
+                                        },
+                                        /**
+                                         * Handles paste events
+                                         * Prevents paste action if configured
+                                         *
+                                         * @param {React.ClipboardEvent} e - The paste event object
+                                         */
+                                        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": showPassword ? 'Hide password' : 'Show password', "aria-pressed": showPassword, 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,6 +1,5 @@
-import { FormRenderProps } from "../../../lib/Interface/FormInterface";
+import { FormRenderProps } from '../../../utils';
 declare const RichTextEditor: ({ props }: {
     props: FormRenderProps;
 }) => import("react/jsx-runtime").JSX.Element;
 export default RichTextEditor;
-//# sourceMappingURL=RichTextEditor.d.ts.map

package/dist/components/FormComponents/RichTextEditor/{RichTextEditor.js → RichTextEditor.esm.js}

@@ -1,69 +1,84 @@
 import { jsx } from 'react/jsx-runtime';
 import { useRef, useState, useEffect } from 'react';
-import JoditEditor from 'jodit-react';
-import { Jodit } from 'jodit';
+import { useWatch } from 'react-hook-form';
+import { getJoditEditor } from './jodit.index.esm.js';
 
 const RichTextEditor = ({ props }) => {
     const editor = useRef(null);
-    const [content, setContent] = useState("");
-    const value = props.getValues(props.item.name);
+    const [content, setContent] = useState('');
+    const [JoditEditor, setJoditEditor] = useState(null);
+    const [isLoading, setIsLoading] = useState(true);
+    const value = useWatch({ control: props.control, name: props.item.name });
+    // Dynamically load JoditEditor only
+    useEffect(() => {
+        const loadJoditDependencies = async () => {
+            try {
+                const joditEditorModule = await getJoditEditor();
+                setJoditEditor(joditEditorModule);
+                setIsLoading(false);
+            }
+            catch (error) {
+                console.error('Failed to load Jodit dependencies:', error);
+            }
+        };
+        loadJoditDependencies();
+    }, []);
     const config = {
         readonly: false,
-        placeholder: props.item.placeholder || "Start typing...",
+        placeholder: props.item.placeholder || 'Start typing...',
         statusbar: false,
         removeButtons: props.item.removeButtons,
         style: {
-            "font-family": "Arial",
+            'font-family': 'Arial',
         },
         controls: {
             font: {
                 list: {
-                    Arial: "Arial",
+                    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,
-                ]),
+                list: 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",
+        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",
+            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();
+                    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");
+                    const el = document.createElement('div');
                     el.innerHTML = joditEditor.tempContent
                         ? joditEditor.tempContent
-                        : joditEditor.getHTML();
-                    joditEditor.setHTML(el.innerHTML);
+                        : joditEditor.getHTML?.();
+                    joditEditor.setHTML?.(el.innerHTML);
                     joditEditor.tempContent = null;
                 }
             },
@@ -74,9 +89,9 @@ const RichTextEditor = ({ props }) => {
         setContent(value);
     }, [value]);
     const handleBlur = (newContent) => {
-        if (newContent === "<p><br></p>") {
+        if (newContent === '<p><br></p>') {
             setContent(newContent);
-            props.setValue(props.item.name, "");
+            props.setValue(props.item.name, '');
         }
         else {
             setContent(newContent);
@@ -87,6 +102,10 @@ const RichTextEditor = ({ props }) => {
     const handleChange = (newContent) => {
         props.item.onChangeFn && props.item.onChangeFn(newContent);
     };
+    // Show loading state while Jodit is being loaded
+    if (isLoading || !JoditEditor) {
+        return jsx("div", { children: "Loading editor..." });
+    }
     return (jsx(JoditEditor, { ref: editor, value: content, config: config, 
         // tabIndex={1 as IJoditEditorProps["tabIndex"]}
         onBlur: handleBlur, onChange: handleChange }));

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

@@ -1,7 +1,6 @@
-import { FormRenderProps, VariantProps } from "../../../lib/Interface/FormInterface";
+import { FormRenderProps, VariantProps } from '../../../utils';
 declare const RichTextEditorWrapper: ({ props, variant, }: {
     props: FormRenderProps;
     variant: VariantProps;
 }) => import("react/jsx-runtime").JSX.Element;
 export default RichTextEditorWrapper;
-//# sourceMappingURL=RichTextEditorWrapper.d.ts.map

package/dist/components/FormComponents/RichTextEditor/{RichTextEditorWrapper.js → RichTextEditorWrapper.esm.js}

@@ -1,8 +1,9 @@
 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';
+import FormBottomField from '../FormBottomField/FormBottomField.esm.js';
+import RichTextEditor from './RichTextEditor.esm.js';
+import 'dayjs';
+import { renderLabel } from '../../../utils/Constants/FormConstants.esm.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));

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

@@ -1,5 +1,3 @@
-import JoditEditor from "jodit-react";
-import { Jodit } from "jodit";
 export interface IJoditEditorProps {
     value?: string;
     config?: any;
@@ -7,12 +5,9 @@ export interface IJoditEditorProps {
     onBlur?: (content: string) => void;
     onChange?: (content: string) => void;
 }
-declare module 'jodit' {
-    interface Jodit {
-        getHTML(): string;
-        setHTML(html: string): void;
-    }
-}
+declare const getJoditEditor: () => Promise<any>;
+declare const getJodit: () => Promise<null>;
+declare const JoditEditor: any;
 export default JoditEditor;
-export { Jodit };
-//# sourceMappingURL=jodit.index.d.ts.map
+export { getJoditEditor, getJodit };
+export declare const Jodit: any;

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

@@ -0,0 +1,23 @@
+// import { Jodit } from 'jodit/esm/index';
+// import * as React from 'react';
+// Declare module augmentation for TypeScript
+// Removing module augmentation since we are not importing 'jodit' directly here
+// Create a dynamic import function to load Jodit only when needed
+let JoditEditorPromise = null;
+const getJoditEditor = async () => {
+    if (!JoditEditorPromise) {
+        JoditEditorPromise = import('jodit-react').then((module) => module.default || module);
+    }
+    return JoditEditorPromise;
+};
+// Export a proxy object that will load the real module on demand
+new Proxy({}, {
+    get: function () {
+        throw new Error('JoditEditor must be dynamically imported before use');
+    },
+    apply: function () {
+        throw new Error('JoditEditor must be dynamically imported before use');
+    },
+});
+
+export { getJoditEditor };

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

@@ -1,3 +1,2 @@
 declare const MultiSelect: () => import("react/jsx-runtime").JSX.Element;
 export default MultiSelect;
-//# sourceMappingURL=MultiSelect.d.ts.map

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

@@ -1,6 +1,5 @@
-import { FormRenderProps, VariantProps } from "../../../lib/Interface/FormInterface";
+import { FormRenderProps, VariantProps } from '../../../utils';
 export default function MultiSelectV1({ props, variant, }: {
     props: FormRenderProps;
     variant: VariantProps;
 }): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=MultiSelectv1.d.ts.map

package/dist/components/FormComponents/Select/{MultiSelectv1.js → MultiSelectv1.esm.js}

@@ -7,9 +7,11 @@ import ListItemText from '@mui/material/ListItemText';
 import MenuItem from '@mui/material/MenuItem';
 import OutlinedInput from '@mui/material/OutlinedInput';
 import Select from '@mui/material/Select';
-import React__default, { useState } from 'react';
-import { renderLabel } from '../../../lib/Constants/FormConstants.js';
-import FormBottomField from '../FormBottomField/FormBottomField.js';
+import React__default, { useState, useMemo } from 'react';
+import { useWatch } from 'react-hook-form';
+import FormBottomField from '../FormBottomField/FormBottomField.esm.js';
+import 'dayjs';
+import { renderLabel } from '../../../utils/Constants/FormConstants.esm.js';
 
 const ITEM_HEIGHT = 48;
 const ITEM_PADDING_TOP = 3;
@@ -32,24 +34,22 @@ const MenuProps = {
 //   },
 // }));
 const extractValuesToArray = (inputString) => {
-    const valuesArray = inputString?.split(",");
+    const valuesArray = inputString?.split(',');
     const trimmedArray = valuesArray?.map((value) => value.trim());
     return trimmedArray;
 };
 function MultiSelectV1({ props, variant, }) {
-    const [personName, setPersonName] = React__default.useState(props.getValues(props.item.name)
-        ? extractValuesToArray(props.getValues(props.item.name))
-        : []);
-    const [searchText, setSearchText] = useState("");
+    const [personName, setPersonName] = React__default.useState(props.getValues(props.item.name) ? extractValuesToArray(props.getValues(props.item.name)) : []);
+    const [searchText, setSearchText] = useState('');
     const options = props.item?.options || [];
     const [filterOptions, setFilterOptions] = useState(props.item.options || []);
     const [selectAll, setSelectAll] = useState(false);
     const textfieldRef = React__default.useRef(null);
-    const fieldValue = props.getValues(props.item.name);
-    const mappedIds = filterOptions.map((item) => item.value);
-    const filterIds = filterOptions.map((item) => item.value);
+    const fieldValue = useWatch({ control: props.control, name: props.item.name });
+    const mappedIds = useMemo(() => filterOptions.map((item) => item.value), [filterOptions]);
+    const filterIds = useMemo(() => filterOptions.map((item) => item.value), [filterOptions]);
     React__default.useEffect(() => {
-        if (searchText !== "") {
+        if (searchText !== '') {
             setFilterOptions(options.filter((item) => item.label.toLowerCase().includes(searchText.toLowerCase())));
         }
         else {
@@ -60,98 +60,91 @@ function MultiSelectV1({ props, variant, }) {
         return array.some((item) => item === value);
     }
     React__default.useEffect(() => {
-        if (fieldValue?.split(",").length !== filterOptions.length) {
+        if (fieldValue?.split(',').length !== filterOptions.length) {
             setSelectAll(false);
         }
         else {
-            console.log(fieldValue?.split(","), 'fieldValue?.split(",")', filterIds);
-            if (fieldValue
-                ?.split(",")
-                .every((value) => hasExactMatch(filterIds, value))) {
+            if (fieldValue?.split(',').every((value) => hasExactMatch(filterIds, value))) {
                 setSelectAll(true);
             }
         }
     }, [filterOptions, fieldValue]);
     const handleChange = (event) => {
         const { target: { value }, } = event;
-        setPersonName(typeof value === "string" ? value?.split(",") : value);
-        props.setValue(props.item.name, (typeof value === "string" ? value?.split(",") : value).join(","));
+        setPersonName(typeof value === 'string' ? value?.split(',') : value);
+        props.setValue(props.item.name, (typeof value === 'string' ? value?.split(',') : value).join(','));
     };
-    const selectedOptions = options.filter((item) => fieldValue?.split(",").some((value) => value === item.value));
-    const selectedValues = selectedOptions
-        .map((item) => item.label)
-        .join(" , ");
+    const selectedOptions = useMemo(() => options.filter((item) => fieldValue?.split(',').some((value) => value === item.value)), [options, fieldValue]);
+    const selectedValues = selectedOptions.map((item) => item.label).join(' , ');
     const isError = !!props.errors?.[props.item.name];
-    const isShowBorderError = isError && props.fieldError;
+    const isShowBorderError = isError;
     return (jsx(Box, { children: jsxs(FormControl, { fullWidth: true, sx: {
-                "& .css-kichxs-MuiFormLabel-root-MuiInputLabel-root,.css-1holvmy": {
-                    top: "-10px",
+                '& .css-kichxs-MuiFormLabel-root-MuiInputLabel-root,.css-1holvmy': {
+                    top: '-10px',
                 },
-                "& .MuiFormLabel-root": {
+                '& .MuiFormLabel-root': {
                     top: -10,
                 },
-                "& .MuiInputLabel-shrink": {
+                '& .MuiInputLabel-shrink': {
                     top: 0,
                 },
-            }, children: [renderLabel(variant, props), variant !== "standard" ? (jsxs(InputLabel, { error: isShowBorderError, id: "demo-multiple-checkbox-label", children: [props.item.label, props.item.required ? " *" : ""] })) : (""), jsxs(Select, { labelId: "demo-multiple-checkbox-label", id: "demo-multiple-checkbox", multiple: true, sx: {
-                        "& .MuiTypography-root": {
-                            fontSize: "5px !important",
+            }, children: [renderLabel(variant, props), variant !== 'standard' ? (jsxs(InputLabel, { error: isShowBorderError, id: `${props.item.name}-ms-labelId`, children: [props.item.label, props.item.required ? ' *' : ''] })) : (''), jsxs(Select, { labelId: `${props.item.name}-ms-labelId`, id: `${props.item.name}-ms-select`, multiple: true, sx: {
+                        '& .MuiTypography-root': {
+                            fontSize: '5px !important',
                         },
-                    }, error: isShowBorderError, disabled: props.item.disable, value: props.getValues(props.item.name)
-                        ? extractValuesToArray(props.getValues(props.item.name))
-                        : [], onChange: handleChange, onOpen: () => {
+                    }, error: isShowBorderError, disabled: props.item.disable, value: fieldValue ? extractValuesToArray(fieldValue) : [], onChange: handleChange, inputProps: {
+                        'aria-labelledby': `${props.item.name}-label`,
+                        'aria-describedby': `${props.item.name}-helper ${props.item.name}-error`,
+                        'aria-required': props.item.required ? true : undefined,
+                    }, onOpen: () => {
                         setTimeout(() => {
                             if (textfieldRef.current) {
                                 textfieldRef.current?.focus();
                             }
                         }, 0);
                     }, onClose: () => {
-                        setSearchText("");
+                        setSearchText('');
                         props?.item?.onCloseMenu && props?.item?.onCloseMenu();
-                    }, input: jsx(OutlinedInput, { label: variant !== "standard" ? props.item.label : "" }), renderValue: (_selected) => (jsx(Tooltip, { title: selectedValues, children: jsx("span", { children: selectedOptions.length >
-                                (props.item.multiSelectLabelLength || 3)
+                    }, input: jsx(OutlinedInput, { label: variant !== 'standard' ? props.item.label : '' }), renderValue: (_selected) => (jsx(Tooltip, { title: selectedValues, children: jsx("span", { children: selectedOptions.length > (props.item.multiSelectLabelLength || 3)
                                 ? `${selectedOptions.length} Selected`
                                 : selectedValues }) })), MenuProps: MenuProps, autoFocus: false, children: [jsx(Box, { sx: {
-                                width: "100%",
-                                position: "sticky",
-                                top: "0px",
-                                padding: "7px",
+                                width: '100%',
+                                position: 'sticky',
+                                top: '0px',
+                                padding: '7px',
                                 zIndex: 2,
-                                height: "33px",
-                                background: "#fff",
-                                display: options.length === 0 ? "none" : undefined,
+                                height: '33px',
+                                background: '#fff',
+                                display: options.length === 0 ? 'none' : undefined,
                             }, children: jsx(TextField, { inputRef: textfieldRef, autoFocus: true, value: searchText, sx: {
-                                    width: "100%",
+                                    width: '100%',
                                 }, placeholder: "Search...", onChange: (e) => {
                                     setSearchText(e.target.value);
                                 }, onKeyDown: (e) => {
-                                    if (e.key !== "Escape") {
+                                    if (e.key !== 'Escape') {
                                         e.stopPropagation();
                                     }
-                                } }) }), jsxs(MenuItem, { disabled: filterOptions.length === 0, sx: { zIndex: 0, fontSize: "5px !important" }, children: [jsx(Checkbox, { size: "small", checked: selectAll, onChange: () => {
+                                } }) }), jsxs(MenuItem, { disabled: filterOptions.length === 0, sx: { zIndex: 0, fontSize: '5px !important' }, children: [jsx(Checkbox, { size: "small", checked: selectAll, onChange: () => {
                                         setSelectAll(!selectAll);
                                         const selectChanged = !selectAll;
                                         if (!selectChanged) {
-                                            props.setValue(props.item.name, "");
+                                            props.setValue(props.item.name, '');
                                         }
                                         else {
-                                            const allDataMapped = mappedIds.join(",");
-                                            console.log(allDataMapped, "allDataMapped");
+                                            const allDataMapped = mappedIds.join(',');
                                             props.setValue(props.item.name, allDataMapped);
                                         }
-                                    } }), jsx(ListItemText, { primary: "Select All", sx: {
-                                        fontSize: "5px !important",
-                                        "& span": {
-                                            fontSize: "12px !important",
+                                    } }), jsx(ListItemText, { primary: 'Select All', sx: {
+                                        fontSize: '5px !important',
+                                        '& span': {
+                                            fontSize: '12px !important',
                                         },
-                                    } })] }), filterOptions.length !== 0 ? (filterOptions.map((option) => (jsxs(MenuItem, { value: `${option.value}`, sx: { zIndex: 0, fontSize: "11px !important" }, children: [jsx(Checkbox, { checked: fieldValue
-                                        ?.split(",")
-                                        .some((value) => value === option.value), size: "small" }), jsx(ListItemText, { primary: option.label, sx: {
-                                        fontSize: "5px !important",
-                                        "& span": {
-                                            fontSize: "12px !important",
+                                    } })] }), filterOptions.length !== 0 ? (filterOptions.map((option) => (jsxs(MenuItem, { value: `${option.value}`, sx: { zIndex: 0, fontSize: '11px !important' }, children: [jsx(Checkbox, { checked: fieldValue?.split(',').some((value) => value === option.value), size: "small" }), jsx(ListItemText, { primary: option.label, sx: {
+                                        fontSize: '5px !important',
+                                        '& span': {
+                                            fontSize: '12px !important',
                                         },
-                                    } })] }, option.value)))) : (jsx(MenuItem, { disabled: true, value: "NA", children: "No data Found" }, "NA"))] }), jsx(FormBottomField, { ...props })] }) }, props.item.name));
+                                    } })] }, option.value)))) : (jsx(MenuItem, { disabled: true, value: 'NA', children: "No data Found" }, 'NA'))] }), jsx(FormBottomField, { ...props })] }) }, props.item.name));
 }
 
 export { MultiSelectV1 as default };

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

@@ -1,7 +1,6 @@
-import { FormRenderProps, VariantProps } from "../../../lib/Interface/FormInterface";
-declare const SingleSelect: ({ props, variant, }: {
+import { FormRenderProps, VariantProps } from '../../../utils';
+declare const SingleSelect: ({ props, variant }: {
     props: FormRenderProps;
     variant: VariantProps;
 }) => import("react/jsx-runtime").JSX.Element;
 export default SingleSelect;
-//# sourceMappingURL=SingleSelect.d.ts.map

package/dist/components/FormComponents/Select/SingleSelect.esm.js

@@ -0,0 +1,61 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Autocomplete, TextField } from '@mui/material';
+import { useWatch, Controller } from 'react-hook-form';
+import FormBottomField from '../FormBottomField/FormBottomField.esm.js';
+import 'dayjs';
+import { renderLabel } from '../../../utils/Constants/FormConstants.esm.js';
+
+const SingleSelect = ({ props, variant }) => {
+    const isError = !!props.errors?.[props.item.name];
+    const watchedValue = useWatch({ control: props.control, name: props.item.name });
+    const isShowBorderError = isError && !watchedValue;
+    const currentValue = watchedValue;
+    const value = currentValue
+        ? props.item.options?.find((item) => item.value === currentValue)
+        : null;
+    return (jsx(Controller, { control: props.control, name: props.item.name, render: ({ field }) => (jsxs(Fragment, { children: [renderLabel(variant, props), jsx(Autocomplete, { ...field, id: `${props.item.name}-autocomplete`, value: value, onChange: (_, newValue) => {
+                        props.setValue(props?.item?.name, newValue?.value);
+                        props?.item?.onChangeFn && props?.item?.onChangeFn(newValue?.value);
+                        props?.clearErrors && props?.clearErrors(props?.item?.name);
+                    }, onBlur: (e) => {
+                        props?.item?.onBlurFn && props?.item?.onBlurFn(e);
+                    }, size: "small", sx: {
+                        '& .MuiAutocomplete-input': {
+                            padding: '0px 0px 0px 5px !important',
+                        },
+                        '& .css-erkti9-MuiFormLabel-root-MuiInputLabel-root,.css-8edmr2-MuiFormLabel-root-MuiInputLabel-root': {
+                            top: '-3px',
+                        },
+                        // Note: Options are rendered in a portal; keep this as a fallback only
+                        '& .MuiAutocomplete-option': {
+                            fontSize: '11px',
+                            zIndex: 2000,
+                        },
+                        ...props.item.sx,
+                    }, ListboxProps: {
+                        onScroll: (event) => {
+                            const listboxNode = event.currentTarget;
+                            if (listboxNode.scrollTop + listboxNode.clientHeight === listboxNode.scrollHeight) ;
+                        },
+                    }, disabled: props.item.disable, options: props.item.options || [], slotProps: {
+                        popper: {
+                            sx: {
+                                zIndex: 1401,
+                            },
+                        },
+                        listbox: {
+                            sx: {
+                                fontSize: '11px',
+                            },
+                        },
+                    }, renderInput: (params) => (jsx(TextField, { ...params, placeholder: props.item.placeholder, error: isShowBorderError, label: variant !== 'standard'
+                            ? `${props.item.label}${props.item.required ? ' *' : ''}`
+                            : '', inputProps: {
+                            ...params.inputProps,
+                            'aria-labelledby': `${props.item.name}-label`,
+                            'aria-describedby': `${props.item.name}-helper ${props.item.name}-error`,
+                            'aria-required': props.item.required ? true : undefined,
+                        } })) }), jsx(FormBottomField, { ...props })] })) }, props.item.name));
+};
+
+export { SingleSelect as default };

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

@@ -1,7 +1,6 @@
-import { FormRenderProps, VariantProps } from "../../../lib/Interface/FormInterface";
+import { FormRenderProps, VariantProps } from '../../../utils';
 declare const SingleSelectNonAutoComplete: ({ props, variant, }: {
     props: FormRenderProps;
     variant: VariantProps;
 }) => import("react/jsx-runtime").JSX.Element;
 export default SingleSelectNonAutoComplete;
-//# sourceMappingURL=SingleSelectNonAutoComplete.d.ts.map

package/dist/components/FormComponents/Select/SingleSelectNonAutoComplete.esm.js

@@ -0,0 +1,32 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { FormControl, InputLabel, Select, MenuItem } from '@mui/material';
+import { useWatch } from 'react-hook-form';
+import FormBottomField from '../FormBottomField/FormBottomField.esm.js';
+import 'dayjs';
+import { renderLabel } from '../../../utils/Constants/FormConstants.esm.js';
+
+const SingleSelectNonAutoComplete = ({ props, variant, }) => {
+    const isError = !!props.errors?.[props.item.name];
+    const isShowBorderError = isError;
+    const value = useWatch({ control: props.control, name: props.item.name });
+    return (jsxs(FormControl, { fullWidth: true, sx: {
+            position: 'relative',
+            '& .MuiFormLabel-root': {
+                top: -10,
+            },
+            '& .MuiInputLabel-shrink': {
+                top: 0,
+            },
+        }, children: [renderLabel(variant, props), variant !== 'standard' && (jsx(InputLabel, { error: isShowBorderError, id: `${props.item.name}-labelId`, children: props.item.label })), jsx(Select, { labelId: `${props.item.name}-labelId`, id: `${props.item.name}-select`, value: value, label: variant !== 'standard' ? `${props.item.label}${props.item.required ? ' *' : ''}` : '', onChange: (e) => props.setValue(props.item.name, e.target.value), onBlur: (e) => {
+                    props?.item?.onBlurFn && props?.item?.onBlurFn(e);
+                }, error: isShowBorderError, inputProps: {
+                    'aria-labelledby': `${props.item.name}-label`,
+                    'aria-describedby': `${props.item.name}-helper ${props.item.name}-error`,
+                    'aria-required': props.item.required ? true : undefined,
+                }, children: (props.item.options || []).map((item) => (jsx(MenuItem, { sx: {
+                        fontSize: '11px', // Adjust the font size as needed
+                        zIndex: 2000,
+                    }, value: item.value, children: item.label }, item.value))) }), jsx(FormBottomField, { ...props })] }, props.item.name));
+};
+
+export { SingleSelectNonAutoComplete as default };