tp-react-elements 1.2.3 → 1.2.7

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.esm11.js

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

package/dist/_virtual/index.esm12.js

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

package/dist/_virtual/index.esm13.js

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

package/dist/_virtual/index.esm14.js

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

package/dist/_virtual/index.esm4.js

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

package/dist/components/FormComponents/FormNumberField/FormNumberFieldDecimal.esm.js

@@ -37,6 +37,9 @@ const FormNumberFieldDecimal = ({ props, variant, }) => {
                         props?.item?.onBlurFn && props?.item?.onBlurFn(e);
                     }, InputProps: {
                         inputProps: {
+                            onInput: (e) => {
+                                props.item.onInputProps && props.item.onInputProps(e);
+                            },
                             // allow digits, one dot and optional leading minus
                             inputMode: 'decimal',
                             maxLength: 20,

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

@@ -185,7 +185,7 @@ const MultiSelectAutocomplete = ({ props, variant, }) => {
     const handleBlur = useCallback((e) => {
         props?.item?.onBlurFn && props?.item?.onBlurFn(e);
     }, [props]);
-    return (jsx(Controller, { control: props.control, name: props.item.name, render: ({ field: { ref, onBlur: fieldOnBlur } }) => (jsxs(Fragment, { children: [renderLabel(variant, props), jsx(Autocomplete, { ref: ref, open: open, onOpen: () => setOpen(true), onClose: () => setOpen(false), multiple: true, disableCloseOnSelect: true, id: `${props.item.name}-autocomplete-multi`, options: options, value: selectedOptions, getOptionLabel: getOptionLabelCb, isOptionEqualToValue: isOptionEqualCb, onChange: handleChange, onBlur: (e) => {
+    return (jsx(Controller, { control: props.control, name: props.item.name, render: ({ field: { ref, onBlur: fieldOnBlur } }) => (jsxs(Fragment, { children: [renderLabel(variant, props), jsx(Autocomplete, { ref: ref, open: open, onOpen: () => setOpen(true), onClose: () => setOpen(false), multiple: true, disableCloseOnSelect: true, id: `${props.item.name}-autocomplete-multi`, options: options, value: selectedOptions, getOptionLabel: getOptionLabelCb, isOptionEqualToValue: isOptionEqualCb, getOptionDisabled: (option) => option.disable, onChange: handleChange, onBlur: (e) => {
                         fieldOnBlur();
                         handleBlur(e);
                     }, size: "small", disablePortal: false, autoHighlight: true, selectOnFocus: true, clearOnBlur: false, renderTags: (tagValue, getTagProps) => (jsx(Box, { ref: tagsContainerRef, sx: {

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

@@ -1,11 +1,12 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { Box, FormControl, InputLabel, Select, Tooltip, OutlinedInput, Checkbox } from '@mui/material';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Box, IconButton, 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';
+import { ChevronLeft, ChevronRight } from '@mui/icons-material';
 
 const ITEM_HEIGHT = 50;
 const ITEM_PADDING_TOP = 3;
@@ -304,15 +305,22 @@ const MultiSelectTable = ({ props, variant, }) => {
                 overflow: 'visible',
             },
         },
-        muiTableBodyRowProps: {
-            sx: {
-                borderBottom: '1px solid #e0e0e0',
-                height: 'auto',
-                minHeight: '32px',
-                '&:hover': {
-                    backgroundColor: '#e0f2f1',
+        muiTableBodyRowProps: ({ row }) => {
+            const rowId = String(row.original[valueField]);
+            const isSelected = selectedValues.includes(rowId);
+            return {
+                onClick: () => handleRowSelect(rowId), // 👈 row click selection
+                sx: {
+                    borderBottom: '1px solid #e0e0e0',
+                    height: 'auto',
+                    minHeight: '32px',
+                    cursor: 'pointer',
+                    backgroundColor: isSelected ? '#b2dfdb' : 'inherit', // optional highlight
+                    '&:hover': {
+                        backgroundColor: '#e0f2f1',
+                    },
                 },
-            },
+            };
         },
         initialState: {
             density: 'compact',
@@ -326,6 +334,18 @@ const MultiSelectTable = ({ props, variant, }) => {
             globalFilter,
         },
         onGlobalFilterChange: setGlobalFilter,
+        renderBottomToolbar: ({ table }) => {
+            const totalRows = table.getFilteredRowModel().rows.length;
+            const selectedCount = selectedValues.length;
+            return (jsxs(Box, { sx: {
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    padding: '6px 10px',
+                    borderTop: '1px solid #e0e0e0',
+                    fontSize: '11px',
+                }, children: [jsxs(Box, { children: ["Total: ", totalRows] }), jsxs(Box, { children: ["Selected: ", selectedCount] }), jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [jsx(IconButton, { size: "small", onClick: () => table.previousPage(), disabled: !table.getCanPreviousPage(), children: jsx(ChevronLeft, { fontSize: "small" }) }), jsxs("span", { children: ["Page ", table.getState().pagination.pageIndex + 1] }), jsx(IconButton, { size: "small", onClick: () => table.nextPage(), disabled: !table.getCanNextPage(), children: jsx(ChevronRight, { fontSize: "small" }) })] })] }));
+        },
     });
     return (jsx(Box, { children: jsxs(FormControl, { fullWidth: true, sx: {
                 '& .MuiFormLabel-root': {
@@ -334,9 +354,6 @@ const MultiSelectTable = ({ props, variant, }) => {
                 '& .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',

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

@@ -57,11 +57,15 @@ function MultiSelectV1({ props, variant, }) {
     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: () => {
-                        setSavedSortValue(fieldValue);
+                        if (!props.item.doNotEnableMultiselectOrder) {
+                            setSavedSortValue(fieldValue);
+                        }
                         setTimeout(() => textfieldRef.current?.focus(), 0);
                     }, onClose: () => {
                         setSearchText('');
-                        setSavedSortValue(fieldValue);
+                        if (!props.item.doNotEnableMultiselectOrder) {
+                            setSavedSortValue(fieldValue);
+                        }
                         props?.item?.onCloseMenu && props?.item?.onCloseMenu();
                     }, 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`
@@ -103,7 +107,7 @@ function MultiSelectV1({ props, variant, }) {
                                 } }) }), filterOptions.length !== 0 ? (filterOptions.map((option) => {
                             const selectedArray = fieldValue ? extractValuesToArray(fieldValue) : [];
                             const isChecked = selectedArray.includes(String(option.value));
-                            return (jsxs(MenuItem, { value: `${option.value}`, sx: {
+                            return (jsxs(MenuItem, { value: `${option.value}`, disabled: option.disable, sx: {
                                     whiteSpace: 'normal',
                                     wordBreak: 'break-all',
                                     alignItems: 'center',

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

@@ -49,7 +49,10 @@ const SingleSelect = ({ props, variant }) => {
                                             fontSize: '11px',
                                         },
                                     },
-                                }, renderOption: (props, option) => (createElement("li", { ...props, value: option.value, key: option.value }, option.label)), renderInput: (params) => (jsx(TextField, { ...params, placeholder: props.item.placeholder, error: isShowBorderError, label: variant !== 'standard'
+                                }, renderOption: (props, option) => (createElement("li", { ...props, value: option.value, style: {
+                                        opacity: option.disable ? 0.5 : 1,
+                                        pointerEvents: option.disable ? 'none' : 'auto',
+                                    }, key: option.value }, option.label)), renderInput: (params) => (jsx(TextField, { ...params, placeholder: props.item.placeholder, error: isShowBorderError, label: variant !== 'standard'
                                         ? `${props.item.label}${props.item.required ? ' *' : ''}`
                                         : '', inputProps: {
                                         ...params.inputProps,

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

@@ -23,7 +23,7 @@ const SingleSelectNonAutoComplete = ({ props, variant, }) => {
                     'aria-labelledby': `${props.item.name}-label`,
                     'aria-describedby': `${props.item.name}-helper ${props.item.name}-error`,
                     'aria-required': props.item.required ? true : undefined,
-                }, children: (props.item.options || []).map((item) => (jsx(MenuItem, { sx: {
+                }, children: (props.item.options || []).map((item) => (jsx(MenuItem, { disabled: item.disable, sx: {
                         fontSize: '11px', // Adjust the font size as needed
                         zIndex: 2000,
                     }, value: item.value, children: item.label }, item.value))) }), jsx(FormBottomField, { ...props })] }, props.item.name));

package/dist/components/SelectField/MultiSelectFieldComponent.d.ts

@@ -7,6 +7,7 @@ interface MultiSelectProps {
     onChangeFn: (e: any) => void;
     disable?: boolean;
     optionFontSize?: string;
+    donotEnableMultiselectOrder?: boolean;
 }
-export default function MultiSelectFieldComponent({ value, options, onChangeFn, disable, optionFontSize, }: MultiSelectProps): import("react/jsx-runtime").JSX.Element;
+export default function MultiSelectFieldComponent({ value, options, onChangeFn, disable, optionFontSize, donotEnableMultiselectOrder }: MultiSelectProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -15,7 +15,7 @@ const extractValuesToArray = (inputString) => {
     const trimmedArray = valuesArray?.map((value) => value.trim());
     return trimmedArray;
 };
-function MultiSelectFieldComponent({ value, options, onChangeFn, disable = false, optionFontSize = '13px', }) {
+function MultiSelectFieldComponent({ value, options, onChangeFn, disable = false, optionFontSize = '13px', donotEnableMultiselectOrder = false }) {
     const [personName, setPersonName] = React.useState(value ? extractValuesToArray(value) : []);
     const [searchText, setSearchText] = useState('');
     const [selectAll, setSelectAll] = useState(false);
@@ -68,7 +68,9 @@ function MultiSelectFieldComponent({ value, options, onChangeFn, disable = false
                         fontSize: '5px !important',
                     },
                 }, disabled: disable, value: value ? extractValuesToArray(value) : [], onChange: handleChange, onOpen: () => {
-                    setSavedSortValue(fieldValue);
+                    if (!donotEnableMultiselectOrder) {
+                        setSavedSortValue(fieldValue);
+                    }
                     setTimeout(() => {
                         if (textfieldRef.current) {
                             textfieldRef.current?.focus();
@@ -76,7 +78,9 @@ function MultiSelectFieldComponent({ value, options, onChangeFn, disable = false
                     }, 0);
                 }, onClose: () => {
                     setSearchText('');
-                    setSavedSortValue(fieldValue);
+                    if (!donotEnableMultiselectOrder) {
+                        setSavedSortValue(fieldValue);
+                    }
                 }, renderValue: () => (jsx(Tooltip, { title: selectedValues, children: jsx("span", { children: selectedOptions.length > 3 ? `${selectedOptions.length} Selected` : selectedValues }) })), MenuProps: {
                     PaperProps: {
                         style: {

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.esm4.js';
+import { __exports as Calendar } from '../../../../../_virtual/index.esm7.js';
 import React__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.esm11.js';
+import { __exports as DateInput } from '../../../../../_virtual/index.esm13.js';
 import React__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.esm4.js';
 import React__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.esm6.js';
 import React__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/DayCell/index.esm.js

@@ -1,4 +1,4 @@
-import { __exports as DayCell } from '../../../../../_virtual/index.esm13.js';
+import { __exports as DayCell } from '../../../../../_virtual/index.esm11.js';
 import React__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/DefinedRange/index.esm.js

@@ -1,4 +1,4 @@
-import { __exports as DefinedRange } from '../../../../../_virtual/index.esm6.js';
+import { __exports as DefinedRange } from '../../../../../_virtual/index.esm5.js';
 import React__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.esm12.js';
 import React__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.esm12.js';
+import { __exports as Month } from '../../../../../_virtual/index.esm14.js';
 import React__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 import { __require as requireDayCell } from '../DayCell/index.esm.js';

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

@@ -3,6 +3,7 @@ import { SxProps } from '@mui/material';
 export interface OptionsProps {
     label: string | boolean | number;
     value: string | number;
+    disable?: boolean;
 }
 export interface TextFieldInputProps {
     autoComplete: 'new-password' | 'off';
@@ -40,7 +41,7 @@ export interface FormSectionPropsItem {
     customErrorMessage?: string | null;
     sx?: SxProps<Theme>;
     donotAllowSpace?: boolean;
-    onInputProps?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    onInputProps?: (e: React.FocusEvent<HTMLInputElement> | any) => void;
     fileType?: 'excel' | 'pdf' | 'all' | 'zip' | 'image' | 'document' | '' | string[];
     handleFileError?: (message: string) => void;
     onCloseMenu?: () => void;
@@ -82,6 +83,7 @@ export interface FormSectionPropsItem {
     headerColor?: string;
     optionFontSize?: string;
     isTooltipEnable?: boolean;
+    doNotEnableMultiselectOrder?: boolean;
 }
 export type VariantProps = 'standard' | 'outlined' | '';
 export interface FormRenderProps {

package/package.json

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