tp-react-elements 1.1.1 → 1.1.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.esm12.js

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

package/dist/_virtual/index.esm13.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 Calendar = {};
+var DateRangePicker = {};
 
-export { Calendar as __exports };
+export { DateRangePicker as __exports };

package/dist/_virtual/index.esm5.js

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

package/dist/_virtual/index.esm6.js

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

package/dist/_virtual/index.esm7.js

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

@@ -20,10 +20,18 @@ const MultiSelectTable = ({ props, variant, }) => {
             style: {
                 maxHeight: ITEM_HEIGHT * 8 + ITEM_PADDING_TOP,
                 width: '100%',
-                minWidth: '280px',
-                maxWidth: '450px',
+                minWidth: '320px',
+                maxWidth: '500px',
             },
         },
+        anchorOrigin: {
+            vertical: 'bottom',
+            horizontal: 'left',
+        },
+        transformOrigin: {
+            vertical: 'top',
+            horizontal: 'left',
+        },
         autoFocus: false,
         disableAutoFocusItem: true,
     };
@@ -187,8 +195,8 @@ const MultiSelectTable = ({ props, variant, }) => {
             placeholder: 'Search...',
             size: 'small',
             sx: {
-                width: 'calc(100% - 24px)',
-                margin: '0 12px',
+                width: 'calc(100% - 16px)',
+                margin: '0 8px',
                 '& .MuiInputBase-root': {
                     fontSize: '11px',
                     height: '28px',
@@ -228,7 +236,7 @@ const MultiSelectTable = ({ props, variant, }) => {
         },
         paginationDisplayMode: 'pages',
         muiPaginationProps: {
-            rowsPerPageOptions: [10, 25, 50],
+            rowsPerPageOptions: [],
             showFirstButton: false,
             showLastButton: false,
             size: 'small',
@@ -238,7 +246,10 @@ const MultiSelectTable = ({ props, variant, }) => {
                     minHeight: '28px',
                 },
                 '& .MuiTablePagination-select': {
-                    fontSize: '10px',
+                    display: 'none',
+                },
+                '& .MuiTablePagination-selectLabel': {
+                    display: 'none',
                 },
                 '& .MuiTablePagination-displayedRows': {
                     fontSize: '10px',
@@ -265,6 +276,8 @@ const MultiSelectTable = ({ props, variant, }) => {
                 fontSize: '11px',
                 padding: '4px 6px',
                 borderBottom: '1px solid #e0e0e0',
+                whiteSpace: 'normal',
+                wordWrap: 'break-word',
                 '& .Mui-TableHeadCell-Content': {
                     color: '#fff',
                     fontSize: '11px',
@@ -280,12 +293,16 @@ const MultiSelectTable = ({ props, variant, }) => {
                 fontSize: '10px',
                 padding: '4px 6px',
                 borderBottom: '1px solid #e0e0e0',
+                whiteSpace: 'normal',
+                wordWrap: 'break-word',
+                overflow: 'visible',
             },
         },
         muiTableBodyRowProps: {
             sx: {
                 borderBottom: '1px solid #e0e0e0',
-                height: '32px',
+                height: 'auto',
+                minHeight: '32px',
                 '&:hover': {
                     backgroundColor: '#e0f2f1',
                 },
@@ -330,8 +347,8 @@ const MultiSelectTable = ({ props, variant, }) => {
                     }, input: jsx(OutlinedInput, { label: variant !== 'standard' ? props.item.label : '' }), renderValue: () => (jsx(Tooltip, { title: selectedDisplayText, children: jsx("span", { children: selectedRows.length > (props.item.multiSelectLabelLength || 2)
                                 ? `${selectedRows.length} Selected`
                                 : selectedDisplayText || placeholder }) })), MenuProps: MenuProps, autoFocus: false, children: jsx(Box, { sx: {
-                            maxHeight: 450, width: '100%', overflow: 'hidden', '.MuiTextField-root': {
-                                width: '260% !important'
+                            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));
 };

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/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.esm4.js';
+import { __exports as Calendar } from '../../../../../_virtual/index.esm7.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.esm12.js';
+import { __exports as DateInput } from '../../../../../_virtual/index.esm13.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.esm7.js';
+import { __exports as DateRange } from '../../../../../_virtual/index.esm5.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.esm6.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.esm5.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.esm13.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/package.json

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