tp-react-elements-dev 1.12.31 → 1.12.33

package/dist/components/FormComponents/FileUpload/MultiFileWithPreview.esm.js

@@ -0,0 +1,187 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { Box, Button, IconButton, Modal, Typography } from '@mui/material';
+import { useRef, useState, useEffect } from 'react';
+import { useWatch } from 'react-hook-form';
+import 'dayjs';
+import { renderLabel } from '../../../utils/Constants/FormConstants.esm.js';
+import FormBottomField from '../FormBottomField/FormBottomField.esm.js';
+import VisibilityIcon from '@mui/icons-material/Visibility';
+import CloseIcon from '@mui/icons-material/Close';
+import NavigateBeforeIcon from '@mui/icons-material/NavigateBefore';
+import NavigateNextIcon from '@mui/icons-material/NavigateNext';
+import DeleteIcon from '@mui/icons-material/Delete';
+import UploadFileIcon from '@mui/icons-material/UploadFile';
+
+const MultiFileWithPreview = ({ props, variant, }) => {
+    const inputRef = useRef(null);
+    const watched = useWatch({ control: props.control, name: props.item.name });
+    const [open, setOpen] = useState(false);
+    const [selectedFiles, setSelectedFiles] = useState([]);
+    const [currentFileIndex, setCurrentFileIndex] = useState(0);
+    // Determine if this is single or multiple file mode
+    const isSingleFileMode = props.item.maxLength === 1;
+    useEffect(() => {
+        if (watched === null || watched === undefined) {
+            if (inputRef.current)
+                inputRef.current.value = '';
+        }
+        // Handle preloaded files from backend (array of URLs)
+        if (Array.isArray(watched) && typeof watched[0] === 'string') {
+            setSelectedFiles(watched);
+        }
+    }, [watched]);
+    const isError = !!props.errors?.[props.item.name];
+    const handleFileChange = (event) => {
+        const files = event.target.files;
+        if (!files)
+            return;
+        const fileArray = Array.from(files);
+        const allowedExtensions = {
+            excel: ['xls', 'xlsx'],
+            pdf: ['pdf'],
+            image: ['jpg', 'jpeg', 'png'],
+            all: ['pdf', 'jpg', 'jpeg', 'png', 'xls', 'xlsx', 'doc', 'docx', 'zip']};
+        const validExtensions = props.item.fileType === 'excel'
+            ? allowedExtensions.excel
+            : props.item.fileType === 'pdf'
+                ? allowedExtensions.pdf
+                : props.item.fileType === 'image'
+                    ? allowedExtensions.image
+                    : allowedExtensions.all;
+        const invalidFile = fileArray.find((file) => {
+            const ext = file.name.split('.').pop()?.toLowerCase();
+            return !ext || !validExtensions.includes(ext);
+        });
+        if (invalidFile) {
+            props.item?.handleFileError?.(`Please upload ${validExtensions.join(', ')} files only`);
+            event.target.value = '';
+            props.setValue(props.item.name, null);
+            props.setValue(props.item.name + 'File', []);
+            return;
+        }
+        const largeFile = fileArray.find((file) => file.size > 20000000);
+        if (largeFile) {
+            props.item?.handleFileError?.('File size should be less than 20MB');
+            event.target.value = '';
+            props.setValue(props.item.name, null);
+            props.setValue(props.item.name + 'File', []);
+            return;
+        }
+        // Handle single vs multiple file mode
+        let combinedFiles;
+        if (isSingleFileMode) {
+            // In single file mode, replace the existing file
+            combinedFiles = fileArray;
+        }
+        else {
+            // In multiple file mode, combine with existing files
+            combinedFiles = [...selectedFiles, ...fileArray];
+            // Check if maxLength is exceeded
+            if (props.item.maxLength && combinedFiles.length > props.item.maxLength) {
+                props.item?.handleFileError?.(`You can only upload up to ${props.item.maxLength} files`);
+                event.target.value = '';
+                return;
+            }
+        }
+        const combinedFileNames = combinedFiles
+            .map((f) => (f instanceof File ? f.name : f.split('/').pop()))
+            .join(',');
+        props.setValue(props.item.name, combinedFileNames);
+        props.setValue(props.item.name + 'File', combinedFiles);
+        setSelectedFiles(combinedFiles);
+        props.item.onChangeSetFileFn?.(combinedFiles);
+    };
+    const handlePreviewClick = () => {
+        setCurrentFileIndex(0);
+        setOpen(true);
+    };
+    const handleClose = () => setOpen(false);
+    const handlePrevious = () => {
+        setCurrentFileIndex((prev) => prev > 0 ? prev - 1 : selectedFiles.length - 1);
+    };
+    const handleNext = () => {
+        setCurrentFileIndex((prev) => prev < selectedFiles.length - 1 ? prev + 1 : 0);
+    };
+    const handleDeleteFile = (indexToDelete) => {
+        const updatedFiles = selectedFiles.filter((_, index) => index !== indexToDelete);
+        setSelectedFiles(updatedFiles);
+        if (inputRef.current) {
+            inputRef.current.value = '';
+        }
+        if (updatedFiles.length === 0) {
+            props.setValue(props.item.name, null);
+            props.setValue(props.item.name + 'File', []);
+        }
+        else {
+            const fileNames = updatedFiles
+                .map((f) => (f instanceof File ? f.name : f.split('/').pop()))
+                .join(',');
+            props.setValue(props.item.name, fileNames);
+            props.setValue(props.item.name + 'File', updatedFiles);
+        }
+        if (currentFileIndex >= updatedFiles.length) {
+            setCurrentFileIndex(Math.max(0, updatedFiles.length - 1));
+        }
+        props.item.onChangeSetFileFn &&
+            props.item.onChangeSetFileFn(updatedFiles);
+        if (updatedFiles.length === 0) {
+            setOpen(false);
+        }
+    };
+    const isImageFile = (file) => {
+        const ext = typeof file === 'string'
+            ? file.split('.').pop()?.toLowerCase()
+            : file.name.split('.').pop()?.toLowerCase();
+        return ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'].includes(ext || '');
+    };
+    return (jsxs(Fragment, { children: [jsxs(Box, { paddingLeft: "4px", sx: { ...props.item.sx, position: 'relative' }, children: [props.item?.label && (jsx(Box, { sx: { fontSize: '10px' }, children: renderLabel(variant, props, true) })), jsxs(Box, { display: "flex", alignItems: "center", gap: 1, children: [jsxs(Button, { variant: "outlined", component: "label", startIcon: jsx(UploadFileIcon, {}), sx: { flex: 1, textTransform: 'none' }, color: isError ? 'error' : 'primary', children: [selectedFiles.length > 0
+                                        ? isSingleFileMode
+                                            ? '1 file selected'
+                                            : `${selectedFiles.length} file(s) selected`
+                                        : isSingleFileMode
+                                            ? 'Upload File'
+                                            : 'Upload Files', jsx("input", { type: "file", hidden: true, multiple: !isSingleFileMode, accept: props.item.fileType === 'excel'
+                                            ? '.xls,.xlsx'
+                                            : props.item.fileType === 'pdf'
+                                                ? '.pdf'
+                                                : props.item.fileType === 'image'
+                                                    ? '.jpg,.jpeg,.png'
+                                                    : props.item.fileType === 'all'
+                                                        ? '.pdf,.jpg,.jpeg,.png,.xls,.xlsx,.doc,.docx'
+                                                        : '', ref: inputRef, onChange: handleFileChange })] }), props.item.showFileCarousel && selectedFiles.length > 0 && (jsx(IconButton, { onClick: handlePreviewClick, color: "primary", size: "small", sx: { mt: 0.5 }, children: jsx(VisibilityIcon, {}) }))] })] }), jsx(FormBottomField, { ...props }), jsx(Modal, { open: open, onClose: handleClose, children: jsxs(Box, { sx: {
+                        position: 'absolute',
+                        top: '50%',
+                        left: '50%',
+                        transform: 'translate(-50%, -50%)',
+                        width: 600,
+                        bgcolor: 'background.paper',
+                        borderRadius: 2,
+                        boxShadow: 24,
+                        p: 3,
+                    }, children: [jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "center", children: [jsx(Typography, { variant: "h6", children: "File Preview" }), jsxs(Box, { display: "flex", gap: 1, children: [jsx(IconButton, { onClick: () => handleDeleteFile(currentFileIndex), color: "error", title: "Delete current file", children: jsx(DeleteIcon, {}) }), jsx(IconButton, { onClick: handleClose, children: jsx(CloseIcon, {}) })] })] }), jsx(Box, { mt: 2, children: selectedFiles.length > 0 && (jsxs(Fragment, { children: [jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "center", gap: 2, children: [jsx(IconButton, { onClick: handlePrevious, disabled: selectedFiles.length <= 1, children: jsx(NavigateBeforeIcon, {}) }), jsx(Box, { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", sx: { p: 2, minHeight: '400px', width: '100%' }, children: (() => {
+                                                    const currentFile = selectedFiles[currentFileIndex];
+                                                    if (currentFile instanceof File) {
+                                                        if (isImageFile(currentFile)) {
+                                                            return (jsx("img", { alt: "Preview", src: URL.createObjectURL(currentFile), style: {
+                                                                    maxHeight: '400px',
+                                                                    maxWidth: '100%',
+                                                                    objectFit: 'contain',
+                                                                    borderRadius: 8,
+                                                                } }));
+                                                        }
+                                                        return (jsx(Typography, { variant: "body1", children: currentFile.name }));
+                                                    }
+                                                    else if (typeof currentFile === 'string') {
+                                                        const isImg = isImageFile(currentFile);
+                                                        return isImg ? (jsx("img", { alt: "Preview", src: currentFile, style: {
+                                                                maxHeight: '400px',
+                                                                maxWidth: '100%',
+                                                                objectFit: 'contain',
+                                                                borderRadius: 8,
+                                                            } })) : (jsx(Typography, { variant: "body1", children: currentFile.split('/').pop() }));
+                                                    }
+                                                    return null;
+                                                })() }), jsx(IconButton, { onClick: handleNext, disabled: selectedFiles.length <= 1, children: jsx(NavigateNextIcon, {}) })] }), selectedFiles.length > 1 && (jsx(Box, { display: "flex", justifyContent: "center", mt: 2, children: jsxs(Typography, { variant: "body2", color: "text.secondary", children: [currentFileIndex + 1, " of ", selectedFiles.length] }) }))] })) })] }) })] }));
+};
+
+export { MultiFileWithPreview as default };

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

@@ -0,0 +1,3 @@
+export { default as FormRenderFileUpload } from './FormRenderFileUpload';
+export { default as FormRenderMultiFileUpload } from './FormRenderMultiFileUpload';
+export { default as MultiFileWithPreview } from './MultiFileWithPreview';

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

@@ -0,0 +1,3 @@
+export { default as FormRenderFileUpload } from './FormRenderFileUpload.esm.js';
+export { default as FormRenderMultiFileUpload } from './FormRenderMultiFileUpload.esm.js';
+export { default as MultiFileWithPreview } from './MultiFileWithPreview.esm.js';

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

@@ -16,7 +16,10 @@ const FormBottomField = (props) => {
     /**
      * Renders helper text and error messages in a consistent layout
      */
-    return (jsxs(Fragment, { children: [jsx(HelperText, { ...props }), jsx(FormErrorField, { ...props })] }));
+    return (jsxs(Fragment, { children: [jsx(HelperText, { ...props }), props?.item?.selectedFileName && (jsxs("span", { id: `${props.item.name}-selectedFileName`, className: "selectedText-v1", style: {
+                    fontSize: '11px',
+                    color: '#3651d3',
+                }, children: ["Selected File:", jsx("span", { className: "selectedFileName-v1", children: props?.item?.selectedFileName })] })), jsx(FormErrorField, { ...props })] }));
 };
 
 export { FormBottomField as default };

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

@@ -71,6 +71,9 @@ const FormNumberField = ({ props, variant }) => {
                                 field.onChange(nextValue);
                                 props?.item?.onChangeFn && props?.item?.onChangeFn(nextValue);
                                 props?.clearErrors && props?.clearErrors(props.item.name);
+                                if (nextValue && props.item.maxValue && parseInt(nextValue) > props.item.maxValue) {
+                                    field.onChange(props.item.maxValue);
+                                }
                             }, 
                             /**
                              * Handles blur events
@@ -92,6 +95,7 @@ const FormNumberField = ({ props, variant }) => {
                             inputProps: {
                                 pattern: '[0-9]*',
                                 maxLength: props.item.maxLength || 20,
+                                maxValue: props.item.maxValue || 9999999999,
                                 'aria-labelledby': `${props.item.name}-label`,
                                 'aria-describedby': `${props.item.name}-helper ${props.item.name}-error`,
                                 'aria-required': props.item.required ? true : undefined,

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

@@ -88,7 +88,7 @@ const FormTextField = ({ props, variant }) => {
      * Renders the text field component using react-hook-form's Controller
      * for controlled form state management
      */
-    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: {
+    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: {
                         ...props.item.sx,
                     }, value: field.value || '', size: "small", disabled: props.item.disable, onBlur: (e) => {
                         // Call custom onBlur handler if provided

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

@@ -14,7 +14,7 @@ const HelperText = (props) => {
      * Conditionally renders helper text if it exists in the form item props
      * Returns an empty fragment if no helper text is provided
      */
-    return props?.item?.helperText ? (jsx("span", { id: `${props.item.name}-helper`, style: {
+    return props?.item?.helperText ? (jsx("span", { id: `${props.item.name}-helper`, className: "helperText-v1", style: {
             fontSize: '11px',
             color: '#3651d3',
         }, children: props?.item?.helperText })) : (jsx(Fragment, {}));

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

@@ -9,17 +9,29 @@ import { renderLabel } from '../../../utils/Constants/FormConstants.esm.js';
 const MultiSelectAutocomplete = ({ props, variant, }) => {
     const isError = !!props.errors?.[props.item.name];
     const watchedValue = useWatch({ control: props.control, name: props.item.name });
-    const isShowBorderError = isError && (!watchedValue || watchedValue.length === 0);
+    const normalizeToStringArray = (value) => {
+        if (Array.isArray(value)) {
+            return value.map((v) => String(v));
+        }
+        if (typeof value === 'string') {
+            return value
+                .split(',')
+                .map((v) => v.trim())
+                .filter((v) => v.length > 0);
+        }
+        if (value == null)
+            return [];
+        return [String(value)];
+    };
+    const normalizedSelectedValues = normalizeToStringArray(watchedValue);
+    const isShowBorderError = isError && normalizedSelectedValues.length === 0;
     const options = (props.item.options || []);
     const selectedOptions = useMemo(() => {
-        if (!watchedValue)
-            return [];
-        const values = typeof watchedValue === 'string' ? watchedValue.split(',') : [];
-        const valueSet = new Set(values);
+        const valueSet = new Set(normalizedSelectedValues.map((v) => String(v)));
         return options.filter((opt) => valueSet.has(String(opt.value)));
-    }, [watchedValue, options]);
-    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) => {
-                        const joined = (newValue || []).map((o) => o.value).join(',');
+    }, [normalizedSelectedValues, options]);
+    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) => {
+                        const joined = (newValue || []).map((o) => String(o.value)).join(',');
                         props.setValue(props.item.name, joined);
                         props?.item?.onChangeFn && props?.item?.onChangeFn(joined);
                         props?.clearErrors && props?.clearErrors(props?.item?.name);

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

@@ -17,7 +17,7 @@ const SingleSelectNonAutoComplete = ({ props, variant, }) => {
             '& .MuiInputLabel-shrink': {
                 top: 0,
             },
-        }, 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) => {
+        }, 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) => {
                     props?.item?.onBlurFn && props?.item?.onBlurFn(e);
                 }, error: isShowBorderError, inputProps: {
                     'aria-labelledby': `${props.item.name}-label`,

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

@@ -17,8 +17,19 @@ export { default as YearPickerField } from './YearPickerField/YearPickerField.es
 export { default as TimePicker } from './TimePicker/TimePicker.esm.js';
 export { default as FormRenderFileUpload } from './FileUpload/FormRenderFileUpload.esm.js';
 export { default as FormRenderMultiFileUpload } from './FileUpload/FormRenderMultiFileUpload.esm.js';
+import 'react/jsx-runtime';
+import '@mui/material';
+import 'react';
+import 'react-hook-form';
+import 'dayjs';
+export { default as FormBottomField } from './FormBottomField/FormBottomField.esm.js';
+import '@mui/icons-material/Visibility';
+import '@mui/icons-material/Close';
+import '@mui/icons-material/NavigateBefore';
+import '@mui/icons-material/NavigateNext';
+import '@mui/icons-material/Delete';
+import '@mui/icons-material/UploadFile';
 export { default as RichTextEditor } from './RichTextEditor/RichTextEditor.esm.js';
 export { default as RichTextEditorWrapper } from './RichTextEditor/RichTextEditorWrapper.esm.js';
-export { default as FormBottomField } from './FormBottomField/FormBottomField.esm.js';
 export { default as FormErrorField } from './FormErrorField/FormErrorField.esm.js';
 export { default as HelperText } from './HelperText/HelperText.esm.js';

package/dist/components/Global.styles.esm.js

@@ -1,79 +1,79 @@
 import { styled } from '@mui/material/styles';
 import { Button, Typography, Grid, Dialog, DialogTitle } from '@mui/material';
 
-styled(Button) `
-  border: 0;
-  color: #fff;
-  position: absolute;
-  text-align: center;
-  padding: 5px 12px;
-  font-size: 13px;
-  height: 30px;
-  right: -38px;
-  text-transform: none;
-  z-index: 2;
-  border-radius: 10px 0px 0px 10px;
-  &:hover {
-    right: 0px;
-  }
+styled(Button) `
+  border: 0;
+  color: #fff;
+  position: absolute;
+  text-align: center;
+  padding: 5px 12px;
+  font-size: 13px;
+  height: 30px;
+  right: -38px;
+  text-transform: none;
+  z-index: 2;
+  border-radius: 10px 0px 0px 10px;
+  &:hover {
+    right: 0px;
+  }
 `;
-const SubmitButton = styled(Button) `
-  text-transform: none;
+const SubmitButton = styled(Button) `
+  text-transform: none;
 `;
-const CancelButton = styled(Button) `
-  text-transform: none;
-  color: #000;
-  background: #ececee;
-  &:hover {
-    background: #0009;
-    color: #fff;
-  }
+const CancelButton = styled(Button) `
+  text-transform: none;
+  color: #000;
+  background: #ececee;
+  &:hover {
+    background: #0009;
+    color: #fff;
+  }
 `;
-const SaveAsDraftButton = styled(Button) `
-  text-transform: none;
-  font-size: 12px;
-  background: orange;
-  &:hover {
-    background: orange;
-  }
+const SaveAsDraftButton = styled(Button) `
+  text-transform: none;
+  font-size: 12px;
+  background: orange;
+  &:hover {
+    background: orange;
+  }
 `;
 styled(Typography) ``;
 styled(Grid, {
     shouldForwardProp: (prop) => prop !== 'isActive' && prop !== 'noOfColumn',
-}) `
-  flex-direction: column;
-  margin-bottom: 8px;
-  min-width: 10%;
-  padding-left: 0px;
-  z-index: 2;
-  padding-right: 0px;
-  border: 1px solid #0003;
-  font-size: 12px;
-  padding: 6px;
-  text-align: center;
-  &:hover {
-    cursor: pointer;
-  }
+}) `
+  flex-direction: column;
+  margin-bottom: 8px;
+  min-width: 10%;
+  padding-left: 0px;
+  z-index: 2;
+  padding-right: 0px;
+  border: 1px solid #0003;
+  font-size: 12px;
+  padding: 6px;
+  text-align: center;
+  &:hover {
+    cursor: pointer;
+  }
 `;
-const DialogContainer = styled(Dialog) `
-  position: fixed;
-  top: -16px;
-  left: 0;
-  right: 0;
-  bottom: auto;
-  & .css-tlc64q-MuiPaper-root-MuiDialog-paper,
-  .css-mbdu2s {
-    max-width: 900px;
-  }
+const DialogContainer = styled(Dialog) `
+  position: fixed;
+  top: -16px;
+  left: 0;
+  right: 0;
+  bottom: auto;
+  & .css-tlc64q-MuiPaper-root-MuiDialog-paper,
+  .css-mbdu2s {
+    max-width: 900px;
+  }
 `;
-const DialogTitleWrapper = styled(DialogTitle) `
-  padding: 8px 16px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  font-size: 14px;
-  cursor: move;
-  border-bottom: 1px solid rgb(229 231 235 / 1);
+const DialogTitleWrapper = styled(DialogTitle) `
+  padding: 8px 16px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+  cursor: move;
+  border-bottom: 1px solid rgb(229 231 235 / 1);
 `;
 
 export { CancelButton, DialogContainer, DialogTitleWrapper, SaveAsDraftButton, SubmitButton };

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' | 'datepicker' | 'multiselect' | 'select-v2' | 'basic-select' | 'decimal' | 'alpha-numerical' | 'yearpicker' | 'dateRangePicker' | 'monthpicker' | 'multiselect' | 'file' | 'multifile' | 'textarea' | 'phoneNumber' | 'pincode' | 'email' | 'toggleSwitch' | 'rich-text-editor' | 'multiEmail' | 'timepicker' | 'checkbox-group' | 'radio-group' | 'checkbox' | 'custom' | '';
+    inputType: 'text' | 'password' | 'number' | 'select' | 'autocomplete-select' | 'autocomplete-multi-select' | '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' | '';
     options?: OptionsProps[];
     required?: boolean;
     errorMessage?: string;
@@ -18,7 +18,11 @@ export interface FormSectionPropsItem {
     disable?: boolean;
     onChangeFn?: (e: string | number | undefined | null | boolean) => void;
     onBlurFn?: (e: string | number | undefined | null | boolean) => void;
+    onChangeSetFileFn?: (e: File | File[]) => void;
+    showFileCarousel?: boolean;
     maxLength?: number;
+    autoFocus?: boolean;
+    maxValue?: number;
     minDate?: string;
     maxDate?: string;
     placeholder?: string;
@@ -37,11 +41,12 @@ export interface FormSectionPropsItem {
     sx?: SxProps<Theme>;
     donotAllowSpace?: boolean;
     onInputProps?: (e: React.FocusEvent<HTMLInputElement>) => void;
-    fileType?: 'excel' | 'pdf' | 'all' | 'zip' | 'image' | '';
+    fileType?: 'excel' | 'pdf' | 'all' | 'zip' | 'image' | 'document' | '';
     handleFileError?: (message: string) => void;
     onCloseMenu?: () => void;
     doNotAllowPaste?: boolean;
     removeButtons?: string;
+    selectedFileName?: string;
     Fonts?: number[];
     FontFamily?: any;
     value1?: string | number | boolean;

package/package.json

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