npm - tp-react-elements - Versions diffs - 1.2.0 → 1.2.3 - Mend

tp-react-elements 1.2.0 → 1.2.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (40) hide show

package/dist/_virtual/index.esm11.js CHANGED Viewed

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

package/dist/_virtual/index.esm12.js CHANGED Viewed

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

package/dist/_virtual/index.esm13.js CHANGED Viewed

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

package/dist/_virtual/index.esm14.js CHANGED Viewed

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

package/dist/_virtual/index.esm4.js CHANGED Viewed

@@ -1,3 +1,3 @@
-var DateRangePicker = {};
+var Calendar = {};
-export { DateRangePicker as __exports };
+export { Calendar as __exports };

package/dist/_virtual/index.esm5.js CHANGED Viewed

@@ -1,3 +1,3 @@
-var DateRange = {};
+var DateRangePicker = {};
-export { DateRange as __exports };
+export { DateRangePicker as __exports };

package/dist/_virtual/index.esm7.js CHANGED Viewed

@@ -1,3 +1,3 @@
-var Calendar = {};
+var DateRange = {};
-export { Calendar as __exports };
+export { DateRange as __exports };

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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);
@@ -44,7 +44,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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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, 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 CHANGED Viewed

@@ -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;
@@ -337,7 +337,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 +356,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 CHANGED Viewed

@@ -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,7 +56,7 @@ 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: () => {
+    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: () => {
                         setSavedSortValue(fieldValue);
                         setTimeout(() => textfieldRef.current?.focus(), 0);
                     }, onClose: () => {
@@ -118,7 +118,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 CHANGED Viewed

@@ -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,49 @@ 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, 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 CHANGED Viewed

@@ -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,7 +17,7 @@ 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`,
@@ -26,7 +26,7 @@ const SingleSelectNonAutoComplete = ({ props, variant, }) => {
                 }, 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));
+                    }, 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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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/node_modules/react-date-range/dist/components/Calendar/index.esm.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { __exports as Calendar } from '../../../../../_virtual/index.esm7.js';
+import { __exports as Calendar } from '../../../../../_virtual/index.esm4.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/node_modules/react-date-range/dist/components/DateInput/index.esm.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { __exports as DateInput } from '../../../../../_virtual/index.esm12.js';
+import { __exports as DateInput } from '../../../../../_virtual/index.esm11.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/DateRange/index.esm.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { __exports as DateRange } from '../../../../../_virtual/index.esm5.js';
+import { __exports as DateRange } from '../../../../../_virtual/index.esm7.js';
 import React__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 import { __require as requireCalendar } from '../Calendar/index.esm.js';

package/dist/node_modules/react-date-range/dist/components/DateRangePicker/index.esm.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { __exports as DateRangePicker } from '../../../../../_virtual/index.esm4.js';
+import { __exports as DateRangePicker } from '../../../../../_virtual/index.esm5.js';
 import React__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 import { __require as requireDateRange } from '../DateRange/index.esm.js';

package/dist/node_modules/react-date-range/dist/components/DayCell/index.esm.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { __exports as DayCell } from '../../../../../_virtual/index.esm11.js';
+import { __exports as DayCell } from '../../../../../_virtual/index.esm13.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 CHANGED Viewed

@@ -1,4 +1,4 @@
-import { __exports as InputRangeField } from '../../../../../_virtual/index.esm13.js';
+import { __exports as InputRangeField } from '../../../../../_virtual/index.esm14.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 CHANGED Viewed

@@ -1,4 +1,4 @@
-import { __exports as Month } from '../../../../../_virtual/index.esm14.js';
+import { __exports as Month } from '../../../../../_virtual/index.esm12.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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -81,8 +81,7 @@ 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;
 }
 export type VariantProps = 'standard' | 'outlined' | '';
 export interface FormRenderProps {

package/dist/utils/index.esm.js CHANGED Viewed

@@ -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 CHANGED Viewed

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