tp-react-elements 1.1.20 → 1.2.3

package/dist/_virtual/index.esm10.js

@@ -1,3 +1,3 @@
-var accessibility = {};
+var propTypes = {exports: {}};
 
-export { accessibility as __exports };
+export { propTypes as __module };

package/dist/_virtual/index.esm11.js

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

package/dist/_virtual/index.esm13.js

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

package/dist/_virtual/index.esm4.js

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

package/dist/_virtual/index.esm5.js

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

package/dist/_virtual/index.esm6.js

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

package/dist/_virtual/index.esm7.js

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

package/dist/_virtual/index.esm9.js

@@ -1,3 +1,3 @@
-var propTypes = {exports: {}};
+var accessibility = {};
 
-export { propTypes as __module };
+export { accessibility as __exports };

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

@@ -94,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/FormTextAreaField/FormTextAreaField.esm.js

@@ -1,5 +1,6 @@
 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';
@@ -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), 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,5 +1,6 @@
 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';
@@ -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), 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/Select/MultiSelectv1.esm.js

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

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { createElement } from 'react';
-import { Autocomplete, TextField } 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';
@@ -14,49 +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), 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,
-                        } })) }), 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/node_modules/prop-types/index.esm.js

@@ -1,4 +1,4 @@
-import { __module as propTypes } from '../../_virtual/index.esm9.js';
+import { __module as propTypes } from '../../_virtual/index.esm10.js';
 import { __require as requireReactIs } from './node_modules/react-is/index.esm.js';
 import { __require as requireFactoryWithTypeCheckers } from './factoryWithTypeCheckers.esm.js';
 import { __require as requireFactoryWithThrowingShims } from './factoryWithThrowingShims.esm.js';

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

@@ -1,4 +1,4 @@
-import { __exports as accessibility } from '../../../../_virtual/index.esm10.js';
+import { __exports as accessibility } from '../../../../_virtual/index.esm9.js';
 import { __require as requirePropTypes } from '../../../prop-types/index.esm.js';
 
 var hasRequiredAccessibility;

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

@@ -1,4 +1,4 @@
-import { __exports as Calendar } from '../../../../../_virtual/index.esm6.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

@@ -1,4 +1,4 @@
-import { __exports as DateInput } from '../../../../../_virtual/index.esm13.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

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

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

@@ -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/DefinedRange/index.esm.js

@@ -1,4 +1,4 @@
-import { __exports as DefinedRange } from '../../../../../_virtual/index.esm7.js';
+import { __exports as DefinedRange } from '../../../../../_virtual/index.esm6.js';
 import React__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 import { __require as requireStyles } from '../../styles.esm.js';

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

@@ -81,6 +81,7 @@ export interface FormSectionPropsItem {
     labelField?: string;
     headerColor?: string;
     optionFontSize?: string;
+    isTooltipEnable?: boolean;
 }
 export type VariantProps = 'standard' | 'outlined' | '';
 export interface FormRenderProps {

package/package.json

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