tp-react-elements 1.1.6 → 1.1.9

package/dist/_virtual/index.esm12.js

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

package/dist/_virtual/index.esm14.js

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

package/dist/_virtual/index.esm5.js

@@ -1,3 +1,3 @@
-var DateRangePicker = {};
+var Calendar = {};
 
-export { DateRangePicker as __exports };
+export { Calendar 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 DateRangePicker = {};
 
-export { DefinedRange as __exports };
+export { DateRangePicker as __exports };

package/dist/components/Form/FormRender.esm.js

@@ -1,13 +1,5 @@
 import { jsx, Fragment } from 'react/jsx-runtime';
 import require$$0__default, { lazy, Suspense } from 'react';
-import FormCheckBox from '../FormComponents/FormCheckBox/FormCheckBox.esm.js';
-import FormCheckBoxGroup from '../FormComponents/FormCheckBoxGroup/FormCheckBoxGroup.esm.js';
-import FormNumberField from '../FormComponents/FormNumberField/FormNumberField.esm.js';
-import FormNumberFieldDecimal from '../FormComponents/FormNumberField/FormNumberFieldDecimal.esm.js';
-import FormRadioGroup from '../FormComponents/FormRadioGroup/FormRadioGroup.esm.js';
-import FormTextAreaField from '../FormComponents/FormTextAreaField/FormTextAreaField.esm.js';
-import FormTextField from '../FormComponents/FormTextField/FormTextField.esm.js';
-import PasswordField from '../FormComponents/PasswordField/PasswordField.esm.js';
 import SingleSelect from '../FormComponents/Select/SingleSelect.esm.js';
 import MultiSelectAutocomplete from '../FormComponents/Select/MultiSelectAutocomplete.esm.js';
 import SingleSelectNonAutoComplete from '../FormComponents/Select/SingleSelectNonAutoComplete.esm.js';
@@ -16,6 +8,14 @@ import FormTextFieldWithSelect from '../FormComponents/FormTextFieldWithSelect/F
 import DateRangePickerComponent from '../DateRangePicker/DateRangePicker.esm.js';
 import RichTextEditorWrapper from '../FormComponents/RichTextEditor/RichTextEditorWrapper.esm.js';
 import SingleSelectSearchApi from '../FormComponents/Select/SingleSelectSearchApi.esm.js';
+import FormTextAreaField from '../FormComponents/FormTextAreaField/FormTextAreaField.esm.js';
+import FormCheckBox from '../FormComponents/FormCheckBox/FormCheckBox.esm.js';
+import FormRadioGroup from '../FormComponents/FormRadioGroup/FormRadioGroup.esm.js';
+import FormCheckBoxGroup from '../FormComponents/FormCheckBoxGroup/FormCheckBoxGroup.esm.js';
+import FormNumberFieldDecimal from '../FormComponents/FormNumberField/FormNumberFieldDecimal.esm.js';
+import FormNumberField from '../FormComponents/FormNumberField/FormNumberField.esm.js';
+import PasswordField from '../FormComponents/PasswordField/PasswordField.esm.js';
+import FormTextField from '../FormComponents/FormTextField/FormTextField.esm.js';
 
 // Lazy-loaded heavy components
 // const RichTextEditorWrapper = lazy(() =>

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

@@ -87,6 +87,7 @@ const FormRenderFileUpload = ({ props, variant, }) => {
                             console.log(props.item?.name, ':props.item?.name');
                             props.setValue(props.item?.name, file);
                             props.setValue(props.item?.name + 'Name', fileName);
+                            props.clearErrors(props.item?.name);
                             props.item.onChangeSetFileFn &&
                                 props.item.onChangeSetFileFn(file);
                         }, sx: { width: '100%' } })] }), jsx(FormBottomField, { ...props })] }));

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

@@ -97,6 +97,7 @@ const FormRenderMultiFileUpload = ({ props, variant, }) => {
                             const fileArray = Array.from(file);
                             props.setValue(props.item?.name, fileName);
                             props.setValue(props.item?.name + 'File', fileArray);
+                            props.clearErrors(props.item?.name);
                         }, sx: { width: '100%' } })] }), jsx(FormBottomField, { ...props })] }));
 };
 

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

@@ -158,6 +158,7 @@ const MultiFileWithPreview = ({ props, variant, }) => {
             .join(',');
         props.setValue(props.item.name, combinedFileNames);
         props.setValue(props.item.name + 'File', combinedFiles);
+        props.clearErrors(props.item.name);
         setSelectedFiles(combinedFiles);
         setCurrentFileIndex(combinedFiles.length - fileArray.length); // move preview to new
         props.item.onChangeSetFileFn?.(combinedFiles);

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

@@ -1,9 +1,7 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { Box, TextField, Tooltip } from '@mui/material';
-import Checkbox from '@mui/material/Checkbox';
+import { Box, TextField, FormControlLabel, Checkbox, Tooltip } from '@mui/material';
 import FormControl from '@mui/material/FormControl';
 import InputLabel from '@mui/material/InputLabel';
-import ListItemText from '@mui/material/ListItemText';
 import MenuItem from '@mui/material/MenuItem';
 import OutlinedInput from '@mui/material/OutlinedInput';
 import Select from '@mui/material/Select';
@@ -13,8 +11,8 @@ import FormBottomField from '../FormBottomField/FormBottomField.esm.js';
 import 'dayjs';
 import { renderLabel } from '../../../utils/Constants/FormConstants.esm.js';
 
-const ITEM_HEIGHT = 48;
-const ITEM_PADDING_TOP = 3;
+const ITEM_HEIGHT = 36;
+const ITEM_PADDING_TOP = 2;
 const extractValuesToArray = (inputString) => {
     if (!inputString)
         return [];
@@ -76,7 +74,7 @@ function MultiSelectV1({ props, variant, }) {
                         disableAutoFocusItem: true,
                     }, children: [jsx(Box, { sx: { width: '100%', position: 'sticky', top: 0, padding: '7px', zIndex: 2, background: '#fff' }, children: jsx(TextField, { inputRef: textfieldRef, fullWidth: true, size: "small", placeholder: "Search...", value: searchText, onChange: (e) => setSearchText(e.target.value), 
                                 // Prevent space key from closing the select while typing in search
-                                onKeyDown: (e) => e.key !== 'Escape' && e.stopPropagation() }) }), jsxs(MenuItem, { disabled: filterOptions.length === 0, sx: { py: 0.5 }, children: [jsx(Checkbox, { size: "small", checked: selectAll, onChange: () => {
+                                onKeyDown: (e) => e.key !== 'Escape' && e.stopPropagation() }) }), jsx(MenuItem, { disabled: filterOptions.length === 0, sx: { py: 0, px: 2 }, children: jsx(FormControlLabel, { control: jsx(Checkbox, { id: `${props.item.name}-select-all`, size: "small", checked: selectAll, sx: { p: 1 }, onChange: () => {
                                         const currentValues = fieldValue?.split(',').filter(Boolean) || [];
                                         const filteredIds = filterOptions.map((opt) => String(opt.value));
                                         if (selectAll) {
@@ -85,22 +83,25 @@ function MultiSelectV1({ props, variant, }) {
                                         else {
                                             props.setValue(props.item.name, [...new Set([...currentValues, ...filteredIds])].join(','));
                                         }
-                                    } }), jsx(ListItemText, { primary: "Select All", primaryTypographyProps: { fontSize: '13px' } })] }), filterOptions.length !== 0 ? (filterOptions.map((option) => {
+                                    } }), label: "Select All", sx: {
+                                    width: '100%',
+                                    margin: 0,
+                                    '& .MuiFormControlLabel-label': { fontSize: '13px' }
+                                } }) }), filterOptions.length !== 0 ? (filterOptions.map((option) => {
                             const selectedArray = fieldValue ? extractValuesToArray(fieldValue) : [];
                             const isChecked = selectedArray.includes(String(option.value));
-                            return (jsxs(MenuItem, { value: `${option.value}`, sx: {
+                            return (jsx(MenuItem, { value: `${option.value}`, sx: {
                                     whiteSpace: 'normal',
                                     wordBreak: 'break-all',
                                     alignItems: 'flex-start',
-                                    py: 1,
-                                }, children: [jsx(Checkbox, { checked: isChecked, size: "small", sx: { mt: -0.5, mr: 1 } }), jsx(ListItemText, { primary: option.label, primaryTypographyProps: {
-                                            fontSize: '13px',
-                                            style: {
-                                                whiteSpace: 'normal',
-                                                wordBreak: 'break-all',
-                                                lineHeight: '1.4'
-                                            }
-                                        } })] }, option.value));
+                                    py: 0,
+                                    px: 2,
+                                    minHeight: ITEM_HEIGHT,
+                                }, children: jsx(FormControlLabel, { control: jsx(Checkbox, { checked: isChecked, size: "small", sx: { p: 1 } }), label: option.label, sx: {
+                                        width: '100%',
+                                        margin: 0,
+                                        '& .MuiFormControlLabel-label': { fontSize: '13px' }
+                                    } }) }, option.value));
                         })) : (jsx(MenuItem, { disabled: true, children: "No data Found" }))] }), jsx(FormBottomField, { ...props })] }) }, props.item.name));
 }
 

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

@@ -1,39 +1,25 @@
-export { default as FormNumberField } from './FormNumberField/FormNumberField.esm.js';
-export { default as FormNumberFieldDecimal } from './FormNumberField/FormNumberFieldDecimal.esm.js';
-export { default as FormTextAreaField } from './FormTextAreaField/FormTextAreaField.esm.js';
-export { default as FormTextField } from './FormTextField/FormTextField.esm.js';
-export { default as PasswordField } from './PasswordField/PasswordField.esm.js';
-export { default as FormCheckBox } from './FormCheckBox/FormCheckBox.esm.js';
 export { default as SingleSelect } from './Select/SingleSelect.esm.js';
 export { default as SingleSelectNonAutoComplete } from './Select/SingleSelectNonAutoComplete.esm.js';
 export { default as SingleSelectSearchApi } from './Select/SingleSelectSearchApi.esm.js';
 export { default as MultiSelectV1 } from './Select/MultiSelectv1.esm.js';
 export { default as MultiSelectTable } from './Select/MultiSelectTable.esm.js';
+export { default as DatepickerWrapperV2 } from './DatePicker/DatepickerWrapperV2.esm.js';
+export { default as FormBottomField } from './FormBottomField/FormBottomField.esm.js';
+export { default as FormCheckBox } from './FormCheckBox/FormCheckBox.esm.js';
 export { default as FormCheckBoxGroup } from './FormCheckBoxGroup/FormCheckBoxGroup.esm.js';
+export { default as FormErrorField } from './FormErrorField/FormErrorField.esm.js';
+export { default as FormNumberField } from './FormNumberField/FormNumberField.esm.js';
+export { default as FormNumberFieldDecimal } from './FormNumberField/FormNumberFieldDecimal.esm.js';
 export { default as FormRadioGroup } from './FormRadioGroup/FormRadioGroup.esm.js';
-export { default as DatepickerWrapperV2 } from './DatePicker/DatepickerWrapperV2.esm.js';
-export { default as MonthPicker } from './DatePicker/MonthPicker.esm.js';
-export { default as Monthpickerrender } from './DatePicker/Monthpickerrender.esm.js';
-export { default as YearPickerField } from './YearPickerField/YearPickerField.esm.js';
-export { default as TimePicker } from './TimePicker/TimePicker.esm.js';
 export { default as FormRenderFileUpload } from './FileUpload/FormRenderFileUpload.esm.js';
 export { default as FormRenderMultiFileUpload } from './FileUpload/FormRenderMultiFileUpload.esm.js';
-import 'react/jsx-runtime';
-import '@mui/material';
-import 'react';
-import 'react-hook-form';
-import 'dayjs';
-export { default as FormBottomField } from './FormBottomField/FormBottomField.esm.js';
-import '@mui/icons-material/Visibility';
-import '@mui/icons-material/Close';
-import '@mui/icons-material/NavigateBefore';
-import '@mui/icons-material/NavigateNext';
-import '@mui/icons-material/Delete';
-import '@mui/icons-material/UploadFile';
-import '@mui/icons-material/PictureAsPdf';
-import '@mui/icons-material/TableChart';
-import '@mui/icons-material/Description';
-export { default as FormErrorField } from './FormErrorField/FormErrorField.esm.js';
+export { default as FormTextAreaField } from './FormTextAreaField/FormTextAreaField.esm.js';
+export { default as FormTextField } from './FormTextField/FormTextField.esm.js';
 export { default as HelperText } from './HelperText/HelperText.esm.js';
+export { default as MonthPicker } from './DatePicker/MonthPicker.esm.js';
+export { default as Monthpickerrender } from './DatePicker/Monthpickerrender.esm.js';
+export { default as PasswordField } from './PasswordField/PasswordField.esm.js';
 export { default as RichTextEditor } from './RichTextEditor/RichTextEditor.esm.js';
 export { default as RichTextEditorWrapper } from './RichTextEditor/RichTextEditorWrapper.esm.js';
+export { default as TimePicker } from './TimePicker/TimePicker.esm.js';
+export { default as YearPickerField } from './YearPickerField/YearPickerField.esm.js';

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

@@ -1,24 +1,14 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { Box, TextField, Tooltip } from '@mui/material';
+import { Box, TextField, FormControlLabel, Tooltip } from '@mui/material';
 import Checkbox from '@mui/material/Checkbox';
 import FormControl from '@mui/material/FormControl';
-import ListItemText from '@mui/material/ListItemText';
 import MenuItem from '@mui/material/MenuItem';
 import Select from '@mui/material/Select';
 import * as require$$0 from 'react';
 import { useState } from 'react';
 
-const ITEM_HEIGHT = 48;
-const ITEM_PADDING_TOP = 3;
-const MenuProps = {
-    PaperProps: {
-        style: {
-            maxHeight: ITEM_HEIGHT * 5.5 + ITEM_PADDING_TOP,
-        },
-    },
-    autoFocus: false,
-    disableAutoFocusItem: true,
-};
+const ITEM_HEIGHT = 36;
+const ITEM_PADDING_TOP = 2;
 const extractValuesToArray = (inputString) => {
     const valuesArray = inputString?.split(',');
     const trimmedArray = valuesArray?.map((value) => value.trim());
@@ -30,9 +20,8 @@ function MultiSelectFieldComponent({ value, options, onChangeFn, disable = false
     const [filterOptions, setFilterOptions] = useState(options);
     const [selectAll, setSelectAll] = useState(false);
     const textfieldRef = require$$0.useRef(null);
+    const containerRef = require$$0.useRef(null);
     const fieldValue = value;
-    const mappedIds = filterOptions.map((item) => item.value);
-    const filterIds = filterOptions.map((item) => item.value);
     require$$0.useEffect(() => {
         if (searchText !== '') {
             setFilterOptions(options.filter((item) => item.label.toLowerCase().includes(searchText.toLowerCase())));
@@ -41,17 +30,18 @@ function MultiSelectFieldComponent({ value, options, onChangeFn, disable = false
             setFilterOptions(options);
         }
     }, [options, searchText]);
-    function hasExactMatch(array, value) {
-        return array.some((item) => item === value);
-    }
     require$$0.useEffect(() => {
-        if (fieldValue?.split(',').length !== filterOptions.length) {
+        const values = fieldValue ? fieldValue.split(',').filter(Boolean) : [];
+        const filterIdStrings = filterOptions.map((item) => String(item.value));
+        if (values.length === 0 || filterOptions.length === 0) {
             setSelectAll(false);
+            return;
+        }
+        if (values.every((val) => filterIdStrings.includes(String(val)))) {
+            setSelectAll(true);
         }
         else {
-            if (fieldValue?.split(',').every((value) => hasExactMatch(filterIds, value))) {
-                setSelectAll(true);
-            }
+            setSelectAll(false);
         }
     }, [filterOptions, fieldValue]);
     const handleChange = (event) => {
@@ -61,7 +51,7 @@ function MultiSelectFieldComponent({ value, options, onChangeFn, disable = false
     };
     const selectedOptions = options.filter((item) => fieldValue?.split(',').some((value) => value === item.value));
     const selectedValues = selectedOptions.map((item) => item.label).join(' , ');
-    return (jsx(Box, { children: jsx(FormControl, { fullWidth: true, sx: {
+    return (jsx(Box, { children: jsx(FormControl, { fullWidth: true, ref: containerRef, sx: {
                 '& .css-kichxs-MuiFormLabel-root-MuiInputLabel-root,.css-1holvmy': {
                     top: '-10px',
                 },
@@ -77,7 +67,24 @@ function MultiSelectFieldComponent({ value, options, onChangeFn, disable = false
                     }, 0);
                 }, onClose: () => {
                     setSearchText('');
-                }, renderValue: () => (jsx(Tooltip, { title: selectedValues, children: jsx("span", { children: selectedOptions.length > 3 ? `${selectedOptions.length} Selected` : selectedValues }) })), MenuProps: MenuProps, autoFocus: false, children: [jsx(Box, { sx: {
+                }, renderValue: () => (jsx(Tooltip, { title: selectedValues, children: jsx("span", { children: selectedOptions.length > 3 ? `${selectedOptions.length} Selected` : selectedValues }) })), MenuProps: {
+                    PaperProps: {
+                        style: {
+                            maxHeight: ITEM_HEIGHT * 5.5 + ITEM_PADDING_TOP,
+                            width: containerRef.current ? containerRef.current.clientWidth : 250,
+                        },
+                    },
+                    autoFocus: false,
+                    disableAutoFocusItem: true,
+                    anchorOrigin: {
+                        vertical: 'bottom',
+                        horizontal: 'left',
+                    },
+                    transformOrigin: {
+                        vertical: 'top',
+                        horizontal: 'left',
+                    },
+                }, autoFocus: false, children: [jsx(Box, { sx: {
                             width: '100%',
                             position: 'sticky',
                             top: '0px',
@@ -94,27 +101,29 @@ function MultiSelectFieldComponent({ value, options, onChangeFn, disable = false
                                 if (e.key !== 'Escape') {
                                     e.stopPropagation();
                                 }
-                            } }) }), jsxs(MenuItem, { disabled: filterOptions.length === 0, sx: { zIndex: 0, fontSize: '5px !important' }, children: [jsx(Checkbox, { size: "small", checked: selectAll, onChange: () => {
-                                    setSelectAll(!selectAll);
-                                    const selectChanged = !selectAll;
-                                    if (!selectChanged) {
-                                        onChangeFn('');
+                            } }) }), jsx(MenuItem, { disabled: filterOptions.length === 0, sx: { py: 0, px: 2 }, children: jsx(FormControlLabel, { control: jsx(Checkbox, { id: `${value}-select-all`, size: "small", checked: selectAll, sx: { p: 1 }, onChange: () => {
+                                    const currentValues = fieldValue?.split(',').filter(Boolean) || [];
+                                    const filteredIds = filterOptions.map((opt) => String(opt.value));
+                                    if (selectAll) {
+                                        onChangeFn(currentValues.filter((v) => !filteredIds.includes(v)).join(','));
                                     }
                                     else {
-                                        const allDataMapped = mappedIds.join(',');
-                                        onChangeFn(allDataMapped);
+                                        onChangeFn([...new Set([...currentValues, ...filteredIds])].join(','));
                                     }
-                                } }), jsx(ListItemText, { primary: 'Select All', sx: {
-                                    fontSize: '5px !important',
-                                    '& span': {
-                                        fontSize: '12px !important',
-                                    },
-                                } })] }), filterOptions.length !== 0 ? (filterOptions.map((option) => (jsxs(MenuItem, { value: `${option.value}`, sx: { zIndex: 0, fontSize: '11px !important' }, children: [jsx(Checkbox, { checked: fieldValue?.split(',').some((value) => value === option.value), size: "small" }), jsx(ListItemText, { primary: option.label, sx: {
-                                    fontSize: '5px !important',
-                                    '& span': {
-                                        fontSize: '12px !important',
-                                    },
-                                } })] }, option.value)))) : (jsx(MenuItem, { disabled: true, value: 'NA', children: "No data Found" }, 'NA'))] }) }) }));
+                                } }), label: "Select All", sx: {
+                                width: '100%',
+                                margin: 0,
+                                '& .MuiFormControlLabel-label': { fontSize: '13px' }
+                            } }) }), filterOptions.length !== 0 ? (filterOptions.map((option) => (jsx(MenuItem, { value: `${option.value}`, sx: {
+                            zIndex: 0,
+                            py: 0,
+                            px: 2,
+                            minHeight: ITEM_HEIGHT
+                        }, children: jsx(FormControlLabel, { control: jsx(Checkbox, { checked: fieldValue?.split(',').some((value) => value === String(option.value)), size: "small", sx: { p: 1 } }), label: option.label, sx: {
+                                width: '100%',
+                                margin: 0,
+                                '& .MuiFormControlLabel-label': { fontSize: '13px' }
+                            } }) }, option.value)))) : (jsx(MenuItem, { disabled: true, value: 'NA', children: "No data Found" }, 'NA'))] }) }) }));
 }
 
 export { MultiSelectFieldComponent as default };

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.esm5.js';
 import require$$0__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/DateRangePicker/index.esm.js

@@ -1,4 +1,4 @@
-import { __exports as DateRangePicker } from '../../../../../_virtual/index.esm5.js';
+import { __exports as DateRangePicker } from '../../../../../_virtual/index.esm7.js';
 import require$$0__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/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 require$$0__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 import { __require as requireStyles } from '../../styles.esm.js';

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

@@ -1,4 +1,4 @@
-import { __exports as InputRangeField } from '../../../../../_virtual/index.esm14.js';
+import { __exports as InputRangeField } from '../../../../../_virtual/index.esm12.js';
 import require$$0__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 

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

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

package/package.json

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