tp-react-elements 1.1.8 → 1.1.11

package/dist/_virtual/index.esm12.js

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

package/dist/_virtual/index.esm13.js

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

package/dist/_virtual/index.esm14.js

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

package/dist/_virtual/index.esm4.js

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

package/dist/_virtual/index.esm5.js

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

package/dist/_virtual/index.esm6.js

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

package/dist/_virtual/index.esm7.js

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

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

@@ -1,6 +1,5 @@
 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';
@@ -13,8 +12,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 +75,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 }, onMouseDown: (e) => e.stopPropagation(), onChange: (e) => {
                                         const currentValues = fieldValue?.split(',').filter(Boolean) || [];
                                         const filteredIds = filterOptions.map((opt) => String(opt.value));
                                         if (selectAll) {
@@ -85,20 +84,27 @@ 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,
+                                    // Remove pointerEvents: 'none' to allow label to trigger checkbox
+                                    '& .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: {
                                     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: {
+                                    alignItems: 'center',
+                                    py: 0.5,
+                                    px: 2,
+                                    minHeight: ITEM_HEIGHT,
+                                }, children: [jsx(Checkbox, { checked: isChecked, size: "small", sx: { p: 1, mr: 1, pointerEvents: 'none' } }), jsx(ListItemText, { primary: option.label, primaryTypographyProps: {
                                             fontSize: '13px',
-                                            style: {
+                                            sx: {
                                                 whiteSpace: 'normal',
                                                 wordBreak: 'break-all',
-                                                lineHeight: '1.4'
+                                                lineHeight: '1.2'
                                             }
                                         } })] }, option.value));
                         })) : (jsx(MenuItem, { disabled: true, children: "No data Found" }))] }), jsx(FormBottomField, { ...props })] }) }, props.item.name));

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

@@ -1,5 +1,5 @@
 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';
@@ -8,17 +8,8 @@ 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 +21,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 +31,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 +52,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 +68,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,26 +102,31 @@ 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.5, px: 2 }, onMouseDown: (e) => e.stopPropagation(), children: jsx(FormControlLabel, { control: jsx(Checkbox, { id: `${value}-select-all`, size: "small", checked: selectAll, 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(','));
+                                    }
+                                } }), label: "Select All", sx: {
+                                margin: 0,
+                                width: '100%',
+                                '& .MuiFormControlLabel-label': { fontSize: '13px' }
+                            } }) }), filterOptions.length !== 0 ? (filterOptions.map((option) => (jsxs(MenuItem, { value: `${option.value}`, sx: {
+                            zIndex: 0,
+                            py: 0,
+                            px: 2,
+                            minHeight: ITEM_HEIGHT
+                        }, children: [jsx(Checkbox, { checked: fieldValue?.split(',').some((val) => String(val) === String(option.value)), size: "small", sx: { p: 1, mr: 1, pointerEvents: 'none' } }), jsx(ListItemText, { primary: option.label, primaryTypographyProps: {
+                                    fontSize: '13px',
+                                    sx: {
+                                        whiteSpace: 'normal',
+                                        wordBreak: 'break-all',
+                                        lineHeight: '1.2'
                                     }
-                                } }), 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'))] }) }) }));
 }
 

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

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

@@ -1,4 +1,4 @@
-import { __exports as DateInput } from '../../../../../_virtual/index.esm13.js';
+import { __exports as DateInput } from '../../../../../_virtual/index.esm12.js';
 import require$$0__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.esm4.js';
+import { __exports as DateRange } from '../../../../../_virtual/index.esm7.js';
 import require$$0__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.esm7.js';
+import { __exports as DateRangePicker } from '../../../../../_virtual/index.esm4.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.esm6.js';
+import { __exports as DefinedRange } from '../../../../../_virtual/index.esm5.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.esm12.js';
+import { __exports as InputRangeField } from '../../../../../_virtual/index.esm14.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.esm14.js';
+import { __exports as Month } from '../../../../../_virtual/index.esm13.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.8",
+  "version": "1.1.11",
   "private": false,
   "type": "module",
   "description": "React form components library built with React Hook Form and Yup",
@@ -72,6 +72,9 @@
     "publish:prepare": "npm run build:lib && npm run type-check",
     "publish:npm": "npm publish",
     "publish:beta": "npm publish --tag beta",
+    "publish:patch": "npm version patch --no-git-tag-version && npm publish",
+    "publish:minor": "npm version minor --no-git-tag-version && npm publish",
+    "publish:major": "npm version major --no-git-tag-version && npm publish",
     "publish:auto": "npm run publish:prepare && npm publish",
     "install-peers": "install-tp-form-deps",
     "package-build": "rollup -c --bundleConfigAsCjs",