tp-react-elements 1.1.0 → 1.1.1

package/dist/_virtual/index.esm10.js

@@ -1,3 +1,3 @@
-var propTypes = {exports: {}};
+var accessibility = {};
 
-export { propTypes as __module };
+export { accessibility as __exports };

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 Month = {};
+var InputRangeField = {};
 
-export { Month as __exports };
+export { InputRangeField as __exports };

package/dist/_virtual/index.esm14.js

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

package/dist/_virtual/index.esm4.js

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

package/dist/_virtual/index.esm7.js

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

package/dist/_virtual/index.esm9.js

@@ -1,3 +1,3 @@
-var accessibility = {};
+var propTypes = {exports: {}};
 
-export { accessibility as __exports };
+export { propTypes as __module };

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

@@ -19,7 +19,9 @@ const MultiSelectTable = ({ props, variant, }) => {
         PaperProps: {
             style: {
                 maxHeight: ITEM_HEIGHT * 8 + ITEM_PADDING_TOP,
-                //width: `calc(100%/${props.item.numberOfColumns})`,
+                width: '100%',
+                minWidth: '280px',
+                maxWidth: '450px',
             },
         },
         autoFocus: false,
@@ -125,7 +127,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 +158,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 +187,8 @@ const MultiSelectTable = ({ props, variant, }) => {
             placeholder: 'Search...',
             size: 'small',
             sx: {
-                width: '100%',
+                width: 'calc(100% - 24px)',
+                margin: '0 12px',
                 '& .MuiInputBase-root': {
                     fontSize: '11px',
                     height: '28px',
@@ -194,12 +199,33 @@ 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],
@@ -226,10 +252,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,
@@ -302,9 +329,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', '.MuiTextField-root': {
+                                width: '260% !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/prop-types/index.esm.js

@@ -1,4 +1,4 @@
-import { __module as propTypes } from '../../_virtual/index.esm10.js';
+import { __module as propTypes } from '../../_virtual/index.esm9.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.esm9.js';
+import { __exports as accessibility } from '../../../../_virtual/index.esm10.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.esm5.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.esm14.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.esm6.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.esm4.js';
+import { __exports as DateRangePicker } from '../../../../../_virtual/index.esm6.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.esm12.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/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.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.0",
+  "version": "1.1.1",
   "private": false,
   "type": "module",
   "description": "React form components library built with React Hook Form and Yup",