tp-react-elements 1.1.3 → 1.1.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/_virtual/index.esm12.js +2 -2
- package/dist/_virtual/index.esm13.js +2 -2
- package/dist/_virtual/index.esm5.js +2 -2
- package/dist/_virtual/index.esm7.js +2 -2
- package/dist/components/FormComponents/DatePicker/DatepickerWrapperV2.esm.js +24 -5
- package/dist/components/FormComponents/DatePicker/Monthpickerrender.esm.js +27 -8
- package/dist/components/FormComponents/FormTextField/FormTextField.styles.esm.js +15 -11
- package/dist/components/FormComponents/Select/MultiSelectAutocomplete.esm.js +13 -3
- package/dist/components/FormComponents/Select/MultiSelectTable.esm.js +26 -7
- package/dist/components/FormComponents/Select/SingleSelect.esm.js +11 -2
- package/dist/components/FormComponents/TimePicker/TimePicker.esm.js +16 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.esm.js +1 -0
- package/dist/node_modules/react-date-range/dist/components/Calendar/index.esm.js +1 -1
- package/dist/node_modules/react-date-range/dist/components/DateInput/index.esm.js +1 -1
- package/dist/node_modules/react-date-range/dist/components/DateRange/index.esm.js +1 -1
- package/dist/node_modules/react-date-range/dist/components/InputRangeField/index.esm.js +1 -1
- package/package.json +1 -1
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
var
|
|
1
|
+
var DateInput = {};
|
|
2
2
|
|
|
3
|
-
export {
|
|
3
|
+
export { DateInput as __exports };
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
var
|
|
1
|
+
var InputRangeField = {};
|
|
2
2
|
|
|
3
|
-
export {
|
|
3
|
+
export { InputRangeField as __exports };
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
var
|
|
1
|
+
var Calendar = {};
|
|
2
2
|
|
|
3
|
-
export {
|
|
3
|
+
export { Calendar as __exports };
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
var
|
|
1
|
+
var DateRange = {};
|
|
2
2
|
|
|
3
|
-
export {
|
|
3
|
+
export { DateRange as __exports };
|
|
@@ -41,29 +41,48 @@ const DatepickerWrapperV2 = ({ props, variant, }) => {
|
|
|
41
41
|
? dayjs(field.value, props.item.DateFormat || 'DD/MM/YYYY')
|
|
42
42
|
: dayjs(field.value)
|
|
43
43
|
: null, className: 'read-only', format: props.item.DateFormat || 'DD/MM/YYYY', open: open, onOpen: handleToggle, onClose: handleToggle, minDate: props?.item?.minDate ? dayjs(props?.item?.minDate, props.item.DateFormat || 'DD/MM/YYYY') : undefined, maxDate: props?.item?.maxDate ? dayjs(props?.item?.maxDate, props.item.DateFormat || 'DD/MM/YYYY') : undefined, disabled: props.item.disable || false, onChange: (date) => {
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
44
|
+
const formattedDate = dayjs(date).format(props.item.DateFormat || 'DD/MM/YYYY');
|
|
45
|
+
field.onChange(formattedDate);
|
|
46
|
+
props?.item?.onChangeFn && props?.item?.onChangeFn(formattedDate);
|
|
47
|
+
props?.clearErrors && props?.clearErrors(props.item.name);
|
|
47
48
|
}, slotProps: {
|
|
48
49
|
textField: {
|
|
50
|
+
size: 'small',
|
|
49
51
|
onClick: () => handleToggle(),
|
|
50
52
|
inputRef: inputTextRef,
|
|
51
53
|
onBlur: (e) => {
|
|
52
54
|
props?.item?.onBlurFn && props?.item?.onBlurFn(e);
|
|
53
55
|
},
|
|
54
56
|
inputProps: {
|
|
55
|
-
|
|
57
|
+
sx: {
|
|
58
|
+
fontSize: '11px',
|
|
59
|
+
},
|
|
56
60
|
'aria-labelledby': `${props.item.name}-label`,
|
|
57
61
|
'aria-describedby': `${props.item.name}-helper ${props.item.name}-error`,
|
|
58
62
|
'aria-required': props.item.required ? true : undefined,
|
|
59
63
|
},
|
|
60
64
|
error: isShowBorderError,
|
|
61
65
|
sx: {
|
|
66
|
+
'& .MuiInputBase-root': {
|
|
67
|
+
height: '32px',
|
|
68
|
+
'& input': {
|
|
69
|
+
padding: '4px 0',
|
|
70
|
+
fontSize: '11px',
|
|
71
|
+
},
|
|
72
|
+
'& .MuiIconButton-root': {
|
|
73
|
+
padding: '4px',
|
|
74
|
+
'& svg': {
|
|
75
|
+
fontSize: '18px',
|
|
76
|
+
},
|
|
77
|
+
},
|
|
78
|
+
},
|
|
62
79
|
'& .MuiFormLabel-root': {
|
|
63
|
-
top: -
|
|
80
|
+
top: -7,
|
|
81
|
+
fontSize: '11px',
|
|
64
82
|
},
|
|
65
83
|
'& .MuiInputLabel-shrink': {
|
|
66
84
|
top: 0,
|
|
85
|
+
fontSize: '11px',
|
|
67
86
|
},
|
|
68
87
|
},
|
|
69
88
|
},
|
|
@@ -39,28 +39,47 @@ const Monthpickerrender = ({ props, variant, }) => {
|
|
|
39
39
|
onClick: () => handleToggle(),
|
|
40
40
|
inputRef: ref,
|
|
41
41
|
error: isShowBorderError,
|
|
42
|
+
size: 'small',
|
|
43
|
+
sx: {
|
|
44
|
+
'& .MuiInputBase-root': {
|
|
45
|
+
height: '32px',
|
|
46
|
+
'& input': {
|
|
47
|
+
padding: '4px 0',
|
|
48
|
+
fontSize: '11px',
|
|
49
|
+
},
|
|
50
|
+
'& .MuiIconButton-root': {
|
|
51
|
+
padding: '4px',
|
|
52
|
+
'& svg': {
|
|
53
|
+
fontSize: '18px',
|
|
54
|
+
},
|
|
55
|
+
},
|
|
56
|
+
},
|
|
57
|
+
'& .MuiFormLabel-root': {
|
|
58
|
+
top: -7,
|
|
59
|
+
fontSize: '11px',
|
|
60
|
+
},
|
|
61
|
+
'& .MuiInputLabel-shrink': {
|
|
62
|
+
top: 0,
|
|
63
|
+
fontSize: '11px',
|
|
64
|
+
},
|
|
65
|
+
},
|
|
42
66
|
},
|
|
43
67
|
}, disableOpenPicker: props.item.disable, open: open, onOpen: handleToggle, onClose: handleToggle, defaultValue: field.value, onChange: (date) => {
|
|
44
68
|
const formatted = dayjs(date).format('MM/YYYY');
|
|
45
69
|
field.onChange(formatted);
|
|
46
70
|
props.setValue(props.item.name, formatted);
|
|
47
71
|
}, sx: {
|
|
48
|
-
'& .
|
|
49
|
-
|
|
72
|
+
'& .MuiInputBase-root': {
|
|
73
|
+
height: '32px',
|
|
50
74
|
},
|
|
51
75
|
'& input': {
|
|
52
76
|
paddingRight: '0px !important',
|
|
77
|
+
fontSize: '11px',
|
|
53
78
|
},
|
|
54
79
|
'& button': {
|
|
55
80
|
paddingLeft: '0px !important',
|
|
56
81
|
paddingRight: '0px !important',
|
|
57
82
|
},
|
|
58
|
-
'& .MuiFormLabel-root': {
|
|
59
|
-
top: -10,
|
|
60
|
-
},
|
|
61
|
-
'& .MuiInputLabel-shrink': {
|
|
62
|
-
top: 0,
|
|
63
|
-
},
|
|
64
83
|
}, minDate: props.item.minDate ? dayjs(props.item.minDate, 'MM/YYYY') : undefined, maxDate: props.item.maxDate ? dayjs(props.item.maxDate, 'MM/YYYY') : undefined })] }), props?.item?.helperText && (jsxs("span", { style: {
|
|
65
84
|
fontSize: '11px',
|
|
66
85
|
color: '#3651d3',
|
|
@@ -11,17 +11,21 @@ import { TextField } from '@mui/material';
|
|
|
11
11
|
* @component
|
|
12
12
|
*/
|
|
13
13
|
const FormTextFieldComponent = styled(TextField)(() => ({
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
14
|
+
'& .MuiInputBase-root': {
|
|
15
|
+
height: '32px',
|
|
16
|
+
fontSize: '11px',
|
|
17
|
+
},
|
|
18
|
+
'& .MuiInputBase-input': {
|
|
19
|
+
padding: '4px 8px',
|
|
20
|
+
},
|
|
21
|
+
'& .MuiFormLabel-root': {
|
|
22
|
+
top: -7,
|
|
23
|
+
fontSize: '11px',
|
|
24
|
+
},
|
|
25
|
+
'& .MuiInputLabel-shrink': {
|
|
26
|
+
top: 0,
|
|
27
|
+
fontSize: '11px',
|
|
28
|
+
},
|
|
25
29
|
}));
|
|
26
30
|
|
|
27
31
|
export { FormTextFieldComponent };
|
|
@@ -194,15 +194,25 @@ const MultiSelectAutocomplete = ({ props, variant, }) => {
|
|
|
194
194
|
},
|
|
195
195
|
display: 'flex', flexWrap: 'nowrap', overflow: 'hidden', alignItems: 'center'
|
|
196
196
|
}, children: isOverflowing ? (jsx(Tooltip, { title: selectedTooltip, placement: "top", children: jsx(Chip, { size: "small", label: `${tagValue.length} selected`, onClick: () => setOpen(true), clickable: true, sx: chipSx }) })) : (tagValue.map((option, index) => (jsx(Tooltip, { title: String(option?.label ?? option), placement: "top", children: jsx(Chip, { ...getTagProps({ index }), size: "small", label: String(option?.label ?? option), sx: chipSx }) }, String(option?.value ?? option?.label ?? index))))) })), renderOption: renderOptionCb, sx: {
|
|
197
|
+
'& .MuiInputBase-root': {
|
|
198
|
+
minHeight: '32px',
|
|
199
|
+
fontSize: '11px',
|
|
200
|
+
},
|
|
197
201
|
'& .MuiAutocomplete-input': {
|
|
198
202
|
padding: '0px 0px 0px 5px !important',
|
|
199
203
|
},
|
|
200
204
|
'& .MuiAutocomplete-inputRoot': {
|
|
201
205
|
flexWrap: 'nowrap', // keep search beside chip
|
|
202
|
-
alignItems: 'center'
|
|
206
|
+
alignItems: 'center',
|
|
207
|
+
padding: '2px 4px',
|
|
203
208
|
},
|
|
204
|
-
'& .
|
|
205
|
-
top:
|
|
209
|
+
'& .MuiFormLabel-root': {
|
|
210
|
+
top: -7,
|
|
211
|
+
fontSize: '11px',
|
|
212
|
+
},
|
|
213
|
+
'& .MuiInputLabel-shrink': {
|
|
214
|
+
top: 0,
|
|
215
|
+
fontSize: '11px',
|
|
206
216
|
},
|
|
207
217
|
'& .MuiAutocomplete-option': {
|
|
208
218
|
fontSize: '11px',
|
|
@@ -37,7 +37,7 @@ const MultiSelectTable = ({ props, variant, }) => {
|
|
|
37
37
|
};
|
|
38
38
|
const [globalFilter, setGlobalFilter] = useState('');
|
|
39
39
|
const tableRef = useRef(null);
|
|
40
|
-
const fieldValue = useWatch({ control: props.control, name: props.item.name });
|
|
40
|
+
const fieldValue = useWatch({ control: props.control, name: props.item.name }) ?? [];
|
|
41
41
|
const isError = !!props.errors?.[props.item.name];
|
|
42
42
|
const isShowBorderError = isError;
|
|
43
43
|
// Get columns and rows from form item
|
|
@@ -49,18 +49,24 @@ const MultiSelectTable = ({ props, variant, }) => {
|
|
|
49
49
|
const placeholder = props.item.placeholder || 'None selected';
|
|
50
50
|
// Get selected rows (handles both array of objects and legacy string format)
|
|
51
51
|
const selectedRows = useMemo(() => {
|
|
52
|
-
if (!fieldValue)
|
|
52
|
+
if (!fieldValue || (Array.isArray(fieldValue) && fieldValue.length === 0)) {
|
|
53
53
|
return [];
|
|
54
|
+
}
|
|
54
55
|
// If fieldValue is already an array of objects, use it directly
|
|
55
56
|
if (Array.isArray(fieldValue)) {
|
|
56
57
|
return fieldValue;
|
|
57
58
|
}
|
|
58
59
|
// Legacy: handle comma-separated string of IDs
|
|
59
|
-
|
|
60
|
-
|
|
60
|
+
if (typeof fieldValue === 'string') {
|
|
61
|
+
const ids = extractValuesToArray(fieldValue);
|
|
62
|
+
return rows.filter((row) => ids.includes(String(row[valueField])));
|
|
63
|
+
}
|
|
64
|
+
return [];
|
|
61
65
|
}, [fieldValue, rows, valueField]);
|
|
62
66
|
// Get selected values as array of IDs for checkbox state
|
|
63
67
|
const selectedValues = useMemo(() => {
|
|
68
|
+
if (!selectedRows)
|
|
69
|
+
return [];
|
|
64
70
|
return selectedRows.map((row) => String(row[valueField]));
|
|
65
71
|
}, [selectedRows, valueField]);
|
|
66
72
|
// Display text for selected items
|
|
@@ -87,7 +93,7 @@ const MultiSelectTable = ({ props, variant, }) => {
|
|
|
87
93
|
newSelectedRows = selectedRows;
|
|
88
94
|
}
|
|
89
95
|
}
|
|
90
|
-
props.setValue(props.item.name, newSelectedRows);
|
|
96
|
+
props.setValue(props.item.name, newSelectedRows, { shouldValidate: true, shouldDirty: true });
|
|
91
97
|
props?.item?.onChangeFn && props?.item?.onChangeFn(newSelectedRows);
|
|
92
98
|
props?.clearErrors && props?.clearErrors(props.item.name);
|
|
93
99
|
}, [selectedValues, selectedRows, rows, props, valueField]);
|
|
@@ -113,7 +119,7 @@ const MultiSelectTable = ({ props, variant, }) => {
|
|
|
113
119
|
.filter((row) => !currentIds.has(String(row[valueField])));
|
|
114
120
|
newSelectedRows = [...selectedRows, ...rowsToAdd];
|
|
115
121
|
}
|
|
116
|
-
props.setValue(props.item.name, newSelectedRows);
|
|
122
|
+
props.setValue(props.item.name, newSelectedRows, { shouldValidate: true, shouldDirty: true });
|
|
117
123
|
props?.item?.onChangeFn && props?.item?.onChangeFn(newSelectedRows);
|
|
118
124
|
}, [selectedValues, selectedRows, props, valueField]);
|
|
119
125
|
// Calculate select all state based on filtered rows
|
|
@@ -332,8 +338,21 @@ const MultiSelectTable = ({ props, variant, }) => {
|
|
|
332
338
|
padding: '0px !important'
|
|
333
339
|
}
|
|
334
340
|
}, 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: {
|
|
341
|
+
height: '32px',
|
|
342
|
+
fontSize: '11px',
|
|
343
|
+
'& .MuiSelect-select': {
|
|
344
|
+
padding: '4px 8px',
|
|
345
|
+
},
|
|
335
346
|
'& .MuiTypography-root': {
|
|
336
|
-
fontSize: '
|
|
347
|
+
fontSize: '11px !important',
|
|
348
|
+
},
|
|
349
|
+
'& .MuiFormLabel-root': {
|
|
350
|
+
top: -7,
|
|
351
|
+
fontSize: '11px',
|
|
352
|
+
},
|
|
353
|
+
'& .MuiInputLabel-shrink': {
|
|
354
|
+
top: 0,
|
|
355
|
+
fontSize: '11px',
|
|
337
356
|
},
|
|
338
357
|
}, error: isShowBorderError, disabled: props.item.disable, value: selectedValues, displayEmpty: true, inputProps: {
|
|
339
358
|
'aria-labelledby': `${props.item.name}-label`,
|
|
@@ -21,11 +21,20 @@ const SingleSelect = ({ props, variant }) => {
|
|
|
21
21
|
}, onBlur: (e) => {
|
|
22
22
|
props?.item?.onBlurFn && props?.item?.onBlurFn(e);
|
|
23
23
|
}, size: "small", sx: {
|
|
24
|
+
'& .MuiInputBase-root': {
|
|
25
|
+
height: '32px',
|
|
26
|
+
fontSize: '11px',
|
|
27
|
+
},
|
|
24
28
|
'& .MuiAutocomplete-input': {
|
|
25
29
|
padding: '0px 0px 0px 5px !important',
|
|
26
30
|
},
|
|
27
|
-
'& .
|
|
28
|
-
top:
|
|
31
|
+
'& .MuiFormLabel-root': {
|
|
32
|
+
top: -7,
|
|
33
|
+
fontSize: '11px',
|
|
34
|
+
},
|
|
35
|
+
'& .MuiInputLabel-shrink': {
|
|
36
|
+
top: 0,
|
|
37
|
+
fontSize: '11px',
|
|
29
38
|
},
|
|
30
39
|
// Note: Options are rendered in a portal; keep this as a fallback only
|
|
31
40
|
'& .MuiAutocomplete-option': {
|
|
@@ -56,11 +56,26 @@ function TimePickerFieldWrapper({ props, variant, }) {
|
|
|
56
56
|
'aria-required': props.item.required ? true : undefined,
|
|
57
57
|
},
|
|
58
58
|
sx: {
|
|
59
|
+
'& .MuiInputBase-root': {
|
|
60
|
+
height: '32px',
|
|
61
|
+
'& input': {
|
|
62
|
+
padding: '4px 0',
|
|
63
|
+
fontSize: '11px',
|
|
64
|
+
},
|
|
65
|
+
'& .MuiIconButton-root': {
|
|
66
|
+
padding: '4px',
|
|
67
|
+
'& svg': {
|
|
68
|
+
fontSize: '18px',
|
|
69
|
+
},
|
|
70
|
+
},
|
|
71
|
+
},
|
|
59
72
|
'& .MuiFormLabel-root': {
|
|
60
|
-
top: -
|
|
73
|
+
top: -7,
|
|
74
|
+
fontSize: '11px',
|
|
61
75
|
},
|
|
62
76
|
'& .MuiInputLabel-shrink': {
|
|
63
77
|
top: 0,
|
|
78
|
+
fontSize: '11px',
|
|
64
79
|
},
|
|
65
80
|
},
|
|
66
81
|
},
|
package/dist/index.d.ts
CHANGED
|
@@ -4,6 +4,7 @@ export { default as ModalField } from './components/ModalField/ModalField';
|
|
|
4
4
|
export { default as DeleteField } from './components/DeleteComponent/DeleteField';
|
|
5
5
|
export { default as SessionTimeoutField } from './components/SessionTimeOut/SessionTimeOut';
|
|
6
6
|
export { default as useFormValidatingContext } from './components/Form/FormConstants';
|
|
7
|
+
export { default as MultiSelectFieldComponent } from './components/SelectField/MultiSelectFieldComponent';
|
|
7
8
|
export { TPElementsProvider } from './auth/authContext';
|
|
8
9
|
export { calculateTotalArrayValueTotal, checkIsDateIsBefore, findMenuHierarchy, getDesiredDate, getFormattedDate, getInitials, getUsernameFromEmail, handleDownloadReactTableDataExcel, lightenColor, } from './utils';
|
|
9
10
|
export * as Utils from './utils';
|
package/dist/index.esm.js
CHANGED
|
@@ -4,6 +4,7 @@ export { default as ModalField } from './components/ModalField/ModalField.esm.js
|
|
|
4
4
|
export { default as DeleteField } from './components/DeleteComponent/DeleteField.esm.js';
|
|
5
5
|
export { default as SessionTimeoutField } from './components/SessionTimeOut/SessionTimeOut.esm.js';
|
|
6
6
|
export { default as useFormValidatingContext } from './components/Form/FormConstants.esm.js';
|
|
7
|
+
export { default as MultiSelectFieldComponent } from './components/SelectField/MultiSelectFieldComponent.esm.js';
|
|
7
8
|
export { TPElementsProvider } from './auth/authContext.esm.js';
|
|
8
9
|
import * as index$1 from './utils/index.esm.js';
|
|
9
10
|
export { index$1 as Utils };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { __exports as Calendar } from '../../../../../_virtual/index.
|
|
1
|
+
import { __exports as Calendar } from '../../../../../_virtual/index.esm5.js';
|
|
2
2
|
import require$$0__default from 'react';
|
|
3
3
|
import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
|
|
4
4
|
import { __require as requireDayCell } from '../DayCell/index.esm.js';
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { __exports as DateInput } from '../../../../../_virtual/index.
|
|
1
|
+
import { __exports as DateInput } from '../../../../../_virtual/index.esm12.js';
|
|
2
2
|
import require$$0__default from 'react';
|
|
3
3
|
import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
|
|
4
4
|
import { __require as requireClassnames } from '../../../../classnames/index.esm.js';
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { __exports as DateRange } from '../../../../../_virtual/index.
|
|
1
|
+
import { __exports as DateRange } from '../../../../../_virtual/index.esm7.js';
|
|
2
2
|
import require$$0__default from 'react';
|
|
3
3
|
import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
|
|
4
4
|
import { __require as requireCalendar } from '../Calendar/index.esm.js';
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { __exports as InputRangeField } from '../../../../../_virtual/index.
|
|
1
|
+
import { __exports as InputRangeField } from '../../../../../_virtual/index.esm13.js';
|
|
2
2
|
import require$$0__default from 'react';
|
|
3
3
|
import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
|
|
4
4
|
|