tp-react-elements 1.1.0 → 1.1.2

package/dist/_virtual/index.esm12.js

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

package/dist/_virtual/index.esm13.js

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

package/dist/_virtual/index.esm14.js

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

package/dist/_virtual/index.esm4.js

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

package/dist/_virtual/index.esm5.js

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

package/dist/_virtual/index.esm6.js

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

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

@@ -19,9 +19,19 @@ const MultiSelectTable = ({ props, variant, }) => {
         PaperProps: {
             style: {
                 maxHeight: ITEM_HEIGHT * 8 + ITEM_PADDING_TOP,
-                //width: `calc(100%/${props.item.numberOfColumns})`,
+                width: '100%',
+                minWidth: '320px',
+                maxWidth: '500px',
             },
         },
+        anchorOrigin: {
+            vertical: 'bottom',
+            horizontal: 'left',
+        },
+        transformOrigin: {
+            vertical: 'top',
+            horizontal: 'left',
+        },
         autoFocus: false,
         disableAutoFocusItem: true,
     };
@@ -125,7 +135,9 @@ const MultiSelectTable = ({ props, variant, }) => {
         const selectColumn = {
             id: 'select',
             header: '',
-            size: 50,
+            size: 40,
+            minSize: 40,
+            maxSize: 40,
             enableSorting: false,
             enableColumnFilter: false,
             Cell: ({ row }) => {
@@ -154,9 +166,9 @@ const MultiSelectTable = ({ props, variant, }) => {
         const dataColumns = columns.map((col) => ({
             accessorKey: col.field,
             header: col.headerName,
-            size: col.width || 120,
-            minSize: col.width || 80,
-            maxSize: 200,
+            size: col.width || 100,
+            minSize: 60,
+            maxSize: 150,
         }));
         return [selectColumn, ...dataColumns];
     }, [columns, selectedValues, valueField, handleRowSelect, handleSelectAll, getIsAllSelected, getIsIndeterminate]);
@@ -183,7 +195,8 @@ const MultiSelectTable = ({ props, variant, }) => {
             placeholder: 'Search...',
             size: 'small',
             sx: {
-                width: '100%',
+                width: 'calc(100% - 16px)',
+                margin: '0 8px',
                 '& .MuiInputBase-root': {
                     fontSize: '11px',
                     height: '28px',
@@ -194,15 +207,36 @@ const MultiSelectTable = ({ props, variant, }) => {
                 },
             },
         },
+        globalFilterFn: 'contains',
         muiTopToolbarProps: {
             sx: {
-                padding: '2px 6px',
-                minHeight: '32px',
+                padding: '8px 12px',
+                minHeight: '44px',
+                width: '100%',
+                boxSizing: 'border-box',
+                '& .Mui-Toolbar': {
+                    width: '100%',
+                },
+                '& .MuiBox-root': {
+                    width: '100%',
+                    maxWidth: '100%',
+                },
+                '& > div': {
+                    width: '100%',
+                },
             },
         },
+        mrtTheme: {
+            baseBackgroundColor: '#fff',
+        },
+        defaultColumn: {
+            size: 120,
+            minSize: 80,
+            maxSize: 200,
+        },
         paginationDisplayMode: 'pages',
         muiPaginationProps: {
-            rowsPerPageOptions: [10, 25, 50],
+            rowsPerPageOptions: [],
             showFirstButton: false,
             showLastButton: false,
             size: 'small',
@@ -212,7 +246,10 @@ const MultiSelectTable = ({ props, variant, }) => {
                     minHeight: '28px',
                 },
                 '& .MuiTablePagination-select': {
-                    fontSize: '10px',
+                    display: 'none',
+                },
+                '& .MuiTablePagination-selectLabel': {
+                    display: 'none',
                 },
                 '& .MuiTablePagination-displayedRows': {
                     fontSize: '10px',
@@ -226,10 +263,11 @@ const MultiSelectTable = ({ props, variant, }) => {
         muiTableContainerProps: {
             sx: {
                 maxHeight: 400,
-                // width: `calc(100%/${props.item.numberOfColumns})`,
+                width: '100%',
+                overflowX: 'hidden',
             },
         },
-        layoutMode: 'grid',
+        layoutMode: 'semantic',
         muiTableHeadCellProps: {
             sx: {
                 backgroundColor: headerColor,
@@ -238,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',
@@ -253,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',
                 },
@@ -302,9 +346,11 @@ const MultiSelectTable = ({ props, variant, }) => {
                         props?.item?.onCloseMenu && props?.item?.onCloseMenu();
                     }, 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: `calc(100%/${props.item.numberOfColumns})`, 
-                            overflow: 'hidden' }, 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));
+                                : selectedDisplayText || placeholder }) })), MenuProps: MenuProps, autoFocus: false, children: jsx(Box, { sx: {
+                            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));
 };
 
 export { MultiSelectTable 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.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.esm14.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.esm6.js';
+import { __exports as DateRange } from '../../../../../_virtual/index.esm4.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.esm4.js';
+import { __exports as DateRangePicker } from '../../../../../_virtual/index.esm5.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/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.esm13.js';
+import { __exports as Month } from '../../../../../_virtual/index.esm12.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.0",
+  "version": "1.1.2",
   "private": false,
   "type": "module",
   "description": "React form components library built with React Hook Form and Yup",