tp-react-elements 1.1.2 → 1.1.4

package/dist/_virtual/index.esm13.js

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

package/dist/_virtual/index.esm14.js

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

package/dist/_virtual/index.esm4.js

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

package/dist/_virtual/index.esm5.js

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

package/dist/_virtual/index.esm6.js

@@ -1,3 +1,3 @@
-var Calendar = {};
+var DateRange = {};
 
-export { Calendar as __exports };
+export { DateRange 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/FormComponents/Select/MultiSelectv1.esm.js

@@ -7,7 +7,7 @@ import ListItemText from '@mui/material/ListItemText';
 import MenuItem from '@mui/material/MenuItem';
 import OutlinedInput from '@mui/material/OutlinedInput';
 import Select from '@mui/material/Select';
-import require$$0__default, { useState, useMemo } from 'react';
+import require$$0__default, { useState, useRef, useMemo } from 'react';
 import { useWatch } from 'react-hook-form';
 import FormBottomField from '../FormBottomField/FormBottomField.esm.js';
 import 'dayjs';
@@ -15,45 +15,25 @@ import { renderLabel } from '../../../utils/Constants/FormConstants.esm.js';
 
 const ITEM_HEIGHT = 48;
 const ITEM_PADDING_TOP = 3;
-const MenuProps = {
-    PaperProps: {
-        style: {
-            maxHeight: ITEM_HEIGHT * 5.5 + ITEM_PADDING_TOP,
-            // width: 250,
-        },
-    },
-    autoFocus: false,
-    disableAutoFocusItem: true,
-};
-// const useStyles = makeStyles(() => ({
-//   option: {
-//     fontSize: "10px", // Adjust the font size as needed
-//   },
-//   option2: {
-//     fontSize: "11px",
-//   },
-// }));
 const extractValuesToArray = (inputString) => {
     if (!inputString)
         return [];
     return inputString.split(',').map((value) => value.trim()).filter(Boolean);
 };
 function MultiSelectV1({ props, variant, }) {
-    const [personName, setPersonName] = require$$0__default.useState(props.getValues(props.item.name) ? extractValuesToArray(props.getValues(props.item.name)) : []);
     const [searchText, setSearchText] = useState('');
     const options = props.item?.options || [];
     const [filterOptions, setFilterOptions] = useState(props.item.options || []);
-    const textfieldRef = require$$0__default.useRef(null);
+    const textfieldRef = useRef(null);
+    // Ref to capture the width of the Select container
+    const containerRef = useRef(null);
     const fieldValue = useWatch({ control: props.control, name: props.item.name });
-    // Calculate selectAll state based on actual selection
     const selectAll = useMemo(() => {
         if (!fieldValue || filterOptions.length === 0)
             return false;
         const selectedValues = fieldValue.split(',').filter(Boolean);
         return filterOptions.every((option) => selectedValues.includes(String(option.value)));
     }, [fieldValue, filterOptions]);
-    useMemo(() => filterOptions.map((item) => item.value), [filterOptions]);
-    useMemo(() => filterOptions.map((item) => item.value), [filterOptions]);
     require$$0__default.useEffect(() => {
         if (searchText !== '') {
             setFilterOptions(options.filter((item) => item.label.toLowerCase().includes(searchText.toLowerCase())));
@@ -63,90 +43,65 @@ function MultiSelectV1({ props, variant, }) {
         }
     }, [options, searchText]);
     const handleChange = (event) => {
-        const { target: { value }, } = event;
-        setPersonName(typeof value === 'string' ? value?.split(',') : value);
-        props.setValue(props.item.name, (typeof value === 'string' ? value?.split(',') : value).join(','));
+        const { target: { value } } = event;
+        const finalValue = typeof value === 'string' ? value.split(',') : value;
+        props.setValue(props.item.name, finalValue.join(','));
     };
     const selectedOptions = useMemo(() => options.filter((item) => fieldValue?.split(',').some((value) => value === item.value)), [options, fieldValue]);
-    const selectedValues = selectedOptions.map((item) => item.label).join(' , ');
-    const isError = !!props.errors?.[props.item.name];
-    const isShowBorderError = isError;
-    return (jsx(Box, { children: jsxs(FormControl, { fullWidth: true, sx: {
-                '& .css-kichxs-MuiFormLabel-root-MuiInputLabel-root,.css-1holvmy': {
-                    top: '-10px',
-                },
-                '& .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, sx: {
-                        '& .MuiTypography-root': {
-                            fontSize: '5px !important',
-                        },
-                    }, error: isShowBorderError, disabled: props.item.disable, value: fieldValue ? extractValuesToArray(fieldValue) : [], onChange: handleChange, inputProps: {
-                        'aria-labelledby': `${props.item.name}-label`,
-                        'aria-describedby': `${props.item.name}-helper ${props.item.name}-error`,
-                        'aria-required': props.item.required ? true : undefined,
-                    }, onOpen: () => {
-                        setTimeout(() => {
-                            if (textfieldRef.current) {
-                                textfieldRef.current?.focus();
-                            }
-                        }, 0);
-                    }, onClose: () => {
+    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 ? ' *' : ''] })), 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: () => setTimeout(() => textfieldRef.current?.focus(), 0), onClose: () => {
                         setSearchText('');
                         props?.item?.onCloseMenu && props?.item?.onCloseMenu();
-                    }, input: jsx(OutlinedInput, { label: variant !== 'standard' ? props.item.label : '' }), renderValue: (_selected) => (jsx(Tooltip, { title: selectedValues, children: (props.item.placeholder && selectedOptions.length === 0) ? jsx("span", { style: { color: '#0009' }, children: props.item.placeholder }) : jsx("span", { children: selectedOptions.length > (props.item.multiSelectLabelLength || 3)
+                    }, input: jsx(OutlinedInput, { label: variant !== 'standard' ? props.item.label : '' }), renderValue: () => (jsx(Tooltip, { title: selectedValuesString, children: jsx("span", { style: { display: 'block', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }, children: props.item.placeholder && selectedOptions.length === 0 ? (jsx("span", { style: { color: '#0009' }, children: props.item.placeholder })) : (selectedOptions.length > (props.item.multiSelectLabelLength || 3)
                                 ? `${selectedOptions.length} Selected`
-                                : selectedValues }) })), MenuProps: MenuProps, autoFocus: false, children: [jsx(Box, { sx: {
-                                width: '100%',
-                                position: 'sticky',
-                                top: '0px',
-                                padding: '7px',
-                                zIndex: 2,
-                                height: '33px',
-                                background: '#fff',
-                                display: options.length === 0 ? 'none' : undefined,
-                            }, children: jsx(TextField, { inputRef: textfieldRef, autoFocus: true, value: searchText, sx: {
-                                    width: '100%',
-                                }, placeholder: "Search...", onChange: (e) => {
-                                    setSearchText(e.target.value);
-                                }, onKeyDown: (e) => {
-                                    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: () => {
+                                : selectedValuesString) }) })), MenuProps: {
+                        PaperProps: {
+                            style: {
+                                maxHeight: ITEM_HEIGHT * 5.5 + ITEM_PADDING_TOP,
+                                // Match the container width dynamically
+                                width: containerRef.current ? containerRef.current.clientWidth : 250,
+                            },
+                        },
+                        // Using 'as const' fixes the TS2322 string incompatibility error
+                        anchorOrigin: {
+                            vertical: 'bottom',
+                            horizontal: 'left',
+                        },
+                        transformOrigin: {
+                            vertical: 'top',
+                            horizontal: 'left',
+                        },
+                        autoFocus: false,
+                        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: () => {
+                                        const currentValues = fieldValue?.split(',').filter(Boolean) || [];
+                                        const filteredIds = filterOptions.map((opt) => String(opt.value));
                                         if (selectAll) {
-                                            // Deselect all filtered options
-                                            const currentValues = fieldValue?.split(',').filter(Boolean) || [];
-                                            const filteredValues = filterOptions.map((opt) => String(opt.value));
-                                            const newValues = currentValues.filter((v) => !filteredValues.includes(v));
-                                            props.setValue(props.item.name, newValues.join(','));
+                                            props.setValue(props.item.name, currentValues.filter((v) => !filteredIds.includes(v)).join(','));
                                         }
                                         else {
-                                            // Select all filtered options
-                                            const currentValues = fieldValue?.split(',').filter(Boolean) || [];
-                                            const filteredValues = filterOptions.map((opt) => String(opt.value));
-                                            const newValues = [...new Set([...currentValues, ...filteredValues])];
-                                            props.setValue(props.item.name, newValues.join(','));
+                                            props.setValue(props.item.name, [...new Set([...currentValues, ...filteredIds])].join(','));
                                         }
-                                    } }), jsx(ListItemText, { primary: 'Select All', sx: {
-                                        fontSize: '5px !important',
-                                        '& span': {
-                                            fontSize: '12px !important',
-                                        },
-                                    } })] }), filterOptions.length !== 0 ? (filterOptions.map((option) => {
+                                    } }), jsx(ListItemText, { primary: "Select All", primaryTypographyProps: { 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}`, selected: isChecked, sx: { zIndex: 0, fontSize: '11px !important' }, children: [jsx(Checkbox, { checked: isChecked, size: "small" }), jsx(ListItemText, { primary: option.label, sx: {
-                                            fontSize: '5px !important',
-                                            '& span': {
-                                                fontSize: '12px !important',
-                                            },
+                            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: {
+                                            fontSize: '13px',
+                                            style: {
+                                                whiteSpace: 'normal',
+                                                wordBreak: 'break-all',
+                                                lineHeight: '1.4'
+                                            }
                                         } })] }, option.value));
-                        })) : (jsx(MenuItem, { disabled: true, value: 'NA', children: "No data Found" }, 'NA'))] }), 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/index.d.ts

@@ -4,6 +4,7 @@ export { default as ModalField } from './components/ModalField/ModalField';
 export { default as DeleteField } from './components/DeleteComponent/DeleteField';
 export { default as SessionTimeoutField } from './components/SessionTimeOut/SessionTimeOut';
 export { default as useFormValidatingContext } from './components/Form/FormConstants';
+export { default as MultiSelectFieldComponent } from './components/SelectField/MultiSelectFieldComponent';
 export { TPElementsProvider } from './auth/authContext';
 export { calculateTotalArrayValueTotal, checkIsDateIsBefore, findMenuHierarchy, getDesiredDate, getFormattedDate, getInitials, getUsernameFromEmail, handleDownloadReactTableDataExcel, lightenColor, } from './utils';
 export * as Utils from './utils';

package/dist/index.esm.js

@@ -4,6 +4,7 @@ export { default as ModalField } from './components/ModalField/ModalField.esm.js
 export { default as DeleteField } from './components/DeleteComponent/DeleteField.esm.js';
 export { default as SessionTimeoutField } from './components/SessionTimeOut/SessionTimeOut.esm.js';
 export { default as useFormValidatingContext } from './components/Form/FormConstants.esm.js';
+export { default as MultiSelectFieldComponent } from './components/SelectField/MultiSelectFieldComponent.esm.js';
 export { TPElementsProvider } from './auth/authContext.esm.js';
 import * as index$1 from './utils/index.esm.js';
 export { index$1 as Utils };

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 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.esm14.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.esm6.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.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.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.esm14.js';
+import { __exports as InputRangeField } from '../../../../../_virtual/index.esm13.js';
 import require$$0__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 

package/package.json

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