tp-react-elements-dev 1.12.31 → 1.12.32

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.
Files changed (10) hide show
  1. package/dist/components/FormComponents/FileUpload/FormRenderFileUpload.esm.js +19 -21
  2. package/dist/components/FormComponents/FileUpload/FormRenderMultiFileUpload.esm.js +1 -0
  3. package/dist/components/FormComponents/FormBottomField/FormBottomField.esm.js +4 -1
  4. package/dist/components/FormComponents/FormNumberField/FormNumberField.esm.js +4 -0
  5. package/dist/components/FormComponents/FormTextField/FormTextField.esm.js +1 -1
  6. package/dist/components/FormComponents/HelperText/HelperText.esm.js +1 -1
  7. package/dist/components/FormComponents/Select/MultiSelectAutocomplete.esm.js +20 -8
  8. package/dist/components/FormComponents/Select/SingleSelectNonAutoComplete.esm.js +1 -1
  9. package/dist/utils/Interface/FormInterface.d.ts +5 -1
  10. package/package.json +1 -1
package/dist/components/FormComponents/FileUpload/FormRenderFileUpload.esm.js CHANGED
@@ -17,35 +17,30 @@ const FormRenderFileUpload = ({ props, variant, }) => {
17
17
  inputRef.current.value = '';
18
18
  }
19
19
  }, [watched]);
20
+ const extensionMap = {
21
+ excel: ['xls', 'xlsx'],
22
+ pdf: ['pdf'],
23
+ zip: ['zip'],
24
+ image: ['jpg', 'jpeg', 'png'],
25
+ document: ['doc', 'docx', 'pdf'],
26
+ all: ['pdf', 'jpg', 'jpeg', 'png', 'xls', 'xlsx', 'doc', 'docx', 'zip'],
27
+ };
28
+ const accept = props.item.fileType && extensionMap[props.item.fileType]
29
+ ? extensionMap[props.item.fileType].map((ext) => `.${ext}`).join(',')
30
+ : '';
20
31
  return (jsxs(Fragment, { children: [jsxs(Box, { paddingLeft: '4px', sx: { ...props.item.sx }, children: [props.item?.label && (jsx(Box, { sx: { fontSize: '10px;' }, children: renderLabel(variant, props, true) })), jsx(TextField, { type: "file", id: props.item.name, error: isShowBorderError, inputRef: inputRef, inputProps: {
21
- accept: props.item.fileType === 'excel'
22
- ? '.xls, .xlsx'
23
- : props.item.fileType === 'pdf'
24
- ? '.pdf'
25
- : props.item.fileType === 'zip'
26
- ? '.zip'
27
- : props.item.fileType === 'all'
28
- ? '.pdf,.jpg,.jpeg,.png,.xls,.xlsx,.doc,.docx,.zip'
29
- : '',
32
+ accept,
30
33
  'aria-labelledby': `${props.item.name}-label`,
31
34
  'aria-describedby': `${props.item.name}-helper ${props.item.name}-error`,
32
35
  'aria-required': props.item.required ? true : undefined,
33
36
  }, onChange: (event) => {
34
37
  const file = event.target?.files[0];
35
38
  const fileName = file ? file.name : null;
36
- const allowedExtensions = {
37
- excel: ['xls', 'xlsx'],
38
- pdf: ['pdf'],
39
- zip: ['zip'],
40
- all: ['pdf', 'jpg', 'jpeg', 'png', 'xls', 'xlsx', 'doc', 'docx', 'zip'],
41
- image: ['jpg', 'jpeg', 'png'],
42
- };
39
+ const allowedExtensions = extensionMap;
43
40
  const fileExtension = fileName ? fileName.split('.').pop().toLowerCase() : null;
44
- const validExtensions = props.item.fileType === 'excel'
45
- ? allowedExtensions.excel
46
- : props.item.fileType === 'pdf'
47
- ? allowedExtensions.pdf
48
- : allowedExtensions.all;
41
+ const validExtensions = props.item.fileType && allowedExtensions[props.item.fileType]
42
+ ? allowedExtensions[props.item.fileType]
43
+ : allowedExtensions.all;
49
44
  if (props.item?.fileType && fileExtension && !validExtensions.includes(fileExtension)) {
50
45
  props.item?.handleFileError &&
51
46
  props.item?.handleFileError(`Please upload ${allowedExtensions[props.item.fileType].join(', ')} files only`);
@@ -63,8 +58,11 @@ const FormRenderFileUpload = ({ props, variant, }) => {
63
58
  props.setValue(props.item?.name + 'Name', '');
64
59
  return;
65
60
  }
61
+ console.log(props.item?.name, ':props.item?.name');
66
62
  props.setValue(props.item?.name, file);
67
63
  props.setValue(props.item?.name + 'Name', fileName);
64
+ props.item.onChangeSetFileFn &&
65
+ props.item.onChangeSetFileFn(file);
68
66
  }, sx: { width: '100%' } })] }), jsx(FormBottomField, { ...props })] }));
69
67
  };
70
68
 
package/dist/components/FormComponents/FileUpload/FormRenderMultiFileUpload.esm.js CHANGED
@@ -45,6 +45,7 @@ const FormRenderMultiFileUpload = ({ props, variant, }) => {
45
45
  image: ['jpg', 'jpeg', 'png'],
46
46
  all: ['pdf', 'jpg', 'jpeg', 'png', 'xls', 'xlsx', 'doc', 'docx', 'zip'],
47
47
  zip: ['zip'],
48
+ document: ['doc', 'docx', 'pdf'],
48
49
  };
49
50
  let fileExtension = null;
50
51
  if (fileName) {
package/dist/components/FormComponents/FormBottomField/FormBottomField.esm.js CHANGED
@@ -16,7 +16,10 @@ const FormBottomField = (props) => {
16
16
  /**
17
17
  * Renders helper text and error messages in a consistent layout
18
18
  */
19
- return (jsxs(Fragment, { children: [jsx(HelperText, { ...props }), jsx(FormErrorField, { ...props })] }));
19
+ return (jsxs(Fragment, { children: [jsx(HelperText, { ...props }), props?.item?.selectedFileName && (jsxs("span", { id: `${props.item.name}-selectedFileName`, className: "selectedText-v1", style: {
20
+ fontSize: '11px',
21
+ color: '#3651d3',
22
+ }, children: ["Selected File:", jsx("span", { className: "selectedFileName-v1", children: props?.item?.selectedFileName })] })), jsx(FormErrorField, { ...props })] }));
20
23
  };
21
24
 
22
25
  export { FormBottomField as default };
package/dist/components/FormComponents/FormNumberField/FormNumberField.esm.js CHANGED
@@ -71,6 +71,9 @@ const FormNumberField = ({ props, variant }) => {
71
71
  field.onChange(nextValue);
72
72
  props?.item?.onChangeFn && props?.item?.onChangeFn(nextValue);
73
73
  props?.clearErrors && props?.clearErrors(props.item.name);
74
+ if (nextValue && props.item.maxValue && parseInt(nextValue) > props.item.maxValue) {
75
+ field.onChange(props.item.maxValue);
76
+ }
74
77
  },
75
78
  /**
76
79
  * Handles blur events
@@ -92,6 +95,7 @@ const FormNumberField = ({ props, variant }) => {
92
95
  inputProps: {
93
96
  pattern: '[0-9]*',
94
97
  maxLength: props.item.maxLength || 20,
98
+ maxValue: props.item.maxValue || 9999999999,
95
99
  'aria-labelledby': `${props.item.name}-label`,
96
100
  'aria-describedby': `${props.item.name}-helper ${props.item.name}-error`,
97
101
  'aria-required': props.item.required ? true : undefined,
package/dist/components/FormComponents/FormTextField/FormTextField.esm.js CHANGED
@@ -88,7 +88,7 @@ const FormTextField = ({ props, variant }) => {
88
88
  * Renders the text field component using react-hook-form's Controller
89
89
  * for controlled form state management
90
90
  */
91
- return (jsx(Controller, { control: props.control, name: props.item.name, render: ({ field, fieldState }) => (jsxs(Fragment, { children: [renderLabel(variant, props), jsx(FormTextFieldComponent, { ...field, fullWidth: true, error: !!fieldState.error, label: label, placeholder: props.item.placeholder || '', autoComplete: "off", sx: {
91
+ return (jsx(Controller, { control: props.control, name: props.item.name, render: ({ field, fieldState }) => (jsxs(Fragment, { children: [renderLabel(variant, props), jsx(FormTextFieldComponent, { ...field, fullWidth: true, autoFocus: props.item.autoFocus, error: !!fieldState.error, label: label, placeholder: props.item.placeholder || '', autoComplete: "off", sx: {
92
92
  ...props.item.sx,
93
93
  }, value: field.value || '', size: "small", disabled: props.item.disable, onBlur: (e) => {
94
94
  // Call custom onBlur handler if provided
package/dist/components/FormComponents/HelperText/HelperText.esm.js CHANGED
@@ -14,7 +14,7 @@ const HelperText = (props) => {
14
14
  * Conditionally renders helper text if it exists in the form item props
15
15
  * Returns an empty fragment if no helper text is provided
16
16
  */
17
- return props?.item?.helperText ? (jsx("span", { id: `${props.item.name}-helper`, style: {
17
+ return props?.item?.helperText ? (jsx("span", { id: `${props.item.name}-helper`, className: "helperText-v1", style: {
18
18
  fontSize: '11px',
19
19
  color: '#3651d3',
20
20
  }, children: props?.item?.helperText })) : (jsx(Fragment, {}));
package/dist/components/FormComponents/Select/MultiSelectAutocomplete.esm.js CHANGED
@@ -9,17 +9,29 @@ import { renderLabel } from '../../../utils/Constants/FormConstants.esm.js';
9
9
  const MultiSelectAutocomplete = ({ props, variant, }) => {
10
10
  const isError = !!props.errors?.[props.item.name];
11
11
  const watchedValue = useWatch({ control: props.control, name: props.item.name });
12
- const isShowBorderError = isError && (!watchedValue || watchedValue.length === 0);
12
+ const normalizeToStringArray = (value) => {
13
+ if (Array.isArray(value)) {
14
+ return value.map((v) => String(v));
15
+ }
16
+ if (typeof value === 'string') {
17
+ return value
18
+ .split(',')
19
+ .map((v) => v.trim())
20
+ .filter((v) => v.length > 0);
21
+ }
22
+ if (value == null)
23
+ return [];
24
+ return [String(value)];
25
+ };
26
+ const normalizedSelectedValues = normalizeToStringArray(watchedValue);
27
+ const isShowBorderError = isError && normalizedSelectedValues.length === 0;
13
28
  const options = (props.item.options || []);
14
29
  const selectedOptions = useMemo(() => {
15
- if (!watchedValue)
16
- return [];
17
- const values = typeof watchedValue === 'string' ? watchedValue.split(',') : [];
18
- const valueSet = new Set(values);
30
+ const valueSet = new Set(normalizedSelectedValues.map((v) => String(v)));
19
31
  return options.filter((opt) => valueSet.has(String(opt.value)));
20
- }, [watchedValue, options]);
21
- return (jsx(Controller, { control: props.control, name: props.item.name, render: ({ field }) => (jsxs(Fragment, { children: [renderLabel(variant, props), jsx(Autocomplete, { ...field, multiple: true, disableCloseOnSelect: true, id: `${props.item.name}-autocomplete-multi`, options: options, value: selectedOptions, getOptionLabel: (option) => String(option.label), isOptionEqualToValue: (option, value) => option.value === value.value, onChange: (_, newValue) => {
22
- const joined = (newValue || []).map((o) => o.value).join(',');
32
+ }, [normalizedSelectedValues, options]);
33
+ return (jsx(Controller, { control: props.control, name: props.item.name, render: ({ field }) => (jsxs(Fragment, { children: [renderLabel(variant, props), jsx(Autocomplete, { ...field, multiple: true, disableCloseOnSelect: true, id: `${props.item.name}-autocomplete-multi`, options: options, value: selectedOptions, getOptionLabel: (option) => String(option.label), isOptionEqualToValue: (option, value) => String(option.value) === String(value.value), onChange: (_, newValue) => {
34
+ const joined = (newValue || []).map((o) => String(o.value)).join(',');
23
35
  props.setValue(props.item.name, joined);
24
36
  props?.item?.onChangeFn && props?.item?.onChangeFn(joined);
25
37
  props?.clearErrors && props?.clearErrors(props?.item?.name);
package/dist/components/FormComponents/Select/SingleSelectNonAutoComplete.esm.js CHANGED
@@ -17,7 +17,7 @@ const SingleSelectNonAutoComplete = ({ props, variant, }) => {
17
17
  '& .MuiInputLabel-shrink': {
18
18
  top: 0,
19
19
  },
20
- }, children: [renderLabel(variant, props), variant !== 'standard' && (jsx(InputLabel, { error: isShowBorderError, id: `${props.item.name}-labelId`, children: props.item.label })), jsx(Select, { labelId: `${props.item.name}-labelId`, id: `${props.item.name}-select`, value: value, label: variant !== 'standard' ? `${props.item.label}${props.item.required ? ' *' : ''}` : '', onChange: (e) => props.setValue(props.item.name, e.target.value), onBlur: (e) => {
20
+ }, disabled: props.item.disable, children: [renderLabel(variant, props), variant !== 'standard' && (jsx(InputLabel, { error: isShowBorderError, id: `${props.item.name}-labelId`, children: props.item.label })), jsx(Select, { labelId: `${props.item.name}-labelId`, id: `${props.item.name}-select`, value: value, label: variant !== 'standard' ? `${props.item.label}${props.item.required ? ' *' : ''}` : '', disabled: props.item.disable, onChange: (e) => props.setValue(props.item.name, e.target.value), onBlur: (e) => {
21
21
  props?.item?.onBlurFn && props?.item?.onBlurFn(e);
22
22
  }, error: isShowBorderError, inputProps: {
23
23
  'aria-labelledby': `${props.item.name}-label`,
package/dist/utils/Interface/FormInterface.d.ts CHANGED
@@ -18,7 +18,10 @@ export interface FormSectionPropsItem {
18
18
  disable?: boolean;
19
19
  onChangeFn?: (e: string | number | undefined | null | boolean) => void;
20
20
  onBlurFn?: (e: string | number | undefined | null | boolean) => void;
21
+ onChangeSetFileFn?: (e: File) => void;
21
22
  maxLength?: number;
23
+ autoFocus?: boolean;
24
+ maxValue?: number;
22
25
  minDate?: string;
23
26
  maxDate?: string;
24
27
  placeholder?: string;
@@ -37,11 +40,12 @@ export interface FormSectionPropsItem {
37
40
  sx?: SxProps<Theme>;
38
41
  donotAllowSpace?: boolean;
39
42
  onInputProps?: (e: React.FocusEvent<HTMLInputElement>) => void;
40
- fileType?: 'excel' | 'pdf' | 'all' | 'zip' | 'image' | '';
43
+ fileType?: 'excel' | 'pdf' | 'all' | 'zip' | 'image' | 'document' | '';
41
44
  handleFileError?: (message: string) => void;
42
45
  onCloseMenu?: () => void;
43
46
  doNotAllowPaste?: boolean;
44
47
  removeButtons?: string;
48
+ selectedFileName?: string;
45
49
  Fonts?: number[];
46
50
  FontFamily?: any;
47
51
  value1?: string | number | boolean;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "tp-react-elements-dev",
3
- "version": "1.12.31",
3
+ "version": "1.12.32",
4
4
  "private": false,
5
5
  "type": "module",
6
6
  "description": "React form components library built with React Hook Form and Yup",