tp-react-elements 1.0.3 → 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 DateInput = {};
+var InputRangeField = {};
 
-export { DateInput as __exports };
+export { InputRangeField 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.esm6.js

@@ -1,3 +1,3 @@
-var Calendar = {};
+var DateRangePicker = {};
 
-export { Calendar as __exports };
+export { DateRangePicker 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/_virtual/index.esm9.js

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

package/dist/components/Form/FormRender.esm.js

@@ -1,5 +1,5 @@
 import { jsx, Fragment } from 'react/jsx-runtime';
-import React__default, { lazy, Suspense } from 'react';
+import require$$0__default, { lazy, Suspense } from 'react';
 import FormCheckBox from '../FormComponents/FormCheckBox/FormCheckBox.esm.js';
 import FormCheckBoxGroup from '../FormComponents/FormCheckBoxGroup/FormCheckBoxGroup.esm.js';
 import FormNumberField from '../FormComponents/FormNumberField/FormNumberField.esm.js';
@@ -22,6 +22,7 @@ import SingleSelectSearchApi from '../FormComponents/Select/SingleSelectSearchAp
 //   import('../RichTextEditor').then((m) => ({ default: m.RichTextEditorWrapper }))
 // );
 const MultiSelectV1 = lazy(() => import('../FormComponents/Select/MultiSelectv1.esm.js'));
+const MultiSelectTable = lazy(() => import('../FormComponents/Select/MultiSelectTable.esm.js'));
 const FormRenderFileUpload = lazy(() => import('../FileUpload/index.esm.js').then((m) => ({ default: m.FormRenderFileUpload })));
 const FormRenderMultiFileUpload = lazy(() => import('../FileUpload/index.esm.js').then((m) => ({ default: m.FormRenderMultiFileUpload })));
 const MultiFileWithPreview = lazy(() => import('../FileUpload/index.esm.js').then((m) => ({ default: m.MultiFileWithPreview })));
@@ -118,6 +119,9 @@ const RenderForm = (props) => {
         // Multi-select dropdown
         case 'multiselect':
             return (jsx(Suspense, { fallback: jsx(LoadingFallback, {}), children: jsx(MultiSelectV1, { props: props, variant: variant }) }));
+        // Multi-select with table dropdown
+        case 'multiselect-table':
+            return (jsx(Suspense, { fallback: jsx(LoadingFallback, {}), children: jsx(MultiSelectTable, { props: props, variant: variant }) }));
         // Single file upload
         case 'file':
             return (jsx(Suspense, { fallback: jsx(LoadingFallback, {}), children: jsx(FormRenderFileUpload, { props: props, variant: variant }) }));
@@ -151,6 +155,6 @@ const RenderForm = (props) => {
  *
  * @see FormRenderWrapper
  */
-var RenderForm$1 = React__default.memo(RenderForm);
+var RenderForm$1 = require$$0__default.memo(RenderForm);
 
 export { RenderForm$1 as default };

package/dist/components/Form/FormRenderWrapper.esm.js

@@ -1,5 +1,5 @@
 import { jsx, Fragment } from 'react/jsx-runtime';
-import React__default from 'react';
+import require$$0__default from 'react';
 import { useFormState } from 'react-hook-form';
 import { FormComponent, Formitem } from './Form.styles.esm.js';
 import RenderForm from './FormRender.esm.js';
@@ -28,6 +28,6 @@ const FormRenderWrapper = ({ formArray, name = '', numberOfColumns = 3, form, va
  * Export the FormRenderWrapper component for use in form containers
  * This component is the main entry point for rendering form fields
  */
-var FormRenderWrapper_default = React__default.memo(FormRenderWrapper);
+var FormRenderWrapper_default = require$$0__default.memo(FormRenderWrapper);
 
 export { FormRenderWrapper_default as default };

package/dist/components/FormComponents/Select/MultiSelectTable.d.ts

@@ -0,0 +1,6 @@
+import { FormRenderProps, VariantProps } from '../../../utils';
+declare const MultiSelectTable: ({ props, variant, }: {
+    props: FormRenderProps;
+    variant: VariantProps;
+}) => import("react/jsx-runtime").JSX.Element;
+export default MultiSelectTable;

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

@@ -0,0 +1,339 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Box, FormControl, InputLabel, Select, Tooltip, OutlinedInput, Checkbox } from '@mui/material';
+import { useState, useRef, useMemo, useCallback } from 'react';
+import { useWatch } from 'react-hook-form';
+import FormBottomField from '../FormBottomField/FormBottomField.esm.js';
+import 'dayjs';
+import { renderLabel } from '../../../utils/Constants/FormConstants.esm.js';
+import { useMaterialReactTable, MaterialReactTable } from 'material-react-table';
+
+const ITEM_HEIGHT = 50;
+const ITEM_PADDING_TOP = 3;
+const extractValuesToArray = (inputString) => {
+    if (!inputString)
+        return [];
+    return inputString.split(',').map((value) => value.trim()).filter(Boolean);
+};
+const MultiSelectTable = ({ props, variant, }) => {
+    const MenuProps = {
+        PaperProps: {
+            style: {
+                maxHeight: ITEM_HEIGHT * 8 + ITEM_PADDING_TOP,
+                width: '100%',
+                minWidth: '280px',
+                maxWidth: '450px',
+            },
+        },
+        autoFocus: false,
+        disableAutoFocusItem: true,
+    };
+    const [globalFilter, setGlobalFilter] = useState('');
+    const tableRef = useRef(null);
+    const fieldValue = useWatch({ control: props.control, name: props.item.name });
+    const isError = !!props.errors?.[props.item.name];
+    const isShowBorderError = isError;
+    // Get columns and rows from form item
+    const columns = props.item.columns || [];
+    const rows = props.item.rows || [];
+    const valueField = props.item.valueField || 'id';
+    const labelField = props.item.labelField || 'name';
+    const headerColor = props.item.headerColor || '#00695c';
+    const placeholder = props.item.placeholder || 'None selected';
+    // Get selected rows (handles both array of objects and legacy string format)
+    const selectedRows = useMemo(() => {
+        if (!fieldValue)
+            return [];
+        // If fieldValue is already an array of objects, use it directly
+        if (Array.isArray(fieldValue)) {
+            return fieldValue;
+        }
+        // Legacy: handle comma-separated string of IDs
+        const ids = extractValuesToArray(fieldValue);
+        return rows.filter((row) => ids.includes(String(row[valueField])));
+    }, [fieldValue, rows, valueField]);
+    // Get selected values as array of IDs for checkbox state
+    const selectedValues = useMemo(() => {
+        return selectedRows.map((row) => String(row[valueField]));
+    }, [selectedRows, valueField]);
+    // Display text for selected items
+    const selectedDisplayText = useMemo(() => {
+        const labels = selectedRows.map((row) => row[labelField]);
+        return labels.join(', ');
+    }, [selectedRows, labelField]);
+    // Handle row selection
+    const handleRowSelect = useCallback((rowId) => {
+        const currentIds = new Set(selectedValues);
+        const isSelected = currentIds.has(rowId);
+        let newSelectedRows;
+        if (isSelected) {
+            // Remove row
+            newSelectedRows = selectedRows.filter((row) => String(row[valueField]) !== rowId);
+        }
+        else {
+            // Add row
+            const rowToAdd = rows.find((row) => String(row[valueField]) === rowId);
+            if (rowToAdd) {
+                newSelectedRows = [...selectedRows, rowToAdd];
+            }
+            else {
+                newSelectedRows = selectedRows;
+            }
+        }
+        props.setValue(props.item.name, newSelectedRows);
+        props?.item?.onChangeFn && props?.item?.onChangeFn(newSelectedRows);
+        props?.clearErrors && props?.clearErrors(props.item.name);
+    }, [selectedValues, selectedRows, rows, props, valueField]);
+    // Handle select all - selects filtered/visible rows (like MUI MultiSelect)
+    const handleSelectAll = useCallback(() => {
+        const table = tableRef.current;
+        if (!table)
+            return;
+        // Get filtered/visible rows (respects search filter)
+        const filteredRows = table.getFilteredRowModel().rows;
+        const filteredIds = filteredRows.map((row) => String(row.original[valueField]));
+        const currentIds = new Set(selectedValues);
+        const allFilteredSelected = filteredIds.every((id) => currentIds.has(id));
+        let newSelectedRows;
+        if (allFilteredSelected) {
+            // Deselect filtered rows - remove them from selection
+            newSelectedRows = selectedRows.filter((row) => !filteredIds.includes(String(row[valueField])));
+        }
+        else {
+            // Select filtered rows - add them to selection
+            const rowsToAdd = filteredRows
+                .map((row) => row.original)
+                .filter((row) => !currentIds.has(String(row[valueField])));
+            newSelectedRows = [...selectedRows, ...rowsToAdd];
+        }
+        props.setValue(props.item.name, newSelectedRows);
+        props?.item?.onChangeFn && props?.item?.onChangeFn(newSelectedRows);
+    }, [selectedValues, selectedRows, props, valueField]);
+    // Calculate select all state based on filtered rows
+    const getIsAllSelected = useCallback((table) => {
+        const filteredRows = table.getFilteredRowModel().rows;
+        if (filteredRows.length === 0)
+            return false;
+        return filteredRows.every((row) => selectedValues.includes(String(row.original[valueField])));
+    }, [selectedValues, valueField]);
+    const getIsIndeterminate = useCallback((table) => {
+        const filteredRows = table.getFilteredRowModel().rows;
+        if (filteredRows.length === 0)
+            return false;
+        const selectedCount = filteredRows.filter((row) => selectedValues.includes(String(row.original[valueField]))).length;
+        return selectedCount > 0 && selectedCount < filteredRows.length;
+    }, [selectedValues, valueField]);
+    // Build MRT columns from form item columns
+    const mrtColumns = useMemo(() => {
+        const selectColumn = {
+            id: 'select',
+            header: '',
+            size: 40,
+            minSize: 40,
+            maxSize: 40,
+            enableSorting: false,
+            enableColumnFilter: false,
+            Cell: ({ row }) => {
+                const rowId = String(row.original[valueField]);
+                const isSelected = selectedValues.includes(rowId);
+                return (jsx(Checkbox, { size: "small", checked: isSelected, onChange: () => handleRowSelect(rowId), sx: {
+                        padding: '2px',
+                        '& .MuiSvgIcon-root': {
+                            fontSize: '16px',
+                        },
+                    } }));
+            },
+            Header: ({ table }) => {
+                // Store table reference for select all
+                tableRef.current = table;
+                const isAllSelected = getIsAllSelected(table);
+                const isIndeterminate = getIsIndeterminate(table);
+                return (jsx(Checkbox, { size: "small", checked: isAllSelected, indeterminate: isIndeterminate, onChange: handleSelectAll, sx: {
+                        padding: '2px',
+                        '& .MuiSvgIcon-root': {
+                            fontSize: '16px',
+                        },
+                    } }));
+            },
+        };
+        const dataColumns = columns.map((col) => ({
+            accessorKey: col.field,
+            header: col.headerName,
+            size: col.width || 100,
+            minSize: 60,
+            maxSize: 150,
+        }));
+        return [selectColumn, ...dataColumns];
+    }, [columns, selectedValues, valueField, handleRowSelect, handleSelectAll, getIsAllSelected, getIsIndeterminate]);
+    // MRT table instance
+    const table = useMaterialReactTable({
+        columns: mrtColumns,
+        data: rows,
+        enableTopToolbar: true,
+        enableGlobalFilter: true,
+        enableBottomToolbar: true,
+        enablePagination: true,
+        enableColumnActions: false,
+        enableColumnFilters: false,
+        enableSorting: false,
+        enableRowSelection: false,
+        enableSelectAll: false,
+        enableMultiRowSelection: false,
+        enableStickyHeader: true,
+        enableDensityToggle: false,
+        enableFullScreenToggle: false,
+        enableHiding: false,
+        positionGlobalFilter: 'left',
+        muiSearchTextFieldProps: {
+            placeholder: 'Search...',
+            size: 'small',
+            sx: {
+                width: 'calc(100% - 24px)',
+                margin: '0 12px',
+                '& .MuiInputBase-root': {
+                    fontSize: '11px',
+                    height: '28px',
+                    width: '100%',
+                },
+                '& .MuiInputBase-input': {
+                    padding: '4px 8px',
+                },
+            },
+        },
+        globalFilterFn: 'contains',
+        muiTopToolbarProps: {
+            sx: {
+                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],
+            showFirstButton: false,
+            showLastButton: false,
+            size: 'small',
+            sx: {
+                '& .MuiTablePagination-root': {
+                    fontSize: '10px',
+                    minHeight: '28px',
+                },
+                '& .MuiTablePagination-select': {
+                    fontSize: '10px',
+                },
+                '& .MuiTablePagination-displayedRows': {
+                    fontSize: '10px',
+                },
+                '& .MuiTablePagination-toolbar': {
+                    minHeight: '28px',
+                    padding: '0 4px',
+                },
+            },
+        },
+        muiTableContainerProps: {
+            sx: {
+                maxHeight: 400,
+                width: '100%',
+                overflowX: 'hidden',
+            },
+        },
+        layoutMode: 'semantic',
+        muiTableHeadCellProps: {
+            sx: {
+                backgroundColor: headerColor,
+                color: '#fff',
+                fontWeight: 'bold',
+                fontSize: '11px',
+                padding: '4px 6px',
+                borderBottom: '1px solid #e0e0e0',
+                '& .Mui-TableHeadCell-Content': {
+                    color: '#fff',
+                    fontSize: '11px',
+                },
+                '& .MuiSvgIcon-root': {
+                    color: '#fff',
+                    fontSize: '16px',
+                },
+            },
+        },
+        muiTableBodyCellProps: {
+            sx: {
+                fontSize: '10px',
+                padding: '4px 6px',
+                borderBottom: '1px solid #e0e0e0',
+            },
+        },
+        muiTableBodyRowProps: {
+            sx: {
+                borderBottom: '1px solid #e0e0e0',
+                height: '32px',
+                '&:hover': {
+                    backgroundColor: '#e0f2f1',
+                },
+            },
+        },
+        initialState: {
+            density: 'compact',
+            pagination: {
+                pageSize: 7,
+                pageIndex: 0,
+            },
+            showGlobalFilter: true,
+        },
+        state: {
+            globalFilter,
+        },
+        onGlobalFilterChange: setGlobalFilter,
+    });
+    return (jsx(Box, { children: jsxs(FormControl, { fullWidth: true, sx: {
+                '& .MuiFormLabel-root': {
+                    top: -10,
+                },
+                '& .MuiInputLabel-shrink': {
+                    top: 0,
+                },
+                '& .MuiTablePagination-root': {
+                    padding: '0px !important'
+                }
+            }, children: [renderLabel(variant, props), variant !== 'standard' ? (jsxs(InputLabel, { error: isShowBorderError, id: `${props.item.name}-mst-labelId`, children: [props.item.label, props.item.required ? ' *' : ''] })) : null, jsx(Select, { labelId: `${props.item.name}-mst-labelId`, id: `${props.item.name}-mst-select`, multiple: true, sx: {
+                        '& .MuiTypography-root': {
+                            fontSize: '5px !important',
+                        },
+                    }, error: isShowBorderError, disabled: props.item.disable, value: selectedValues, displayEmpty: true, 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: () => {
+                        setGlobalFilter('');
+                    }, onClose: () => {
+                        setGlobalFilter('');
+                        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: '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/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 React__default, { useState, useMemo } from 'react';
+import require$$0__default, { useState, useMemo } from 'react';
 import { useWatch } from 'react-hook-form';
 import FormBottomField from '../FormBottomField/FormBottomField.esm.js';
 import 'dayjs';
@@ -34,21 +34,27 @@ const MenuProps = {
 //   },
 // }));
 const extractValuesToArray = (inputString) => {
-    const valuesArray = inputString?.split(',');
-    const trimmedArray = valuesArray?.map((value) => value.trim());
-    return trimmedArray;
+    if (!inputString)
+        return [];
+    return inputString.split(',').map((value) => value.trim()).filter(Boolean);
 };
 function MultiSelectV1({ props, variant, }) {
-    const [personName, setPersonName] = React__default.useState(props.getValues(props.item.name) ? extractValuesToArray(props.getValues(props.item.name)) : []);
+    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 [selectAll, setSelectAll] = useState(false);
-    const textfieldRef = React__default.useRef(null);
+    const textfieldRef = require$$0__default.useRef(null);
     const fieldValue = useWatch({ control: props.control, name: props.item.name });
-    const mappedIds = useMemo(() => filterOptions.map((item) => item.value), [filterOptions]);
-    const filterIds = useMemo(() => filterOptions.map((item) => item.value), [filterOptions]);
-    React__default.useEffect(() => {
+    // 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())));
         }
@@ -56,19 +62,6 @@ function MultiSelectV1({ props, variant, }) {
             setFilterOptions(options);
         }
     }, [options, searchText]);
-    function hasExactMatch(array, value) {
-        return array.some((item) => item === value);
-    }
-    React__default.useEffect(() => {
-        if (fieldValue?.split(',').length !== filterOptions.length) {
-            setSelectAll(false);
-        }
-        else {
-            if (fieldValue?.split(',').every((value) => hasExactMatch(filterIds, value))) {
-                setSelectAll(true);
-            }
-        }
-    }, [filterOptions, fieldValue]);
     const handleChange = (event) => {
         const { target: { value }, } = event;
         setPersonName(typeof value === 'string' ? value?.split(',') : value);
@@ -88,7 +81,7 @@ function MultiSelectV1({ props, variant, }) {
                 '& .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, sx: {
+            }, 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',
                         },
@@ -105,7 +98,7 @@ function MultiSelectV1({ props, variant, }) {
                     }, onClose: () => {
                         setSearchText('');
                         props?.item?.onCloseMenu && props?.item?.onCloseMenu();
-                    }, input: jsx(OutlinedInput, { label: variant !== 'standard' ? props.item.label : '' }), renderValue: (_selected) => (jsx(Tooltip, { title: selectedValues, children: jsx("span", { children: selectedOptions.length > (props.item.multiSelectLabelLength || 3)
+                    }, 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)
                                 ? `${selectedOptions.length} Selected`
                                 : selectedValues }) })), MenuProps: MenuProps, autoFocus: false, children: [jsx(Box, { sx: {
                                 width: '100%',
@@ -125,26 +118,35 @@ function MultiSelectV1({ props, variant, }) {
                                         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) {
-                                            props.setValue(props.item.name, '');
+                                        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(','));
                                         }
                                         else {
-                                            const allDataMapped = mappedIds.join(',');
-                                            props.setValue(props.item.name, allDataMapped);
+                                            // 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(','));
                                         }
                                     } }), 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'))] }), jsx(FormBottomField, { ...props })] }) }, props.item.name));
+                                    } })] }), 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',
+                                            },
+                                        } })] }, option.value));
+                        })) : (jsx(MenuItem, { disabled: true, value: 'NA', children: "No data Found" }, 'NA'))] }), jsx(FormBottomField, { ...props })] }) }, props.item.name));
 }
 
 export { MultiSelectV1 as default };

package/dist/components/FormComponents/index.d.ts

@@ -7,6 +7,7 @@ export { default as SingleSelect } from './Select/SingleSelect';
 export { default as SingleSelectNonAutoComplete } from './Select/SingleSelectNonAutoComplete';
 export { default as SingleSelectSearchApi } from './Select/SingleSelectSearchApi';
 export { default as MultiSelectV1 } from './Select/MultiSelectv1';
+export { default as MultiSelectTable } from './Select/MultiSelectTable';
 export { FormCheckBoxGroup } from '../CheckBoxGroup';
 export { FormRadioGroup } from '../RadioGroup';
 export { DatepickerWrapperV2, MonthPicker, Monthpickerrender, YearPickerField, } from '../DatePicker';

package/dist/components/FormComponents/index.esm.js

@@ -8,6 +8,7 @@ export { default as SingleSelect } from './Select/SingleSelect.esm.js';
 export { default as SingleSelectNonAutoComplete } from './Select/SingleSelectNonAutoComplete.esm.js';
 export { default as SingleSelectSearchApi } from './Select/SingleSelectSearchApi.esm.js';
 export { default as MultiSelectV1 } from './Select/MultiSelectv1.esm.js';
+export { default as MultiSelectTable } from './Select/MultiSelectTable.esm.js';
 export { default as FormCheckBoxGroup } from './FormCheckBoxGroup/FormCheckBoxGroup.esm.js';
 export { default as FormRadioGroup } from './FormRadioGroup/FormRadioGroup.esm.js';
 export { default as DatepickerWrapperV2 } from './DatePicker/DatepickerWrapperV2.esm.js';

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

@@ -5,7 +5,7 @@ import FormControl from '@mui/material/FormControl';
 import ListItemText from '@mui/material/ListItemText';
 import MenuItem from '@mui/material/MenuItem';
 import Select from '@mui/material/Select';
-import * as React from 'react';
+import * as require$$0 from 'react';
 import { useState } from 'react';
 
 const ITEM_HEIGHT = 48;
@@ -25,15 +25,15 @@ const extractValuesToArray = (inputString) => {
     return trimmedArray;
 };
 function MultiSelectFieldComponent({ value, options, onChangeFn, disable = false, }) {
-    const [personName, setPersonName] = React.useState(value ? extractValuesToArray(value) : []);
+    const [personName, setPersonName] = require$$0.useState(value ? extractValuesToArray(value) : []);
     const [searchText, setSearchText] = useState('');
     const [filterOptions, setFilterOptions] = useState(options);
     const [selectAll, setSelectAll] = useState(false);
-    const textfieldRef = React.useRef(null);
+    const textfieldRef = require$$0.useRef(null);
     const fieldValue = value;
     const mappedIds = filterOptions.map((item) => item.value);
     const filterIds = filterOptions.map((item) => item.value);
-    React.useEffect(() => {
+    require$$0.useEffect(() => {
         if (searchText !== '') {
             setFilterOptions(options.filter((item) => item.label.toLowerCase().includes(searchText.toLowerCase())));
         }
@@ -44,7 +44,7 @@ function MultiSelectFieldComponent({ value, options, onChangeFn, disable = false
     function hasExactMatch(array, value) {
         return array.some((item) => item === value);
     }
-    React.useEffect(() => {
+    require$$0.useEffect(() => {
         if (fieldValue?.split(',').length !== filterOptions.length) {
             setSelectAll(false);
         }

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,5 +1,5 @@
-import { __exports as Calendar } from '../../../../../_virtual/index.esm6.js';
-import React__default from 'react';
+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';
 import { __require as requireMonth } from '../Month/index.esm.js';
@@ -23,7 +23,7 @@ function requireCalendar () {
 	  value: true
 	});
 	Calendar.default = void 0;
-	var _react = _interopRequireWildcard(React__default);
+	var _react = _interopRequireWildcard(require$$0__default);
 	var _propTypes = _interopRequireDefault(/*@__PURE__*/ requirePropTypes());
 	var _DayCell = requireDayCell();
 	var _Month = _interopRequireDefault(requireMonth());

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

@@ -1,5 +1,5 @@
-import { __exports as DateInput } from '../../../../../_virtual/index.esm13.js';
-import React__default from 'react';
+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';
 import { __require as requireDateFns } from '../../../../date-fns/index.esm.js';
@@ -14,7 +14,7 @@ function requireDateInput () {
 	  value: true
 	});
 	DateInput.default = void 0;
-	var _react = _interopRequireWildcard(React__default);
+	var _react = _interopRequireWildcard(require$$0__default);
 	var _propTypes = _interopRequireDefault(/*@__PURE__*/ requirePropTypes());
 	var _classnames = _interopRequireDefault(requireClassnames());
 	var _dateFns = /*@__PURE__*/ requireDateFns();

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

@@ -1,5 +1,5 @@
-import { __exports as DateRange } from '../../../../../_virtual/index.esm4.js';
-import React__default from 'react';
+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';
 import { __require as requireDayCell } from '../DayCell/index.esm.js';
@@ -18,7 +18,7 @@ function requireDateRange () {
 	  value: true
 	});
 	DateRange.default = void 0;
-	var _react = _interopRequireWildcard(React__default);
+	var _react = _interopRequireWildcard(require$$0__default);
 	var _propTypes = _interopRequireDefault(/*@__PURE__*/ requirePropTypes());
 	var _Calendar = _interopRequireDefault(requireCalendar());
 	var _DayCell = requireDayCell();

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

@@ -1,5 +1,5 @@
-import { __exports as DateRangePicker } from '../../../../../_virtual/index.esm7.js';
-import React__default from 'react';
+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';
 import { __require as requireDefinedRange } from '../DefinedRange/index.esm.js';
@@ -17,7 +17,7 @@ function requireDateRangePicker () {
 	  value: true
 	});
 	DateRangePicker.default = void 0;
-	var _react = _interopRequireWildcard(React__default);
+	var _react = _interopRequireWildcard(require$$0__default);
 	var _propTypes = _interopRequireDefault(/*@__PURE__*/ requirePropTypes());
 	var _DateRange = _interopRequireDefault(requireDateRange());
 	var _DefinedRange = _interopRequireDefault(requireDefinedRange());

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

@@ -1,5 +1,5 @@
 import { __exports as DayCell } from '../../../../../_virtual/index.esm11.js';
-import React__default from 'react';
+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';
 import { __require as requireDateFns } from '../../../../date-fns/index.esm.js';
@@ -14,7 +14,7 @@ function requireDayCell () {
 	  value: true
 	});
 	DayCell.rangeShape = DayCell.default = void 0;
-	var _react = _interopRequireWildcard(React__default);
+	var _react = _interopRequireWildcard(require$$0__default);
 	var _propTypes = _interopRequireDefault(/*@__PURE__*/ requirePropTypes());
 	var _classnames = _interopRequireDefault(requireClassnames());
 	var _dateFns = /*@__PURE__*/ requireDateFns();

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

@@ -1,5 +1,5 @@
 import { __exports as DefinedRange } from '../../../../../_virtual/index.esm5.js';
-import React__default from 'react';
+import require$$0__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 import { __require as requireStyles } from '../../styles.esm.js';
 import { __require as requireDefaultRanges } from '../../defaultRanges.esm.js';
@@ -17,7 +17,7 @@ function requireDefinedRange () {
 	  value: true
 	});
 	DefinedRange.default = void 0;
-	var _react = _interopRequireWildcard(React__default);
+	var _react = _interopRequireWildcard(require$$0__default);
 	var _propTypes = _interopRequireDefault(/*@__PURE__*/ requirePropTypes());
 	var _styles = _interopRequireDefault(requireStyles());
 	var _defaultRanges = requireDefaultRanges();

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

@@ -1,5 +1,5 @@
-import { __exports as InputRangeField } from '../../../../../_virtual/index.esm12.js';
-import React__default from 'react';
+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';
 
 var hasRequiredInputRangeField;
@@ -12,7 +12,7 @@ function requireInputRangeField () {
 	  value: true
 	});
 	InputRangeField.default = void 0;
-	var _react = _interopRequireWildcard(React__default);
+	var _react = _interopRequireWildcard(require$$0__default);
 	var _propTypes = _interopRequireDefault(/*@__PURE__*/ requirePropTypes());
 	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 	function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }

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

@@ -1,5 +1,5 @@
 import { __exports as Month } from '../../../../../_virtual/index.esm14.js';
-import React__default from 'react';
+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';
 import { __require as requireDateFns } from '../../../../date-fns/index.esm.js';
@@ -15,7 +15,7 @@ function requireMonth () {
 	  value: true
 	});
 	Month.default = void 0;
-	var _react = _interopRequireWildcard(React__default);
+	var _react = _interopRequireWildcard(require$$0__default);
 	var _propTypes = _interopRequireDefault(/*@__PURE__*/ requirePropTypes());
 	var _DayCell = _interopRequireWildcard(requireDayCell());
 	var _dateFns = /*@__PURE__*/ requireDateFns();

package/dist/node_modules/react-list/react-list.esm.js

@@ -1,5 +1,5 @@
 import { __exports as reactList } from '../../_virtual/react-list.esm.js';
-import React__default from 'react';
+import require$$0__default from 'react';
 import require$$1 from 'react/jsx-runtime';
 
 var hasRequiredReactList;
@@ -10,7 +10,7 @@ function requireReactList () {
 	(function (exports$1) {
 		(function (global, factory) {
 		  {
-		    factory(exports$1, React__default, require$$1);
+		    factory(exports$1, require$$0__default, require$$1);
 		  }
 		})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : reactList, function (_exports, _react, _jsxRuntime) {
 

package/dist/utils/Interface/FormInterface.d.ts

@@ -10,7 +10,7 @@ export interface TextFieldInputProps {
 export interface FormSectionPropsItem {
     name: string;
     label: string;
-    inputType: 'text' | 'password' | 'number' | 'select' | 'autocomplete-select' | 'autocomplete-multi-select' | 'single-select-search' | 'datepicker' | 'multiselect' | 'select-v2' | 'basic-select' | 'decimal' | 'alpha-numerical' | 'yearpicker' | 'dateRangePicker' | 'monthpicker' | 'multiselect' | 'file' | 'multifile' | 'multifile-with-preview' | 'textarea' | 'phoneNumber' | 'pincode' | 'email' | 'toggleSwitch' | 'rich-text-editor' | 'multiEmail' | 'timepicker' | 'checkbox-group' | 'radio-group' | 'checkbox' | 'custom' | 'input-select' | 'date-range-picker' | '';
+    inputType: 'text' | 'password' | 'number' | 'select' | 'autocomplete-select' | 'autocomplete-multi-select' | 'single-select-search' | 'datepicker' | 'multiselect' | 'select-v2' | 'basic-select' | 'decimal' | 'alpha-numerical' | 'yearpicker' | 'dateRangePicker' | 'monthpicker' | 'multiselect' | 'file' | 'multifile' | 'multifile-with-preview' | 'textarea' | 'phoneNumber' | 'pincode' | 'email' | 'toggleSwitch' | 'rich-text-editor' | 'multiEmail' | 'timepicker' | 'checkbox-group' | 'radio-group' | 'checkbox' | 'custom' | 'input-select' | 'date-range-picker' | 'multiselect-table' | '';
     options?: OptionsProps[];
     required?: boolean;
     errorMessage?: string;
@@ -70,6 +70,16 @@ export interface FormSectionPropsItem {
     api?: string;
     jwtHeader?: any;
     searchValue?: any;
+    columns?: {
+        field: string;
+        headerName: string;
+        width?: number;
+        flex?: number;
+    }[];
+    rows?: any[];
+    valueField?: string;
+    labelField?: string;
+    headerColor?: string;
 }
 export type VariantProps = 'standard' | 'outlined' | '';
 export interface FormRenderProps {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tp-react-elements",
-  "version": "1.0.3",
+  "version": "1.1.1",
   "private": false,
   "type": "module",
   "description": "React form components library built with React Hook Form and Yup",
@@ -90,6 +90,7 @@
     "file-saver": ">=2.0.5 <3.0.0",
     "jodit": ">=4.6.2 <5.0.0",
     "jodit-react": ">=5.2.19 <6.0.0",
+    "material-react-table": ">=3.0.0 <4.0.0",
     "react": ">=18 <20",
     "react-dom": ">=18 <20",
     "react-hook-form": ">=7.62.0 <8.0.0",
@@ -106,6 +107,9 @@
     },
     "jodit-react": {
       "optional": true
+    },
+    "material-react-table": {
+      "optional": true
     }
   },
   "devDependencies": {
@@ -149,6 +153,7 @@
     "jodit": "^4.6.2",
     "jodit-react": "^5.2.19",
     "jsdom": "^25.0.0",
+    "material-react-table": "^3.2.1",
     "prettier": "^3.6.2",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",