tp-react-elements 1.2.0 → 1.2.5

package/dist/_virtual/index.esm12.js

@@ -1,3 +1,3 @@
-var DateInput = {};
+var InputRangeField = {};
 
-export { DateInput as __exports };
+export { InputRangeField as __exports };

package/dist/_virtual/index.esm13.js

@@ -1,3 +1,3 @@
-var InputRangeField = {};
+var Month = {};
 
-export { InputRangeField as __exports };
+export { Month as __exports };

package/dist/_virtual/index.esm14.js

@@ -1,3 +1,3 @@
-var Month = {};
+var DateInput = {};
 
-export { Month as __exports };
+export { DateInput as __exports };

package/dist/components/DateRangePicker/DateRangePicker.esm.js

@@ -3,7 +3,7 @@ import { useState, useEffect } from 'react';
 import { Controller } from 'react-hook-form';
 import { d as distExports } from '../../_virtual/index.esm.js';
 import 'dayjs';
-import { renderLabel, wrapFieldWithLabelTooltipIfEnabled } from '../../utils/Constants/FormConstants.esm.js';
+import { renderLabel } from '../../utils/Constants/FormConstants.esm.js';
 import FormBottomField from '../FormComponents/FormBottomField/FormBottomField.esm.js';
 import { Box, TextField, Popover } from '@mui/material';
 import { format } from '../../node_modules/date-fns/format.esm.js';
@@ -54,13 +54,12 @@ const DateRangePickerComponent = ({ item, control, watch, setValue, getValues, c
         ? `${format(state[0].startDate, 'dd/MM/yyyy')} - ${format(state[0].endDate, 'dd/MM/yyyy')}`
         : '';
     const label = variant !== 'standard' ? `${item.label}${item.required ? ' *' : ''}` : '';
-    const formProps = {
-        item,
-        ...rest,
-    };
-    return (jsxs(Fragment, { children: [jsx(Box, { onClick: handleClick, sx: { width: '100%' }, children: jsx(Controller, { name: fromDateName, control: control, render: ({ fieldState }) => (jsxs(Fragment, { children: [renderLabel(variant, formProps), ' ', wrapFieldWithLabelTooltipIfEnabled(variant, formProps, (jsx(TextField, { fullWidth: true, value: displayValue, placeholder: item.placeholder || 'DD/MM/YYYY - DD/MM/YYYY', error: !!fieldState.error, InputProps: {
+    return (jsxs(Fragment, { children: [jsx(Box, { onClick: handleClick, sx: { width: '100%' }, children: jsx(Controller, { name: fromDateName, control: control, render: ({ fieldState }) => (jsxs(Fragment, { children: [renderLabel(variant, {
+                                item,
+                                ...rest,
+                            }), ' ', jsx(TextField, { fullWidth: true, value: displayValue, placeholder: item.placeholder || 'DD/MM/YYYY - DD/MM/YYYY', error: !!fieldState.error, InputProps: {
                                     readOnly: true,
-                                }, label: label, size: "small" })))] })) }) }), jsx(Popover, { id: id, open: open, anchorEl: anchorEl, onClose: handleClose, anchorOrigin: {
+                                }, label: label, size: "small" })] })) }) }), jsx(Popover, { id: id, open: open, anchorEl: anchorEl, onClose: handleClose, anchorOrigin: {
                     vertical: 'bottom',
                     horizontal: 'left',
                 }, PaperProps: {
@@ -95,7 +94,7 @@ const DateRangePickerComponent = ({ item, control, watch, setValue, getValues, c
                             item.onChangeFn && item.onChangeFn(dateObject || null);
                             handleClose();
                         }
-                    }, moveRangeOnFirstSelection: false, ranges: state, months: 2, direction: "horizontal", showDateDisplay: false, dateDisplayFormat: "dd/MM/yyyy", rangeColors: ['#4d73b1ff'], minDate: getValidDate(item?.minDate), maxDate: getValidDate(item?.maxDate) }) }), jsx(FormBottomField, { item,
+                    }, moveRangeOnFirstSelection: false, ranges: state, months: 2, direction: "horizontal", showDateDisplay: false, dateDisplayFormat: "dd/MM/yyyy", rangeColors: ['#4d73b1ff'] }) }), jsx(FormBottomField, { item,
                 control,
                 errors,
                 getValues,

package/dist/components/FormComponents/DatePicker/DatepickerWrapperV2.esm.js

@@ -6,7 +6,7 @@ import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import dayjs from 'dayjs';
 import { Controller } from 'react-hook-form';
 import FormBottomField from '../FormBottomField/FormBottomField.esm.js';
-import { renderLabel, wrapFieldWithLabelTooltipIfEnabled } from '../../../utils/Constants/FormConstants.esm.js';
+import { renderLabel } from '../../../utils/Constants/FormConstants.esm.js';
 
 const DatepickerWrapperV2 = ({ props, variant, }) => {
     const inputTextRef = useRef(null);
@@ -35,7 +35,7 @@ const DatepickerWrapperV2 = ({ props, variant, }) => {
         return jsx("div", { style: { minHeight: '36px' }, children: "Loading..." });
     }
     return (jsx(Controller, { control: props.control, name: props.item.name, render: ({ field }) => {
-            return (jsxs(Fragment, { children: [DatePicker && (jsxs(LocalizationProvider, { dateAdapter: AdapterDayjs, children: [renderLabel(variant, props), wrapFieldWithLabelTooltipIfEnabled(variant, props, (jsx(DatePicker, { views: ['month', 'year', 'day'], label: variant !== 'standard'
+            return (jsxs(Fragment, { children: [DatePicker && (jsxs(LocalizationProvider, { dateAdapter: AdapterDayjs, children: [renderLabel(variant, props), jsx(DatePicker, { views: ['month', 'year', 'day'], label: variant !== 'standard'
                                     ? `${props.item.label}${props.item.required ? ' *' : ''}`
                                     : '', value: field.value
                                     ? typeof field.value === 'string'
@@ -69,7 +69,7 @@ const DatepickerWrapperV2 = ({ props, variant, }) => {
                                             },
                                         },
                                     },
-                                } })))] })), jsx(FormBottomField, { ...props })] }));
+                                } })] })), jsx(FormBottomField, { ...props })] }));
         } }, props.item.name));
 };
 

package/dist/components/FormComponents/DatePicker/Monthpickerrender.esm.js

@@ -6,7 +6,7 @@ import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import dayjs from 'dayjs';
 import { Controller } from 'react-hook-form';
 import FormBottomField from '../FormBottomField/FormBottomField.esm.js';
-import { renderLabel, wrapFieldWithLabelTooltipIfEnabled, formatDateMonthAndYear } from '../../../utils/Constants/FormConstants.esm.js';
+import { renderLabel, formatDateMonthAndYear } from '../../../utils/Constants/FormConstants.esm.js';
 
 const Monthpickerrender = ({ props, variant, }) => {
     const ref = useRef(null);
@@ -34,7 +34,7 @@ const Monthpickerrender = ({ props, variant, }) => {
     if (isLoading) {
         return jsx("div", { style: { minHeight: '36px' }, children: "Loading..." });
     }
-    return (jsx(Fragment, { children: DatePicker && (jsx(Controller, { control: props.control, name: props.item.name, render: ({ field }) => (jsxs(Fragment, { children: [jsxs(LocalizationProvider, { dateAdapter: AdapterDayjs, children: [renderLabel(variant, props), wrapFieldWithLabelTooltipIfEnabled(variant, props, (jsx(DatePicker, { ref: ref, label: variant !== 'standard' &&
+    return (jsx(Fragment, { children: DatePicker && (jsx(Controller, { control: props.control, name: props.item.name, render: ({ field }) => (jsxs(Fragment, { children: [jsxs(LocalizationProvider, { dateAdapter: AdapterDayjs, children: [renderLabel(variant, props), jsx(DatePicker, { ref: ref, label: variant !== 'standard' &&
                                     `${props.item.label}${props.item.required ? ' *' : ''}`, views: ['month', 'year'], disabled: props.item.disable, value: field.value ? dayjs(formatDateMonthAndYear(field.value || null)) : null, slotProps: {
                                     textField: {
                                         onClick: () => handleToggle(),
@@ -66,7 +66,7 @@ const Monthpickerrender = ({ props, variant, }) => {
                                     '& .MuiInputLabel-shrink': {
                                         top: 0,
                                     },
-                                }, minDate: props.item.minDate ? dayjs(props.item.minDate, 'MM/YYYY') : undefined, maxDate: props.item.maxDate ? dayjs(props.item.maxDate, 'MM/YYYY') : undefined })))] }), props?.item?.helperText && (jsxs("span", { style: {
+                                }, minDate: props.item.minDate ? dayjs(props.item.minDate, 'MM/YYYY') : undefined, maxDate: props.item.maxDate ? dayjs(props.item.maxDate, 'MM/YYYY') : undefined })] }), props?.item?.helperText && (jsxs("span", { style: {
                             fontSize: '11px',
                             color: '#3651d3',
                         }, children: ["(", props?.item?.helperText, ")"] })), jsx(FormBottomField, { ...props })] })) })) }));

package/dist/components/FormComponents/FileUpload/FormRenderFileUpload.esm.js

@@ -4,7 +4,7 @@ import { useRef, useEffect } from 'react';
 import { useWatch } from 'react-hook-form';
 import FormBottomField from '../FormBottomField/FormBottomField.esm.js';
 import 'dayjs';
-import { renderLabel, wrapFieldWithLabelTooltipIfEnabled } from '../../../utils/Constants/FormConstants.esm.js';
+import { renderLabel } from '../../../utils/Constants/FormConstants.esm.js';
 
 const FormRenderFileUpload = ({ props, variant, }) => {
     const isError = !!props.errors?.[props.item.name];
@@ -57,7 +57,7 @@ const FormRenderFileUpload = ({ props, variant, }) => {
         return extensions.map((ext) => `.${ext}`).join(',');
     };
     const accept = getAcceptString();
-    return (jsxs(Fragment, { children: [jsxs(Box, { paddingLeft: '4px', sx: { ...props.item.sx }, children: [props.item?.label && (jsx(Box, { sx: { fontSize: '10px;' }, children: renderLabel(variant, props, true) })), wrapFieldWithLabelTooltipIfEnabled(variant, props, (jsx(TextField, { type: "file", id: props.item.name, error: isShowBorderError, inputRef: inputRef, inputProps: {
+    return (jsxs(Fragment, { children: [jsxs(Box, { paddingLeft: '4px', sx: { ...props.item.sx }, children: [props.item?.label && (jsx(Box, { sx: { fontSize: '10px;' }, children: renderLabel(variant, props, true) })), jsx(TextField, { type: "file", id: props.item.name, error: isShowBorderError, inputRef: inputRef, inputProps: {
                             accept,
                             'aria-labelledby': `${props.item.name}-label`,
                             'aria-describedby': `${props.item.name}-helper ${props.item.name}-error`,
@@ -90,7 +90,7 @@ const FormRenderFileUpload = ({ props, variant, }) => {
                             props.clearErrors(props.item?.name);
                             props.item.onChangeSetFileFn &&
                                 props.item.onChangeSetFileFn(file);
-                        }, sx: { width: '100%' } })))] }), jsx(FormBottomField, { ...props })] }));
+                        }, sx: { width: '100%' } })] }), jsx(FormBottomField, { ...props })] }));
 };
 
 export { FormRenderFileUpload as default };

package/dist/components/FormComponents/FileUpload/FormRenderMultiFileUpload.esm.js

@@ -3,7 +3,7 @@ import { Box, TextField } from '@mui/material';
 import { useRef, useEffect } from 'react';
 import { useWatch } from 'react-hook-form';
 import 'dayjs';
-import { renderLabel, wrapFieldWithLabelTooltipIfEnabled } from '../../../utils/Constants/FormConstants.esm.js';
+import { renderLabel } from '../../../utils/Constants/FormConstants.esm.js';
 import FormBottomField from '../FormBottomField/FormBottomField.esm.js';
 
 const FormRenderMultiFileUpload = ({ props, variant, }) => {
@@ -57,7 +57,7 @@ const FormRenderMultiFileUpload = ({ props, variant, }) => {
         const extensions = getValidExtensions();
         return extensions.map((ext) => `.${ext}`).join(',');
     };
-    return (jsxs(Fragment, { children: [jsxs(Box, { paddingLeft: '4px', sx: { ...props.item.sx }, children: [props.item?.label && (jsx(Box, { sx: { fontSize: '10px;' }, children: renderLabel(variant, props, true) })), wrapFieldWithLabelTooltipIfEnabled(variant, props, (jsx(TextField, { type: "file", id: props.item.name, error: isShowBorderError, inputRef: inputRef, inputProps: {
+    return (jsxs(Fragment, { children: [jsxs(Box, { paddingLeft: '4px', sx: { ...props.item.sx }, children: [props.item?.label && (jsx(Box, { sx: { fontSize: '10px;' }, children: renderLabel(variant, props, true) })), jsx(TextField, { type: "file", id: props.item.name, error: isShowBorderError, inputRef: inputRef, inputProps: {
                             multiple: true,
                             accept: getAcceptString(),
                             'aria-labelledby': `${props.item.name}-label`,
@@ -98,7 +98,7 @@ const FormRenderMultiFileUpload = ({ props, variant, }) => {
                             props.setValue(props.item?.name, fileName);
                             props.setValue(props.item?.name + 'File', fileArray);
                             props.clearErrors(props.item?.name);
-                        }, sx: { width: '100%' } })))] }), jsx(FormBottomField, { ...props })] }));
+                        }, sx: { width: '100%' } })] }), jsx(FormBottomField, { ...props })] }));
 };
 
 export { FormRenderMultiFileUpload as default };

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

@@ -3,7 +3,7 @@ import { FormControl, FormGroup, FormControlLabel, Typography, Checkbox } from '
 import { Controller } from 'react-hook-form';
 import FormBottomField from '../FormBottomField/FormBottomField.esm.js';
 import 'dayjs';
-import { renderLabel, wrapFieldWithLabelTooltipIfEnabled } from '../../../utils/Constants/FormConstants.esm.js';
+import { renderLabel } from '../../../utils/Constants/FormConstants.esm.js';
 
 /**
  * FormCheckBoxGroup Component
@@ -24,7 +24,7 @@ const FormCheckBoxGroup = ({ props, variant, }) => {
     /**
      * Renders a group of checkboxes with labels and validation support
      */
-    return (jsxs(Fragment, { children: [renderLabel(variant, props), wrapFieldWithLabelTooltipIfEnabled(variant, props, (jsx(FormControl, { component: "fieldset", children: jsx(FormGroup, { row: true, children: props.item?.settings &&
+    return (jsxs(Fragment, { children: [renderLabel(variant, props), jsx(FormControl, { component: "fieldset", children: jsx(FormGroup, { row: true, children: props.item?.settings &&
                         props.item.settings.map((settings, i) => {
                             return (jsx(Controller, { name: settings.name, control: props.control, render: ({ field }) => {
                                     return (jsx(FormControlLabel, { control: jsx(Checkbox, { ...field, checked: field.value }), sx: {
@@ -36,7 +36,7 @@ const FormCheckBoxGroup = ({ props, variant, }) => {
                                             },
                                         }, label: jsx(Typography, { variant: "subtitle2", fontSize: '11px', fontWeight: 'normal !important', children: settings.label }), labelPlacement: "end" }));
                                 } }, i));
-                        }) }) }))), jsx(FormBottomField, { ...props })] }));
+                        }) }) }), jsx(FormBottomField, { ...props })] }));
 };
 
 export { FormCheckBoxGroup as default };

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

@@ -3,7 +3,7 @@ import { TextField } from '@mui/material';
 import { Controller } from 'react-hook-form';
 import FormBottomField from '../FormBottomField/FormBottomField.esm.js';
 import 'dayjs';
-import { renderLabel, wrapFieldWithLabelTooltipIfEnabled } from '../../../utils/Constants/FormConstants.esm.js';
+import { renderLabel } from '../../../utils/Constants/FormConstants.esm.js';
 
 /**
  * FormNumberField Component
@@ -55,7 +55,7 @@ const FormNumberField = ({ props, variant }) => {
      * for controlled form state management
      */
     return (jsx(Fragment, { children: jsx(Controller, { control: props.control, name: props.item.name, render: ({ field }) => {
-                return (jsxs(Fragment, { children: [renderLabel(variant, props), wrapFieldWithLabelTooltipIfEnabled(variant, props, (jsx(TextField, { ...field, size: "small", label: label, error: isShowBorderError, value: field.value ?? '', 
+                return (jsxs(Fragment, { children: [renderLabel(variant, props), jsx(TextField, { ...field, size: "small", label: label, error: isShowBorderError, value: field.value ?? '', 
                             /**
                              * Handles input events with numeric restrictions
                              * - Removes non-numeric characters
@@ -99,7 +99,7 @@ const FormNumberField = ({ props, variant }) => {
                                 'aria-labelledby': `${props.item.name}-label`,
                                 'aria-describedby': `${props.item.name}-helper ${props.item.name}-error`,
                                 'aria-required': props.item.required ? true : undefined,
-                            }, disabled: props.item.disable }))), jsx(FormBottomField, { ...props })] }));
+                            }, disabled: props.item.disable }), jsx(FormBottomField, { ...props })] }));
             } }, props.item.name) }));
 };
 

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

@@ -3,7 +3,7 @@ import { TextField } from '@mui/material';
 import { Controller } from 'react-hook-form';
 import FormBottomField from '../FormBottomField/FormBottomField.esm.js';
 import 'dayjs';
-import { renderLabel, wrapFieldWithLabelTooltipIfEnabled } from '../../../utils/Constants/FormConstants.esm.js';
+import { renderLabel } from '../../../utils/Constants/FormConstants.esm.js';
 
 const FormNumberFieldDecimal = ({ props, variant, }) => {
     const fixedLength = props.item.decimalFixedTo || 2;
@@ -21,7 +21,7 @@ const FormNumberFieldDecimal = ({ props, variant, }) => {
     const label = variant !== 'standard' ? `${props.item.label}${props.item.required ? ' *' : ''}` : '';
     const isError = !!props.errors?.[props.item.name];
     const isShowBorderError = isError;
-    return (jsx(Controller, { name: props.item.name, control: props.control, disabled: props.item?.disable, render: ({ field }) => (jsxs(Fragment, { children: [renderLabel(variant, props), wrapFieldWithLabelTooltipIfEnabled(variant, props, (jsx(TextField, { type: "text", size: "small", label: label, error: isShowBorderError, ...field, onChange: (e) => {
+    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: (e) => {
                         const sanitized = sanitizeDecimal(e.target.value ?? '');
                         const value = sanitized === '' ? '' : sanitized;
                         field.onChange(value);
@@ -37,6 +37,9 @@ const FormNumberFieldDecimal = ({ props, variant, }) => {
                         props?.item?.onBlurFn && props?.item?.onBlurFn(e);
                     }, InputProps: {
                         inputProps: {
+                            onInput: (e) => {
+                                props.item.onInputProps && props.item.onInputProps(e);
+                            },
                             // allow digits, one dot and optional leading minus
                             inputMode: 'decimal',
                             maxLength: 20,
@@ -44,7 +47,7 @@ const FormNumberFieldDecimal = ({ props, variant, }) => {
                             'aria-describedby': `${props.item.name}-helper ${props.item.name}-error`,
                             'aria-required': props.item.required ? true : undefined,
                         },
-                    } }))), jsx(FormBottomField, { ...props })] })) }, props.item.name));
+                    } }), jsx(FormBottomField, { ...props })] })) }, props.item.name));
 };
 
 export { FormNumberFieldDecimal as default };

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

@@ -3,7 +3,7 @@ import { FormControl, RadioGroup, FormControlLabel, Typography, Radio } from '@m
 import { Controller } from 'react-hook-form';
 import FormBottomField from '../FormBottomField/FormBottomField.esm.js';
 import 'dayjs';
-import { renderLabel, wrapFieldWithLabelTooltipIfEnabled } from '../../../utils/Constants/FormConstants.esm.js';
+import { renderLabel } from '../../../utils/Constants/FormConstants.esm.js';
 
 /**
  * FormRadioGroup Component
@@ -24,7 +24,7 @@ const FormRadioGroup = ({ props, variant }) => {
     /**
      * Renders a group of radio buttons with labels and validation support
      */
-    return (jsxs(Fragment, { children: [renderLabel(variant, props), wrapFieldWithLabelTooltipIfEnabled(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) => {
+    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
                             props.item.onChangeFn && props.item.onChangeFn(e.target.value); // optional handler
                         }, row: true, sx: {
@@ -38,7 +38,7 @@ const FormRadioGroup = ({ props, variant }) => {
                                     '& .MuiSvgIcon-root': {
                                         fontSize: 16, // controls the radio icon size
                                     },
-                                } }), label: jsx(Typography, { fontSize: '11px', fontWeight: 'normal !important', children: option.label }) }, i))) })) }) }))), jsx(FormBottomField, { ...props })] }));
+                                } }), 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.esm.js

@@ -1,9 +1,10 @@
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { Controller } from 'react-hook-form';
+import { Tooltip, Box } from '@mui/material';
 import FormBottomField from '../FormBottomField/FormBottomField.esm.js';
 import { TextAreaField } from './FormTextAreaField.styles.esm.js';
 import 'dayjs';
-import { renderLabel, wrapFieldWithLabelTooltipIfEnabled } from '../../../utils/Constants/FormConstants.esm.js';
+import { renderLabel } from '../../../utils/Constants/FormConstants.esm.js';
 
 /**
  * FormTextAreaField Component
@@ -29,37 +30,37 @@ const FormTextAreaField = ({ props, variant, }) => {
     /**
      * Renders the textarea component with validation support
      */
-    return (jsx(Fragment, { children: jsx(Controller, { control: props.control, name: props.item.name, render: ({ field }) => (jsxs(Fragment, { children: [renderLabel(variant, props), wrapFieldWithLabelTooltipIfEnabled(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: {
-                            /**
-                             * Handles input events with text restrictions
-                             *
-                             * @param {any} e - The input event object
-                             *
-                             * @remarks
-                             * - Removes special characters if allowSpecialChars is false
-                             * - Prevents input that starts with a space
-                             */
-                            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 = '';
-                                }
-                            },
-                            '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) }));
+    return (jsx(Fragment, { children: jsx(Controller, { control: props.control, name: props.item.name, render: ({ field }) => (jsxs(Fragment, { children: [renderLabel(variant, props), jsx(Tooltip, { title: props.item.isTooltipEnable ? (field.value || '') : '', placement: "bottom-start", children: jsxs(Box, { sx: { width: '100%', position: 'relative' }, children: [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: {
+                                        /**
+                                         * Handles input events with text restrictions
+                                         *
+                                         * @param {any} e - The input event object
+                                         *
+                                         * @remarks
+                                         * - Removes special characters if allowSpecialChars is false
+                                         * - Prevents input that starts with a space
+                                         */
+                                        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 = '';
+                                            }
+                                        },
+                                        'aria-labelledby': `${props.item.name}-label`,
+                                        'aria-describedby': `${props.item.name}-helper ${props.item.name}-error`,
+                                        'aria-required': props.item.required ? true : undefined,
+                                    } }), props.item.disable && props.item.isTooltipEnable && (jsx(Box, { sx: { position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', zIndex: 1 } }))] }) }), jsx(FormBottomField, { ...props })] })) }, props.item.name) }));
 };
 
 export { FormTextAreaField as default };

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

@@ -1,9 +1,10 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Controller } from 'react-hook-form';
+import { Tooltip, Box } from '@mui/material';
 import { FormTextFieldComponent } from './FormTextField.styles.esm.js';
 import FormBottomField from '../FormBottomField/FormBottomField.esm.js';
 import 'dayjs';
-import { renderLabel, wrapFieldWithLabelTooltipIfEnabled } from '../../../utils/Constants/FormConstants.esm.js';
+import { renderLabel } from '../../../utils/Constants/FormConstants.esm.js';
 
 /**
  * FormTextField Component
@@ -88,24 +89,24 @@ const FormTextField = ({ props, variant }) => {
      * Renders the text field component using react-hook-form's Controller
      * for controlled form state management
      */
-    return (jsx(Controller, { control: props.control, name: props.item.name, render: ({ field, fieldState }) => (jsxs(Fragment, { children: [renderLabel(variant, props), wrapFieldWithLabelTooltipIfEnabled(variant, props, (jsx(FormTextFieldComponent, { ...field, fullWidth: true, autoFocus: props.item.autoFocus, error: !!fieldState.error, label: label, placeholder: props.item.placeholder || '', autoComplete: "off", sx: {
-                        ...props.item.sx,
-                    }, value: field.value || '', size: "small", disabled: props.item.disable, onBlur: (e) => {
-                        // Call custom onBlur handler if provided
-                        props?.item?.onBlurFn && props?.item?.onBlurFn(e);
-                    }, inputProps: {
-                        ...{
-                            maxLength: props.item.maxLength || 100,
-                            onInput: onInput,
-                            onPaste: (e) => {
-                                if (props.item.doNotAllowPaste)
-                                    e.preventDefault();
-                            },
-                        },
-                        '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));
+    return (jsx(Controller, { control: props.control, name: props.item.name, render: ({ field, fieldState }) => (jsxs(Fragment, { children: [renderLabel(variant, props), jsx(Tooltip, { title: props.item.isTooltipEnable ? (field.value || '') : '', placement: "bottom-start", children: jsxs(Box, { sx: { width: '100%', position: 'relative' }, children: [jsx(FormTextFieldComponent, { ...field, fullWidth: true, autoFocus: props.item.autoFocus, error: !!fieldState.error, label: label, placeholder: props.item.placeholder || '', autoComplete: "off", sx: {
+                                    ...props.item.sx,
+                                }, value: field.value || '', size: "small", disabled: props.item.disable, onBlur: (e) => {
+                                    // Call custom onBlur handler if provided
+                                    props?.item?.onBlurFn && props?.item?.onBlurFn(e);
+                                }, inputProps: {
+                                    ...{
+                                        maxLength: props.item.maxLength || 100,
+                                        onInput: onInput,
+                                        onPaste: (e) => {
+                                            if (props.item.doNotAllowPaste)
+                                                e.preventDefault();
+                                        },
+                                    },
+                                    'aria-labelledby': `${props.item.name}-label`,
+                                    'aria-describedby': `${props.item.name}-helper ${props.item.name}-error`,
+                                    'aria-required': props.item.required ? true : undefined,
+                                } }), props.item.disable && props.item.isTooltipEnable && (jsx(Box, { sx: { position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', zIndex: 1 } }))] }) }), jsx(FormBottomField, { ...props })] })) }, props.item.name));
 };
 
 export { FormTextField as default };

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

@@ -2,7 +2,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Controller } from 'react-hook-form';
 import FormBottomField from '../FormBottomField/FormBottomField.esm.js';
 import 'dayjs';
-import { renderLabel, wrapFieldWithLabelTooltipIfEnabled } from '../../../utils/Constants/FormConstants.esm.js';
+import { renderLabel } from '../../../utils/Constants/FormConstants.esm.js';
 import { Box, TextField, Select, MenuItem } from '@mui/material';
 
 /**
@@ -66,7 +66,7 @@ const FormTextFieldWithSelect = ({ props, variant, }) => {
      * Renders the text field component using react-hook-form's Controller
      * for controlled form state management
      */
-    return (jsx(Controller, { control: props.control, name: props.item.name, render: ({ field, fieldState }) => (jsxs(Fragment, { children: [renderLabel(variant, props), wrapFieldWithLabelTooltipIfEnabled(variant, props, (jsxs(Box, { sx: { display: 'flex', width: '100%' }, children: [jsx(TextField, { ...field, fullWidth: true, autoFocus: props.item.autoFocus, error: !!fieldState.error, label: label, placeholder: props.item.placeholder || '', autoComplete: "off", sx: {
+    return (jsx(Controller, { control: props.control, name: props.item.name, render: ({ field, fieldState }) => (jsxs(Fragment, { children: [renderLabel(variant, props), jsxs(Box, { sx: { display: 'flex', width: '100%' }, children: [jsx(TextField, { ...field, fullWidth: true, autoFocus: props.item.autoFocus, error: !!fieldState.error, label: label, placeholder: props.item.placeholder || '', autoComplete: "off", sx: {
                                 ...props.item.sx,
                                 '& .MuiOutlinedInput-root': {
                                     borderTopRightRadius: 0,
@@ -96,7 +96,7 @@ const FormTextFieldWithSelect = ({ props, variant, }) => {
                                     // },
                                 }, disabled: props.item.disable, error: !!fieldState.error, children: props?.item?.options?.map((item) => {
                                     return (jsx(MenuItem, { value: item.value, children: item.label }, item.value));
-                                }) })) })] }))), jsx(FormBottomField, { ...props })] })) }, props.item.name));
+                                }) })) })] }), jsx(FormBottomField, { ...props })] })) }, props.item.name));
 };
 
 export { FormTextFieldWithSelect as default };

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

@@ -5,7 +5,7 @@ import { useState } from 'react';
 import { Controller } from 'react-hook-form';
 import FormBottomField from '../FormBottomField/FormBottomField.esm.js';
 import 'dayjs';
-import { renderLabel, wrapFieldWithLabelTooltipIfEnabled } from '../../../utils/Constants/FormConstants.esm.js';
+import { renderLabel } from '../../../utils/Constants/FormConstants.esm.js';
 
 /**
  * PasswordField Component
@@ -46,7 +46,7 @@ const PasswordField = ({ props, variant }) => {
     /**
      * 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), wrapFieldWithLabelTooltipIfEnabled(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: {
+    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',
@@ -73,7 +73,7 @@ const PasswordField = ({ props, variant }) => {
                                                 e.preventDefault();
                                             }
                                         },
-                                    }, value: field.value || null, disabled: props.item.disable }))), jsx(IconButton, { sx: {
+                                    }, value: field.value || null, disabled: props.item.disable }), jsx(IconButton, { sx: {
                                         position: 'absolute',
                                         right: '14px',
                                         top: variant === 'standard' ? '70%' : '50%',

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

@@ -3,10 +3,10 @@ import { Controller } from 'react-hook-form';
 import FormBottomField from '../FormBottomField/FormBottomField.esm.js';
 import RichTextEditor from './RichTextEditor.esm.js';
 import 'dayjs';
-import { renderLabel, wrapFieldWithLabelTooltipIfEnabled } from '../../../utils/Constants/FormConstants.esm.js';
+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), wrapFieldWithLabelTooltipIfEnabled(variant, props, (jsx(RichTextEditor, { props: props }))), jsx(FormBottomField, { ...props })] })) }, props.item.name));
+    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/Select/MultiSelectAutocomplete.esm.js

@@ -4,7 +4,7 @@ import { useState, useRef, useMemo, useCallback } from 'react';
 import { useWatch, Controller } from 'react-hook-form';
 import FormBottomField from '../FormBottomField/FormBottomField.esm.js';
 import 'dayjs';
-import { renderLabel, wrapFieldWithLabelTooltipIfEnabled } from '../../../utils/Constants/FormConstants.esm.js';
+import { renderLabel } from '../../../utils/Constants/FormConstants.esm.js';
 
 //region old code
 // const MultiSelectAutocomplete = ({
@@ -185,7 +185,7 @@ const MultiSelectAutocomplete = ({ props, variant, }) => {
     const handleBlur = useCallback((e) => {
         props?.item?.onBlurFn && props?.item?.onBlurFn(e);
     }, [props]);
-    return (jsx(Controller, { control: props.control, name: props.item.name, render: ({ field: { ref, onBlur: fieldOnBlur } }) => (jsxs(Fragment, { children: [renderLabel(variant, props), wrapFieldWithLabelTooltipIfEnabled(variant, props, (jsx(Autocomplete, { ref: ref, open: open, onOpen: () => setOpen(true), onClose: () => setOpen(false), multiple: true, disableCloseOnSelect: true, id: `${props.item.name}-autocomplete-multi`, options: options, value: selectedOptions, getOptionLabel: getOptionLabelCb, isOptionEqualToValue: isOptionEqualCb, onChange: handleChange, onBlur: (e) => {
+    return (jsx(Controller, { control: props.control, name: props.item.name, render: ({ field: { ref, onBlur: fieldOnBlur } }) => (jsxs(Fragment, { children: [renderLabel(variant, props), jsx(Autocomplete, { ref: ref, open: open, onOpen: () => setOpen(true), onClose: () => setOpen(false), multiple: true, disableCloseOnSelect: true, id: `${props.item.name}-autocomplete-multi`, options: options, value: selectedOptions, getOptionLabel: getOptionLabelCb, isOptionEqualToValue: isOptionEqualCb, getOptionDisabled: (option) => option.disable, onChange: handleChange, onBlur: (e) => {
                         fieldOnBlur();
                         handleBlur(e);
                     }, size: "small", disablePortal: false, autoHighlight: true, selectOnFocus: true, clearOnBlur: false, renderTags: (tagValue, getTagProps) => (jsx(Box, { ref: tagsContainerRef, sx: {
@@ -232,7 +232,7 @@ const MultiSelectAutocomplete = ({ props, variant, }) => {
                             '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));
+                        } })) }), jsx(FormBottomField, { ...props })] })) }, props.item.name));
 };
 
 export { MultiSelectAutocomplete as default };

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

@@ -4,7 +4,7 @@ import { useState, useRef, useMemo, useCallback } from 'react';
 import { useWatch } from 'react-hook-form';
 import FormBottomField from '../FormBottomField/FormBottomField.esm.js';
 import 'dayjs';
-import { renderLabel, wrapFieldWithLabelTooltipIfEnabled } from '../../../utils/Constants/FormConstants.esm.js';
+import { renderLabel } from '../../../utils/Constants/FormConstants.esm.js';
 import { useMaterialReactTable, MaterialReactTable } from 'material-react-table';
 
 const ITEM_HEIGHT = 50;
@@ -304,15 +304,22 @@ const MultiSelectTable = ({ props, variant, }) => {
                 overflow: 'visible',
             },
         },
-        muiTableBodyRowProps: {
-            sx: {
-                borderBottom: '1px solid #e0e0e0',
-                height: 'auto',
-                minHeight: '32px',
-                '&:hover': {
-                    backgroundColor: '#e0f2f1',
+        muiTableBodyRowProps: ({ row }) => {
+            const rowId = String(row.original[valueField]);
+            const isSelected = selectedValues.includes(rowId);
+            return {
+                onClick: () => handleRowSelect(rowId), // 👈 row click selection
+                sx: {
+                    borderBottom: '1px solid #e0e0e0',
+                    height: 'auto',
+                    minHeight: '32px',
+                    cursor: 'pointer',
+                    backgroundColor: isSelected ? '#b2dfdb' : 'inherit', // optional highlight
+                    '&:hover': {
+                        backgroundColor: '#e0f2f1',
+                    },
                 },
-            },
+            };
         },
         initialState: {
             density: 'compact',
@@ -337,7 +344,7 @@ const MultiSelectTable = ({ props, variant, }) => {
                 '& .MuiTablePagination-root': {
                     padding: '0px !important'
                 }
-            }, children: [renderLabel(variant, props), variant !== 'standard' ? (jsxs(InputLabel, { error: isShowBorderError, id: `${props.item.name}-mst-labelId`, children: [props.item.label, props.item.required ? ' *' : ''] })) : null, wrapFieldWithLabelTooltipIfEnabled(variant, props, (jsx(Select, { labelId: `${props.item.name}-mst-labelId`, id: `${props.item.name}-mst-select`, multiple: true, sx: {
+            }, children: [renderLabel(variant, props), variant !== 'standard' ? (jsxs(InputLabel, { error: isShowBorderError, id: `${props.item.name}-mst-labelId`, children: [props.item.label, props.item.required ? ' *' : ''] })) : null, jsx(Select, { labelId: `${props.item.name}-mst-labelId`, id: `${props.item.name}-mst-select`, multiple: true, sx: {
                         '& .MuiTypography-root': {
                             fontSize: '5px !important',
                         },
@@ -356,7 +363,7 @@ const MultiSelectTable = ({ props, variant, }) => {
                             maxHeight: 450, width: '100%', overflow: 'hidden', overflowY: 'auto', '.MuiTextField-root': {
                                 width: '280% !important'
                             }
-                        }, children: rows.length > 0 ? (jsx(MaterialReactTable, { table: table })) : (jsx(Box, { sx: { padding: '16px', textAlign: 'center', color: '#999', fontSize: '11px' }, children: "No Options found" })) }) }))), jsx(FormBottomField, { ...props })] }) }, props.item.name));
+                        }, children: rows.length > 0 ? (jsx(MaterialReactTable, { table: table })) : (jsx(Box, { sx: { padding: '16px', textAlign: 'center', color: '#999', fontSize: '11px' }, children: "No Options found" })) }) }), jsx(FormBottomField, { ...props })] }) }, props.item.name));
 };
 
 export { MultiSelectTable as default };

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

@@ -10,7 +10,7 @@ import React__default, { useState, useRef, useMemo } from 'react';
 import { useWatch } from 'react-hook-form';
 import FormBottomField from '../FormBottomField/FormBottomField.esm.js';
 import 'dayjs';
-import { renderLabel, wrapFieldWithLabelTooltipIfEnabled } from '../../../utils/Constants/FormConstants.esm.js';
+import { renderLabel } from '../../../utils/Constants/FormConstants.esm.js';
 
 const ITEM_HEIGHT = 36;
 const ITEM_PADDING_TOP = 2;
@@ -56,12 +56,16 @@ function MultiSelectV1({ props, variant, }) {
     const selectedOptions = useMemo(() => options.filter((item) => fieldValue?.split(',').some((value) => value === item.value)), [options, fieldValue]);
     const selectedValuesString = selectedOptions.map((item) => item.label).join(' , ');
     const isShowBorderError = !!props.errors?.[props.item.name];
-    return (jsx(Box, { children: jsxs(FormControl, { fullWidth: true, ref: containerRef, sx: { '& .MuiFormLabel-root': { top: -10 }, '& .MuiInputLabel-shrink': { top: 0 } }, children: [renderLabel(variant, props), variant !== 'standard' && (jsxs(InputLabel, { error: isShowBorderError, id: `${props.item.name}-ms-labelId`, children: [props.item.label, props.item.required ? ' *' : ''] })), wrapFieldWithLabelTooltipIfEnabled(variant, props, (jsxs(Select, { labelId: `${props.item.name}-ms-labelId`, id: `${props.item.name}-ms-select`, multiple: true, displayEmpty: true, error: isShowBorderError, disabled: props.item.disable, value: fieldValue ? extractValuesToArray(fieldValue) : [], onChange: handleChange, onOpen: () => {
-                        setSavedSortValue(fieldValue);
+    return (jsx(Box, { children: jsxs(FormControl, { fullWidth: true, ref: containerRef, sx: { '& .MuiFormLabel-root': { top: -10 }, '& .MuiInputLabel-shrink': { top: 0 } }, 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, displayEmpty: true, error: isShowBorderError, disabled: props.item.disable, value: fieldValue ? extractValuesToArray(fieldValue) : [], onChange: handleChange, onOpen: () => {
+                        if (!props.item.doNotEnableMultiselectOrder) {
+                            setSavedSortValue(fieldValue);
+                        }
                         setTimeout(() => textfieldRef.current?.focus(), 0);
                     }, onClose: () => {
                         setSearchText('');
-                        setSavedSortValue(fieldValue);
+                        if (!props.item.doNotEnableMultiselectOrder) {
+                            setSavedSortValue(fieldValue);
+                        }
                         props?.item?.onCloseMenu && props?.item?.onCloseMenu();
                     }, input: jsx(OutlinedInput, { label: variant !== 'standard' ? props.item.label : '' }), renderValue: () => (jsx(Tooltip, { title: selectedValuesString, children: jsx("span", { style: { display: 'block', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }, children: props.item.placeholder && selectedOptions.length === 0 ? (jsx("span", { style: { color: '#0009' }, children: props.item.placeholder })) : (selectedOptions.length > (props.item.multiSelectLabelLength || 3)
                                 ? `${selectedOptions.length} Selected`
@@ -103,7 +107,7 @@ function MultiSelectV1({ props, variant, }) {
                                 } }) }), filterOptions.length !== 0 ? (filterOptions.map((option) => {
                             const selectedArray = fieldValue ? extractValuesToArray(fieldValue) : [];
                             const isChecked = selectedArray.includes(String(option.value));
-                            return (jsxs(MenuItem, { value: `${option.value}`, sx: {
+                            return (jsxs(MenuItem, { value: `${option.value}`, disabled: option.disable, sx: {
                                     whiteSpace: 'normal',
                                     wordBreak: 'break-all',
                                     alignItems: 'center',
@@ -118,7 +122,7 @@ function MultiSelectV1({ props, variant, }) {
                                                 lineHeight: '1.2'
                                             }
                                         } })] }, option.value));
-                        })) : (jsx(MenuItem, { className: 'multiselect-datanotfound', sx: { marginLeft: '30px', fontSize: '12px' }, disabled: true, children: "No data Found" }))] }))), jsx(FormBottomField, { ...props })] }) }, props.item.name));
+                        })) : (jsx(MenuItem, { disabled: true, children: "No data Found" }))] }), jsx(FormBottomField, { ...props })] }) }, props.item.name));
 }
 
 export { MultiSelectV1 as default };

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

@@ -1,10 +1,10 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { createElement } from 'react';
-import { Autocomplete, TextField, Tooltip } from '@mui/material';
+import { Tooltip, Box, Autocomplete, TextField } from '@mui/material';
 import { useWatch, Controller } from 'react-hook-form';
 import FormBottomField from '../FormBottomField/FormBottomField.esm.js';
 import 'dayjs';
-import { renderLabel, wrapFieldWithLabelTooltipIfEnabled } from '../../../utils/Constants/FormConstants.esm.js';
+import { renderLabel } from '../../../utils/Constants/FormConstants.esm.js';
 
 const SingleSelect = ({ props, variant }) => {
     const isError = !!props.errors?.[props.item.name];
@@ -14,61 +14,52 @@ const SingleSelect = ({ props, variant }) => {
     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), wrapFieldWithLabelTooltipIfEnabled(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, newValue);
-                        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',
-                            },
-                        },
-                    }, renderOption: (props, option) => (createElement("li", { ...props, value: option.value, key: option.value }, option.label)), renderInput: (params) => {
-                        const inputField = (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,
-                            } }));
-                        if (!props.item.isLabelToolTipEnable) {
-                            return inputField;
-                        }
-                        return (jsx(Tooltip, { title: value?.label ?? '', disableHoverListener: !value, children: jsx("span", { style: {
-                                    display: 'block',
-                                    overflow: 'hidden',
-                                    textOverflow: 'ellipsis',
-                                    whiteSpace: 'nowrap',
-                                    width: '100%',
-                                }, children: inputField }) }));
-                    } }))), jsx(FormBottomField, { ...props })] })) }, props.item.name));
+    return (jsx(Controller, { control: props.control, name: props.item.name, render: ({ field }) => (jsxs(Fragment, { children: [renderLabel(variant, props), jsx(Tooltip, { title: props.item.isTooltipEnable ? (value?.label || '') : '', placement: "bottom-start", children: jsxs(Box, { sx: { width: '100%', position: 'relative' }, children: [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, newValue);
+                                    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',
+                                        },
+                                    },
+                                }, renderOption: (props, option) => (createElement("li", { ...props, value: option.value, style: {
+                                        opacity: option.disable ? 0.5 : 1,
+                                        pointerEvents: option.disable ? 'none' : 'auto',
+                                    }, key: option.value }, option.label)), 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,
+                                    } })) }), props.item.disable && props.item.isTooltipEnable && (jsx(Box, { sx: { position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', zIndex: 1 } }))] }) }), jsx(FormBottomField, { ...props })] })) }, props.item.name));
 };
 
 export { SingleSelect as default };

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

@@ -3,7 +3,7 @@ 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, wrapFieldWithLabelTooltipIfEnabled } from '../../../utils/Constants/FormConstants.esm.js';
+import { renderLabel } from '../../../utils/Constants/FormConstants.esm.js';
 
 const SingleSelectNonAutoComplete = ({ props, variant, }) => {
     const isError = !!props.errors?.[props.item.name];
@@ -17,16 +17,16 @@ const SingleSelectNonAutoComplete = ({ props, variant, }) => {
             '& .MuiInputLabel-shrink': {
                 top: 0,
             },
-        }, disabled: props.item.disable, children: [renderLabel(variant, props), variant !== 'standard' && (jsx(InputLabel, { error: isShowBorderError, id: `${props.item.name}-labelId`, children: props.item.label })), wrapFieldWithLabelTooltipIfEnabled(variant, props, (jsx(Select, { labelId: `${props.item.name}-labelId`, id: `${props.item.name}-select`, value: value, label: variant !== 'standard' ? `${props.item.label}${props.item.required ? ' *' : ''}` : '', disabled: props.item.disable, onChange: (e) => props.setValue(props.item.name, e.target.value), onBlur: (e) => {
+        }, disabled: props.item.disable, 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 ? ' *' : ''}` : '', disabled: props.item.disable, 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: {
+                }, children: (props.item.options || []).map((item) => (jsx(MenuItem, { disabled: item.disable, 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));
+                    }, value: item.value, children: item.label }, item.value))) }), jsx(FormBottomField, { ...props })] }, props.item.name));
 };
 
 export { SingleSelectNonAutoComplete as default };

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

@@ -1,10 +1,10 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { Autocomplete, Stack, Skeleton, TextField, Tooltip } from '@mui/material';
+import { Autocomplete, Stack, Skeleton, Tooltip, TextField } from '@mui/material';
 import { useState, useEffect } from 'react';
 import { Controller } from 'react-hook-form';
 import '../../../node_modules/axios/index.esm.js';
 import 'dayjs';
-import { renderLabel, wrapFieldWithLabelTooltipIfEnabled } from '../../../utils/Constants/FormConstants.esm.js';
+import { renderLabel } from '../../../utils/Constants/FormConstants.esm.js';
 import FormBottomField from '../FormBottomField/FormBottomField.esm.js';
 import axios from '../../../node_modules/axios/lib/axios.esm.js';
 
@@ -48,7 +48,7 @@ const SingleSelectSearchApi = ({ props, variant, }) => {
     //   setSearchValue('');
     // }, [props.item?.changeValue]);
     const isOptionEqualToValue = (option, value) => option?.value === value?.value; // Assuming there's a 'value' property in your options
-    return (jsx(Controller, { control: props.control, name: props.item.name, render: ({ field }) => (jsxs(Fragment, { children: [renderLabel(variant, props), wrapFieldWithLabelTooltipIfEnabled(variant, props, (jsx(Autocomplete, { ...field, value: props.getValues(props.item.name)
+    return (jsx(Controller, { control: props.control, name: props.item.name, render: ({ field }) => (jsxs(Fragment, { children: [renderLabel(variant, props), jsx(Autocomplete, { ...field, value: props.getValues(props.item.name)
                         ? optionsFetched?.find((item) => item.value === props.getValues(props.item.name))
                         : null, onChange: (_, newValue) => {
                         // field.onChange(newValue);
@@ -68,18 +68,14 @@ const SingleSelectSearchApi = ({ props, variant, }) => {
                             fontSize: '16px',
                         },
                     }, disabled: props.item.disable, options: optionsFetched, getOptionLabel: (option) => option.label, renderInput: (params) => {
-                        const inputField = (jsx(TextField, { ...params, onChange: (e) => {
-                                setSearchValue(e.target.value);
-                            }, label: variant !== 'standard'
-                                ? `${props.item.label}${props.item.required ? ' *' : ''}`
-                                : '', placeholder: props.item.placeholder }));
-                        if (!props.item.isLabelToolTipEnable) {
-                            return inputField;
-                        }
-                        return (jsx(Tooltip, { title: params.inputProps.value && params.inputProps.value, children: jsx("span", { style: { display: 'block', width: '100%' }, children: inputField }) }));
+                        return (jsx(Tooltip, { title: params.inputProps.value && params.inputProps.value, children: jsx(TextField, { ...params, onChange: (e) => {
+                                    setSearchValue(e.target.value);
+                                }, label: variant !== 'standard'
+                                    ? `${props.item.label}${props.item.required ? ' *' : ''}`
+                                    : '', placeholder: props.item.placeholder }) }));
                     }, PaperComponent: ({ children }) => (jsx("div", { style: {
                             background: '#fff',
-                        }, children: isLoading ? (jsxs(Stack, { padding: 2, spacing: 1, children: [jsx(Skeleton, { variant: "rectangular", width: '100%', height: 20 }), jsx(Skeleton, { variant: "rectangular", width: '100%', height: 20 }), jsx(Skeleton, { variant: "rectangular", width: '100%', height: 20 }), jsx(Skeleton, { variant: "rectangular", width: '100%', height: 20 }), jsx(Skeleton, { variant: "rectangular", width: '100%', height: 20 }), jsx(Skeleton, { variant: "rectangular", width: '100%', height: 20 })] })) : (children) })), isOptionEqualToValue: isOptionEqualToValue }))), props?.item?.helperText && (jsxs("span", { style: {
+                        }, children: isLoading ? (jsxs(Stack, { padding: 2, spacing: 1, children: [jsx(Skeleton, { variant: "rectangular", width: '100%', height: 20 }), jsx(Skeleton, { variant: "rectangular", width: '100%', height: 20 }), jsx(Skeleton, { variant: "rectangular", width: '100%', height: 20 }), jsx(Skeleton, { variant: "rectangular", width: '100%', height: 20 }), jsx(Skeleton, { variant: "rectangular", width: '100%', height: 20 }), jsx(Skeleton, { variant: "rectangular", width: '100%', height: 20 })] })) : (children) })), isOptionEqualToValue: isOptionEqualToValue }), props?.item?.helperText && (jsxs("span", { style: {
                         fontFamily: 'Roboto-Reg',
                         fontSize: '11px',
                         color: '#3651d3',

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

@@ -7,7 +7,7 @@ import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { useWatch, Controller } from 'react-hook-form';
 import { ErrorMessageComponent } from '../../Form/Form.styles.esm.js';
 import 'dayjs';
-import { renderLabel, wrapFieldWithLabelTooltipIfEnabled, parseCustomTime, formatDayjsToCustomTime } from '../../../utils/Constants/FormConstants.esm.js';
+import { renderLabel, parseCustomTime, formatDayjsToCustomTime } from '../../../utils/Constants/FormConstants.esm.js';
 
 function TimePickerFieldWrapper({ props, variant, }) {
     const [TimePicker, setTimePicker] = useState(null);
@@ -27,7 +27,7 @@ function TimePickerFieldWrapper({ props, variant, }) {
     if (isLoading) {
         return jsx("div", { style: { minHeight: '36px' }, children: "Loading..." });
     }
-    return (jsx(Fragment, { children: TimePicker && (jsxs(LocalizationProvider, { dateAdapter: AdapterDayjs, children: [jsx(Controller, { name: props.item.name, control: props.control, render: ({ field }) => (jsxs(Fragment, { children: [renderLabel(variant, props), wrapFieldWithLabelTooltipIfEnabled(variant, props, (jsx(TimePicker, { ...field, value: value ? parseCustomTime(value) : null, onChange: (newTime) => {
+    return (jsx(Fragment, { children: TimePicker && (jsxs(LocalizationProvider, { dateAdapter: AdapterDayjs, children: [jsx(Controller, { name: props.item.name, control: props.control, render: ({ field }) => (jsxs(Fragment, { children: [renderLabel(variant, props), jsx(TimePicker, { ...field, value: value ? parseCustomTime(value) : null, onChange: (newTime) => {
                                     const parsedTime = parseCustomTime(formatDayjsToCustomTime(newTime));
                                     const min = props.item.minTime ? parseCustomTime(props.item.minTime) : null;
                                     const max = props.item.maxTime ? parseCustomTime(props.item.maxTime) : null;
@@ -64,7 +64,7 @@ function TimePickerFieldWrapper({ props, variant, }) {
                                             },
                                         },
                                     },
-                                } })))] })) }), jsx(ErrorMessageComponent, { children: jsx(ErrorMessage, { errors: props.errors, name: props.item.name }) })] })) }));
+                                } })] })) }), jsx(ErrorMessageComponent, { children: jsx(ErrorMessage, { errors: props.errors, name: props.item.name }) })] })) }));
 }
 
 export { TimePickerFieldWrapper as default };

package/dist/components/SelectField/MultiSelectFieldComponent.d.ts

@@ -7,6 +7,7 @@ interface MultiSelectProps {
     onChangeFn: (e: any) => void;
     disable?: boolean;
     optionFontSize?: string;
+    donotEnableMultiselectOrder?: boolean;
 }
-export default function MultiSelectFieldComponent({ value, options, onChangeFn, disable, optionFontSize, }: MultiSelectProps): import("react/jsx-runtime").JSX.Element;
+export default function MultiSelectFieldComponent({ value, options, onChangeFn, disable, optionFontSize, donotEnableMultiselectOrder }: MultiSelectProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/SelectField/MultiSelectFieldComponent.esm.js

@@ -15,7 +15,7 @@ const extractValuesToArray = (inputString) => {
     const trimmedArray = valuesArray?.map((value) => value.trim());
     return trimmedArray;
 };
-function MultiSelectFieldComponent({ value, options, onChangeFn, disable = false, optionFontSize = '13px', }) {
+function MultiSelectFieldComponent({ value, options, onChangeFn, disable = false, optionFontSize = '13px', donotEnableMultiselectOrder = false }) {
     const [personName, setPersonName] = React.useState(value ? extractValuesToArray(value) : []);
     const [searchText, setSearchText] = useState('');
     const [selectAll, setSelectAll] = useState(false);
@@ -68,7 +68,9 @@ function MultiSelectFieldComponent({ value, options, onChangeFn, disable = false
                         fontSize: '5px !important',
                     },
                 }, disabled: disable, value: value ? extractValuesToArray(value) : [], onChange: handleChange, onOpen: () => {
-                    setSavedSortValue(fieldValue);
+                    if (!donotEnableMultiselectOrder) {
+                        setSavedSortValue(fieldValue);
+                    }
                     setTimeout(() => {
                         if (textfieldRef.current) {
                             textfieldRef.current?.focus();
@@ -76,7 +78,9 @@ function MultiSelectFieldComponent({ value, options, onChangeFn, disable = false
                     }, 0);
                 }, onClose: () => {
                     setSearchText('');
-                    setSavedSortValue(fieldValue);
+                    if (!donotEnableMultiselectOrder) {
+                        setSavedSortValue(fieldValue);
+                    }
                 }, renderValue: () => (jsx(Tooltip, { title: selectedValues, children: jsx("span", { children: selectedOptions.length > 3 ? `${selectedOptions.length} Selected` : selectedValues }) })), MenuProps: {
                     PaperProps: {
                         style: {

package/dist/node_modules/react-date-range/dist/components/DateInput/index.esm.js

@@ -1,4 +1,4 @@
-import { __exports as DateInput } from '../../../../../_virtual/index.esm12.js';
+import { __exports as DateInput } from '../../../../../_virtual/index.esm14.js';
 import React__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 import { __require as requireClassnames } from '../../../../classnames/index.esm.js';

package/dist/node_modules/react-date-range/dist/components/InputRangeField/index.esm.js

@@ -1,4 +1,4 @@
-import { __exports as InputRangeField } from '../../../../../_virtual/index.esm13.js';
+import { __exports as InputRangeField } from '../../../../../_virtual/index.esm12.js';
 import React__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 

package/dist/node_modules/react-date-range/dist/components/Month/index.esm.js

@@ -1,4 +1,4 @@
-import { __exports as Month } from '../../../../../_virtual/index.esm14.js';
+import { __exports as Month } from '../../../../../_virtual/index.esm13.js';
 import React__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 import { __require as requireDayCell } from '../DayCell/index.esm.js';

package/dist/utils/Constants/FormConstants.d.ts

@@ -1,12 +1,5 @@
-import type { ReactElement } from 'react';
 import dayjs, { Dayjs } from 'dayjs';
 import { VariantProps, FormRenderProps } from '../Interface/FormInterface';
-/** Full label text used for tooltips (label + required asterisk when applicable). */
-export declare const getLabelTooltipTitle: (props: FormRenderProps) => string;
-/**
- * For non-`standard` variants the visible label sits on the input; wrap the control so the full label shows on hover.
- */
-export declare const wrapFieldWithLabelTooltipIfEnabled: (variant: VariantProps, props: FormRenderProps, children: ReactElement) => ReactElement;
 /**
  * Renders a form input label with an optional required asterisk.
  *

package/dist/utils/Constants/FormConstants.esm.js

@@ -1,18 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { Tooltip } from '@mui/material';
 import dayjs from 'dayjs';
 
-/** Full label text used for tooltips (label + required asterisk when applicable). */
-const getLabelTooltipTitle = (props) => `${props.item.label}${props.item.required ? ' *' : ''}`;
-/**
- * For non-`standard` variants the visible label sits on the input; wrap the control so the full label shows on hover.
- */
-const wrapFieldWithLabelTooltipIfEnabled = (variant, props, children) => {
-    if (!props.item.isLabelToolTipEnable || variant === 'standard') {
-        return children;
-    }
-    return (jsx(Tooltip, { title: getLabelTooltipTitle(props), placement: "top", children: jsx("span", { style: { display: 'block', width: '100%' }, children: children }) }));
-};
 /**
  * Renders a form input label with an optional required asterisk.
  *
@@ -21,15 +9,7 @@ const wrapFieldWithLabelTooltipIfEnabled = (variant, props, children) => {
  * @param {boolean} [showLabel=false] - Whether to always show the label.
  * @returns {JSX.Element | false} The rendered label element or false if not shown.
  */
-const renderLabel = (variant, props, showLabel = false) => {
-    if (!(variant === 'standard' || showLabel))
-        return false;
-    const labelInner = (jsxs("span", { id: `${props.item.name}-label`, className: "formInputlabel", style: { fontSize: '12px' }, children: [props.item.label, ' ', props.item.required && (jsx("span", { "aria-hidden": "true", style: { color: 'var(--mui-palette-error-main, #B3261E)' }, children: "*" }))] }));
-    if (props.item.isLabelToolTipEnable) {
-        return (jsx(Tooltip, { title: getLabelTooltipTitle(props), placement: "top", children: jsx("span", { style: { display: 'inline-block', maxWidth: '100%' }, children: labelInner }) }));
-    }
-    return labelInner;
-};
+const renderLabel = (variant, props, showLabel = false) => (variant === 'standard' || showLabel) && (jsxs("span", { id: `${props.item.name}-label`, className: "formInputlabel", style: { fontSize: '12px' }, children: [props.item.label, ' ', props.item.required && (jsx("span", { "aria-hidden": "true", style: { color: 'var(--mui-palette-error-main, #B3261E)' }, children: "*" }))] }));
 /**
  * Formats a date string in "M/YYYY" or "MM/YYYY" format to "MM/01/YYYY".
  *
@@ -95,4 +75,4 @@ const extractDate = (inputDateString) => {
     return formattedDate;
 };
 
-export { extractDate, formatDateMonthAndYear, formatDayjsToCustomTime, getLabelTooltipTitle, parseCustomTime, renderLabel, wrapFieldWithLabelTooltipIfEnabled };
+export { extractDate, formatDateMonthAndYear, formatDayjsToCustomTime, parseCustomTime, renderLabel };

package/dist/utils/Interface/FormInterface.d.ts

@@ -3,6 +3,7 @@ import { SxProps } from '@mui/material';
 export interface OptionsProps {
     label: string | boolean | number;
     value: string | number;
+    disable?: boolean;
 }
 export interface TextFieldInputProps {
     autoComplete: 'new-password' | 'off';
@@ -40,7 +41,7 @@ export interface FormSectionPropsItem {
     customErrorMessage?: string | null;
     sx?: SxProps<Theme>;
     donotAllowSpace?: boolean;
-    onInputProps?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    onInputProps?: (e: React.FocusEvent<HTMLInputElement> | any) => void;
     fileType?: 'excel' | 'pdf' | 'all' | 'zip' | 'image' | 'document' | '' | string[];
     handleFileError?: (message: string) => void;
     onCloseMenu?: () => void;
@@ -81,8 +82,8 @@ export interface FormSectionPropsItem {
     labelField?: string;
     headerColor?: string;
     optionFontSize?: string;
-    /** When true, shows a tooltip with the full field label on standard labels and outlined field wrappers (and single-select value overflow). Multi-select selection/value tooltips are always shown. */
-    isLabelToolTipEnable?: boolean;
+    isTooltipEnable?: boolean;
+    doNotEnableMultiselectOrder?: boolean;
 }
 export type VariantProps = 'standard' | 'outlined' | '';
 export interface FormRenderProps {

package/dist/utils/index.esm.js

@@ -1,4 +1,4 @@
 export { calculateTotalArrayValueTotal, checkIsDateIsBefore, findMenuHierarchy, getDesiredDate, getFormattedDate, getInitials, getUsernameFromEmail, handleDownloadReactTableDataExcel, lightenColor } from './Constants/FunctionConstants.esm.js';
-export { extractDate, formatDateMonthAndYear, formatDayjsToCustomTime, getLabelTooltipTitle, parseCustomTime, renderLabel, wrapFieldWithLabelTooltipIfEnabled } from './Constants/FormConstants.esm.js';
+export { extractDate, formatDateMonthAndYear, formatDayjsToCustomTime, parseCustomTime, renderLabel } from './Constants/FormConstants.esm.js';
 
 // Utility Functions - Helper functions for form operations and data manipulation

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tp-react-elements",
-  "version": "1.2.0",
+  "version": "1.2.5",
   "private": false,
   "type": "module",
   "description": "React form components library built with React Hook Form and Yup",