tp-react-elements 1.1.5 → 1.1.8
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.esm4.js +2 -2
- package/dist/_virtual/index.esm7.js +2 -2
- package/dist/components/FormComponents/DatePicker/DatepickerWrapperV2.esm.js +2 -20
- package/dist/components/FormComponents/DatePicker/Monthpickerrender.esm.js +8 -27
- package/dist/components/FormComponents/FileUpload/FormRenderFileUpload.esm.js +1 -0
- package/dist/components/FormComponents/FileUpload/FormRenderMultiFileUpload.esm.js +1 -0
- package/dist/components/FormComponents/FileUpload/MultiFileWithPreview.esm.js +1 -0
- package/dist/components/FormComponents/FormTextField/FormTextField.styles.esm.js +11 -15
- package/dist/components/FormComponents/Select/MultiSelectAutocomplete.esm.js +3 -13
- package/dist/components/FormComponents/Select/MultiSelectTable.esm.js +1 -14
- package/dist/components/FormComponents/Select/SingleSelect.esm.js +2 -11
- package/dist/components/FormComponents/TimePicker/TimePicker.esm.js +1 -16
- 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/DateRangePicker/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 InputRangeField = {};
|
|
2
2
|
|
|
3
|
-
export {
|
|
3
|
+
export { InputRangeField as __exports };
|
|
@@ -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 DateRange = {};
|
|
2
2
|
|
|
3
|
-
export {
|
|
3
|
+
export { DateRange as __exports };
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
var
|
|
1
|
+
var DateRangePicker = {};
|
|
2
2
|
|
|
3
|
-
export {
|
|
3
|
+
export { DateRangePicker as __exports };
|
|
@@ -47,42 +47,24 @@ const DatepickerWrapperV2 = ({ props, variant, }) => {
|
|
|
47
47
|
props?.clearErrors && props?.clearErrors(props.item.name);
|
|
48
48
|
}, slotProps: {
|
|
49
49
|
textField: {
|
|
50
|
-
size: 'small',
|
|
51
50
|
onClick: () => handleToggle(),
|
|
52
51
|
inputRef: inputTextRef,
|
|
53
52
|
onBlur: (e) => {
|
|
54
53
|
props?.item?.onBlurFn && props?.item?.onBlurFn(e);
|
|
55
54
|
},
|
|
56
55
|
inputProps: {
|
|
57
|
-
|
|
58
|
-
fontSize: '11px',
|
|
59
|
-
},
|
|
56
|
+
input: { cursor: 'pointer' },
|
|
60
57
|
'aria-labelledby': `${props.item.name}-label`,
|
|
61
58
|
'aria-describedby': `${props.item.name}-helper ${props.item.name}-error`,
|
|
62
59
|
'aria-required': props.item.required ? true : undefined,
|
|
63
60
|
},
|
|
64
61
|
error: isShowBorderError,
|
|
65
62
|
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
|
-
},
|
|
79
63
|
'& .MuiFormLabel-root': {
|
|
80
|
-
top: -
|
|
81
|
-
fontSize: '11px',
|
|
64
|
+
top: -10,
|
|
82
65
|
},
|
|
83
66
|
'& .MuiInputLabel-shrink': {
|
|
84
67
|
top: 0,
|
|
85
|
-
fontSize: '11px',
|
|
86
68
|
},
|
|
87
69
|
},
|
|
88
70
|
},
|
|
@@ -39,47 +39,28 @@ 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
|
-
},
|
|
66
42
|
},
|
|
67
43
|
}, disableOpenPicker: props.item.disable, open: open, onOpen: handleToggle, onClose: handleToggle, defaultValue: field.value, onChange: (date) => {
|
|
68
44
|
const formatted = dayjs(date).format('MM/YYYY');
|
|
69
45
|
field.onChange(formatted);
|
|
70
46
|
props.setValue(props.item.name, formatted);
|
|
71
47
|
}, sx: {
|
|
72
|
-
'& .
|
|
73
|
-
|
|
48
|
+
'& .css-1holvmy,.css-kichxs-MuiFormLabel-root-MuiInputLabel-root': {
|
|
49
|
+
top: '-10px',
|
|
74
50
|
},
|
|
75
51
|
'& input': {
|
|
76
52
|
paddingRight: '0px !important',
|
|
77
|
-
fontSize: '11px',
|
|
78
53
|
},
|
|
79
54
|
'& button': {
|
|
80
55
|
paddingLeft: '0px !important',
|
|
81
56
|
paddingRight: '0px !important',
|
|
82
57
|
},
|
|
58
|
+
'& .MuiFormLabel-root': {
|
|
59
|
+
top: -10,
|
|
60
|
+
},
|
|
61
|
+
'& .MuiInputLabel-shrink': {
|
|
62
|
+
top: 0,
|
|
63
|
+
},
|
|
83
64
|
}, 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: {
|
|
84
65
|
fontSize: '11px',
|
|
85
66
|
color: '#3651d3',
|
|
@@ -87,6 +87,7 @@ const FormRenderFileUpload = ({ props, variant, }) => {
|
|
|
87
87
|
console.log(props.item?.name, ':props.item?.name');
|
|
88
88
|
props.setValue(props.item?.name, file);
|
|
89
89
|
props.setValue(props.item?.name + 'Name', fileName);
|
|
90
|
+
props.clearErrors(props.item?.name);
|
|
90
91
|
props.item.onChangeSetFileFn &&
|
|
91
92
|
props.item.onChangeSetFileFn(file);
|
|
92
93
|
}, sx: { width: '100%' } })] }), jsx(FormBottomField, { ...props })] }));
|
|
@@ -97,6 +97,7 @@ const FormRenderMultiFileUpload = ({ props, variant, }) => {
|
|
|
97
97
|
const fileArray = Array.from(file);
|
|
98
98
|
props.setValue(props.item?.name, fileName);
|
|
99
99
|
props.setValue(props.item?.name + 'File', fileArray);
|
|
100
|
+
props.clearErrors(props.item?.name);
|
|
100
101
|
}, sx: { width: '100%' } })] }), jsx(FormBottomField, { ...props })] }));
|
|
101
102
|
};
|
|
102
103
|
|
|
@@ -158,6 +158,7 @@ const MultiFileWithPreview = ({ props, variant, }) => {
|
|
|
158
158
|
.join(',');
|
|
159
159
|
props.setValue(props.item.name, combinedFileNames);
|
|
160
160
|
props.setValue(props.item.name + 'File', combinedFiles);
|
|
161
|
+
props.clearErrors(props.item.name);
|
|
161
162
|
setSelectedFiles(combinedFiles);
|
|
162
163
|
setCurrentFileIndex(combinedFiles.length - fileArray.length); // move preview to new
|
|
163
164
|
props.item.onChangeSetFileFn?.(combinedFiles);
|
|
@@ -11,21 +11,17 @@ 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
|
-
|
|
25
|
-
'& .MuiInputLabel-shrink': {
|
|
26
|
-
top: 0,
|
|
27
|
-
fontSize: '11px',
|
|
28
|
-
},
|
|
14
|
+
// '& .MuiFormLabel-root': {
|
|
15
|
+
// top: '-10px',
|
|
16
|
+
// },
|
|
17
|
+
// '& .MuiInputBase-root.MuiOutlinedInput-root input': {
|
|
18
|
+
// outline: 'none',
|
|
19
|
+
// border: '1px solid #ced4da',
|
|
20
|
+
// },
|
|
21
|
+
// '& .MuiInputBase-root.MuiOutlinedInput-root input:focus': {
|
|
22
|
+
// outline: 'none',
|
|
23
|
+
// border: 'none',
|
|
24
|
+
// },
|
|
29
25
|
}));
|
|
30
26
|
|
|
31
27
|
export { FormTextFieldComponent };
|
|
@@ -194,25 +194,15 @@ 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
|
-
},
|
|
201
197
|
'& .MuiAutocomplete-input': {
|
|
202
198
|
padding: '0px 0px 0px 5px !important',
|
|
203
199
|
},
|
|
204
200
|
'& .MuiAutocomplete-inputRoot': {
|
|
205
201
|
flexWrap: 'nowrap', // keep search beside chip
|
|
206
|
-
alignItems: 'center'
|
|
207
|
-
padding: '2px 4px',
|
|
202
|
+
alignItems: 'center'
|
|
208
203
|
},
|
|
209
|
-
'& .MuiFormLabel-root': {
|
|
210
|
-
top: -
|
|
211
|
-
fontSize: '11px',
|
|
212
|
-
},
|
|
213
|
-
'& .MuiInputLabel-shrink': {
|
|
214
|
-
top: 0,
|
|
215
|
-
fontSize: '11px',
|
|
204
|
+
'& .css-erkti9-MuiFormLabel-root-MuiInputLabel-root,.css-8edmr2-MuiFormLabel-root-MuiInputLabel-root': {
|
|
205
|
+
top: '-3px',
|
|
216
206
|
},
|
|
217
207
|
'& .MuiAutocomplete-option': {
|
|
218
208
|
fontSize: '11px',
|
|
@@ -338,21 +338,8 @@ const MultiSelectTable = ({ props, variant, }) => {
|
|
|
338
338
|
padding: '0px !important'
|
|
339
339
|
}
|
|
340
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
|
-
},
|
|
346
341
|
'& .MuiTypography-root': {
|
|
347
|
-
fontSize: '
|
|
348
|
-
},
|
|
349
|
-
'& .MuiFormLabel-root': {
|
|
350
|
-
top: -7,
|
|
351
|
-
fontSize: '11px',
|
|
352
|
-
},
|
|
353
|
-
'& .MuiInputLabel-shrink': {
|
|
354
|
-
top: 0,
|
|
355
|
-
fontSize: '11px',
|
|
342
|
+
fontSize: '5px !important',
|
|
356
343
|
},
|
|
357
344
|
}, error: isShowBorderError, disabled: props.item.disable, value: selectedValues, displayEmpty: true, inputProps: {
|
|
358
345
|
'aria-labelledby': `${props.item.name}-label`,
|
|
@@ -21,20 +21,11 @@ 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
|
-
},
|
|
28
24
|
'& .MuiAutocomplete-input': {
|
|
29
25
|
padding: '0px 0px 0px 5px !important',
|
|
30
26
|
},
|
|
31
|
-
'& .MuiFormLabel-root': {
|
|
32
|
-
top: -
|
|
33
|
-
fontSize: '11px',
|
|
34
|
-
},
|
|
35
|
-
'& .MuiInputLabel-shrink': {
|
|
36
|
-
top: 0,
|
|
37
|
-
fontSize: '11px',
|
|
27
|
+
'& .css-erkti9-MuiFormLabel-root-MuiInputLabel-root,.css-8edmr2-MuiFormLabel-root-MuiInputLabel-root': {
|
|
28
|
+
top: '-3px',
|
|
38
29
|
},
|
|
39
30
|
// Note: Options are rendered in a portal; keep this as a fallback only
|
|
40
31
|
'& .MuiAutocomplete-option': {
|
|
@@ -56,26 +56,11 @@ 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
|
-
},
|
|
72
59
|
'& .MuiFormLabel-root': {
|
|
73
|
-
top: -
|
|
74
|
-
fontSize: '11px',
|
|
60
|
+
top: -3,
|
|
75
61
|
},
|
|
76
62
|
'& .MuiInputLabel-shrink': {
|
|
77
63
|
top: 0,
|
|
78
|
-
fontSize: '11px',
|
|
79
64
|
},
|
|
80
65
|
},
|
|
81
66
|
},
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { __exports as DateInput } from '../../../../../_virtual/index.
|
|
1
|
+
import { __exports as DateInput } 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
|
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.esm4.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 DateRangePicker } from '../../../../../_virtual/index.
|
|
1
|
+
import { __exports as DateRangePicker } 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 requireDateRange } from '../DateRange/index.esm.js';
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { __exports as InputRangeField } from '../../../../../_virtual/index.
|
|
1
|
+
import { __exports as InputRangeField } 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
|
|