tp-react-elements 2.0.4 → 2.0.5

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

@@ -1,104 +1,89 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { Box, TextField } from '@mui/material';
-import { useRef, useEffect } from 'react';
+import { useRef, useEffect, useMemo, useCallback } 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';
 
+// Static lookup — defined once at module level, never recreated
+const EXTENSION_MAP = {
+    excel: ['xls', 'xlsx'],
+    pdf: ['pdf'],
+    zip: ['zip'],
+    image: ['jpg', 'jpeg', 'png'],
+    document: ['doc', 'docx', 'pdf'],
+    all: ['pdf', 'jpg', 'jpeg', 'png', 'xls', 'xlsx', 'doc', 'docx', 'zip'],
+};
 const FormRenderMultiFileUpload = ({ props, variant, }) => {
-    // const getDocument: Document = document;
     const inputRef = useRef(null);
     const watched = useWatch({ control: props.control, name: props.item.name });
     useEffect(() => {
-        if (watched === null || watched === undefined) {
-            if (inputRef.current)
-                inputRef.current.value = '';
+        if ((watched === null || watched === undefined) && inputRef.current) {
+            inputRef.current.value = '';
         }
     }, [watched]);
     const isError = !!props.errors?.[props.item.name];
-    const isShowBorderError = isError;
-    const extensionMap = {
-        excel: ['xls', 'xlsx'],
-        pdf: ['pdf'],
-        zip: ['zip'],
-        image: ['jpg', 'jpeg', 'png'],
-        document: ['doc', 'docx', 'pdf'],
-        all: ['pdf', 'jpg', 'jpeg', 'png', 'xls', 'xlsx', 'doc', 'docx', 'zip'],
-    };
-    const getValidExtensions = () => {
+    // Derived once per fileType change — not on every render
+    const validExtensions = useMemo(() => {
         const fileType = props.item.fileType;
-        if (!fileType) {
-            return extensionMap.all;
-        }
+        if (!fileType)
+            return EXTENSION_MAP.all;
         if (Array.isArray(fileType)) {
-            // Check if array contains predefined keys (like 'image', 'pdf') or actual extensions
-            const hasPredefinedKeys = fileType.some((item) => extensionMap[item]);
+            const hasPredefinedKeys = fileType.some((t) => EXTENSION_MAP[t]);
             if (hasPredefinedKeys) {
-                // Merge extensions from all predefined keys
-                const extensions = new Set();
-                fileType.forEach((item) => {
-                    if (extensionMap[item]) {
-                        extensionMap[item].forEach((ext) => extensions.add(ext));
-                    }
-                    else {
-                        // Treat as direct extension
-                        extensions.add(item);
-                    }
+                const exts = new Set();
+                fileType.forEach((t) => {
+                    if (EXTENSION_MAP[t])
+                        EXTENSION_MAP[t].forEach((e) => exts.add(e));
+                    else
+                        exts.add(t);
                 });
-                return Array.from(extensions);
+                return Array.from(exts);
             }
-            // All items are direct extensions
             return fileType;
         }
-        return extensionMap[fileType] || extensionMap.all;
-    };
-    const getAcceptString = () => {
-        const extensions = getValidExtensions();
-        return extensions.map((ext) => `.${ext}`).join(',');
-    };
-    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: {
+        return EXTENSION_MAP[fileType] ?? EXTENSION_MAP.all;
+    }, [props.item.fileType]);
+    const accept = useMemo(() => validExtensions.map((e) => `.${e}`).join(','), [validExtensions]);
+    const handleChange = useCallback((event) => {
+        const files = event.target.files;
+        const fileName = files && files.length > 0
+            ? Array.from(files)
+                .map((item) => item.name)
+                .join(',')
+            : null;
+        let fileExtension = null;
+        if (fileName) {
+            const ext = fileName.split('.').pop();
+            if (ext)
+                fileExtension = ext.toLowerCase();
+        }
+        if (props.item?.fileType && fileExtension && !validExtensions.includes(fileExtension)) {
+            props.item?.handleFileError?.(`Please upload ${validExtensions.join(', ')} files only`);
+            event.target.value = '';
+            props.setValue(props.item.name, null);
+            props.setValue(props.item.name + 'Name', '');
+            return;
+        }
+        if (files && files[files.length - 1].size > 20000000) {
+            props.item?.handleFileError?.('File size should be less than 20MB');
+            props.setValue(props.item.name, null);
+            props.setValue(props.item.name + 'File', []);
+            return;
+        }
+        const fileArray = Array.from(files);
+        props.setValue(props.item.name, fileName);
+        props.setValue(props.item.name + 'File', fileArray);
+        props.clearErrors(props.item.name);
+    }, [validExtensions, props.item, props.setValue, props.clearErrors]);
+    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: isError, inputRef: inputRef, inputProps: {
                             multiple: true,
-                            accept: getAcceptString(),
+                            accept,
                             'aria-labelledby': `${props.item.name}-label`,
                             'aria-describedby': `${props.item.name}-helper ${props.item.name}-error`,
                             'aria-required': props.item.required ? true : undefined,
-                        }, onChange: (event) => {
-                            const file = event.target.files;
-                            const fileName = file && file.length > 0
-                                ? Array.from(file)
-                                    .map((item) => item.name)
-                                    .join(',')
-                                : null;
-                            let fileExtension = null;
-                            if (fileName) {
-                                const ext = fileName.split('.').pop();
-                                if (ext) {
-                                    fileExtension = ext.toLowerCase();
-                                }
-                            }
-                            const validExtensions = getValidExtensions();
-                            if (props.item?.fileType && fileExtension && !validExtensions.includes(fileExtension)) {
-                                props.item?.handleFileError &&
-                                    props.item?.handleFileError(`Please upload ${validExtensions.join(', ')} files only`);
-                                event.target.value = ''; // Clear the file input\
-                                props.setValue(props.item?.name, null);
-                                props.setValue(props.item?.name + 'Name', '');
-                                return;
-                            }
-                            else if (event.target.files[event.target.files.length - 1].size > 20000000) {
-                                props.item?.handleFileError &&
-                                    props.item?.handleFileError(`File size should be less than 20MB`);
-                                event.target.files = null; // Clear the file input
-                                props.setValue(props.item?.name, null);
-                                props.setValue(props.item?.name + 'File', []);
-                                return;
-                            }
-                            const fileArray = Array.from(file);
-                            props.setValue(props.item?.name, fileName);
-                            props.setValue(props.item?.name + 'File', fileArray);
-                            props.clearErrors(props.item?.name);
-                        }, sx: { width: '100%' } })] }), jsx(FormBottomField, { ...props })] }));
+                        }, onChange: handleChange, sx: { width: '100%' } })] }), jsx(FormBottomField, { ...props })] }));
 };
 
 export { FormRenderMultiFileUpload as default };

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

@@ -1,6 +1,6 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { Box, Button, IconButton, Modal, Typography } from '@mui/material';
-import { useRef, useState, useEffect } from 'react';
+import { useRef, useState, useEffect, useMemo, useCallback } from 'react';
 import { useWatch } from 'react-hook-form';
 import 'dayjs';
 import { renderLabel } from '../../../utils/Constants/FormConstants.esm.js';
@@ -15,6 +15,48 @@ import PictureAsPdfIcon from '@mui/icons-material/PictureAsPdf';
 import TableChartIcon from '@mui/icons-material/TableChart';
 import DescriptionIcon from '@mui/icons-material/Description';
 
+// ─── Module-level pure utilities ──────────────────────────────────────────────
+// Defined outside the component so they are never recreated on render.
+const EXTENSION_MAP = {
+    excel: ['xls', 'xlsx'],
+    pdf: ['pdf'],
+    image: ['jpg', 'jpeg', 'png'],
+    all: ['pdf', 'jpg', 'jpeg', 'png', 'xls', 'xlsx', 'doc', 'docx', 'zip'],
+    zip: ['zip'],
+    document: ['doc', 'docx', 'pdf'],
+};
+const isImageFile = (file) => {
+    if (!file)
+        return false;
+    const ext = typeof file === 'string'
+        ? file.split('.').pop()?.toLowerCase()
+        : file.name?.split('.').pop()?.toLowerCase();
+    return ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'].includes(ext || '');
+};
+const isPdfFile = (file) => {
+    if (!file)
+        return false;
+    const name = typeof file === 'string' ? file : (file.name || '');
+    return name.toLowerCase().endsWith('.pdf');
+};
+const isExcelFile = (file) => {
+    if (!file)
+        return false;
+    const name = typeof file === 'string' ? file : (file.name || '');
+    return /\.xlsx?$/.test(name.toLowerCase());
+};
+const isWordFile = (file) => {
+    if (!file)
+        return false;
+    const name = typeof file === 'string' ? file : (file.name || '');
+    return /\.(doc|docx)$/.test(name.toLowerCase());
+};
+const getObjectUrl = (file) => {
+    if (!file)
+        return '';
+    return typeof file === 'string' ? file : URL.createObjectURL(file);
+};
+// ─── Component ────────────────────────────────────────────────────────────────
 const MultiFileWithPreview = ({ props, variant, }) => {
     const inputRef = useRef(null);
     const watched = useWatch({ control: props.control, name: props.item.name });
@@ -22,7 +64,7 @@ const MultiFileWithPreview = ({ props, variant, }) => {
     const [open, setOpen] = useState(false);
     const [selectedFiles, setSelectedFiles] = useState([]);
     const [currentFileIndex, setCurrentFileIndex] = useState(0);
-    // Clamp preview index when selection changes to avoid undefined access
+    // Clamp preview index when selection changes
     useEffect(() => {
         if (selectedFiles.length === 0) {
             setCurrentFileIndex(0);
@@ -35,11 +77,12 @@ const MultiFileWithPreview = ({ props, variant, }) => {
             setCurrentFileIndex(0);
         }
     }, [selectedFiles, currentFileIndex]);
-    // Determine if this is single or multiple file mode
     const isSingleFileMode = props.item.maxLength === 1;
     useEffect(() => {
         const isWatchedEmpty = watched === null || watched === undefined || watched === '';
-        const isWatchedFileEmpty = watchedFile === null || watchedFile === undefined || (Array.isArray(watchedFile) && watchedFile.length === 0);
+        const isWatchedFileEmpty = watchedFile === null ||
+            watchedFile === undefined ||
+            (Array.isArray(watchedFile) && watchedFile.length === 0);
         if (isWatchedEmpty && isWatchedFileEmpty) {
             if (inputRef.current)
                 inputRef.current.value = '';
@@ -48,38 +91,36 @@ const MultiFileWithPreview = ({ props, variant, }) => {
         }
         const looksLikeUrl = (s) => typeof s === 'string' && /^(https?:|blob:|data:|\/)/i.test(s);
         let files = [];
-        // Check watchedFile first
         if (Array.isArray(watchedFile) && watchedFile.length > 0) {
-            files = watchedFile.map(f => {
+            files = watchedFile
+                .map((f) => {
                 if (f instanceof File)
                     return f;
                 if (typeof f === 'object' && f !== null) {
-                    const possibleKeys = ['image', 'url', 'path', 'filePath'];
-                    const key = possibleKeys.find((k) => f[k]);
+                    const key = ['image', 'url', 'path', 'filePath'].find((k) => f[k]);
                     return key ? f[key]?.replace(/\\/g, '/').trim() : undefined;
                 }
-                if (typeof f === 'string') {
-                    return f.replace(/\\/g, '/').trim(); // trust watchedFile strings directly
-                }
+                if (typeof f === 'string')
+                    return f.replace(/\\/g, '/').trim();
                 return undefined;
-            }).filter(Boolean);
+            })
+                .filter(Boolean);
         }
         else if (typeof watchedFile === 'string' && watchedFile.trim() !== '') {
-            files = watchedFile.split(',').map(s => s.replace(/\\/g, '/').trim()).filter(Boolean);
+            files = watchedFile.split(',').map((s) => s.replace(/\\/g, '/').trim()).filter(Boolean);
         }
-        // Fallback to watched if files array is empty
         if (files.length === 0) {
             if (typeof watched === 'string' && watched.trim() !== '') {
-                const parts = watched.split(',').map(s => s.replace(/\\/g, '/').trim());
-                files = parts.filter(p => looksLikeUrl(p));
+                const parts = watched.split(',').map((s) => s.replace(/\\/g, '/').trim());
+                files = parts.filter(looksLikeUrl);
             }
             else if (Array.isArray(watched)) {
-                files = watched.map(item => {
+                files = watched
+                    .map((item) => {
                     if (item instanceof File)
                         return item;
                     if (typeof item === 'object' && item !== null) {
-                        const possibleKeys = ['image', 'url', 'path', 'filePath'];
-                        const key = possibleKeys.find((k) => item[k]);
+                        const key = ['image', 'url', 'path', 'filePath'].find((k) => item[k]);
                         return key ? item[key]?.replace(/\\/g, '/').trim() : undefined;
                     }
                     if (typeof item === 'string') {
@@ -87,59 +128,41 @@ const MultiFileWithPreview = ({ props, variant, }) => {
                         return looksLikeUrl(str) ? str : undefined;
                     }
                     return undefined;
-                }).filter(Boolean);
+                })
+                    .filter(Boolean);
             }
         }
-        if (files.length > 0) {
+        if (files.length > 0)
             setSelectedFiles(files);
-        }
     }, [watched, watchedFile]);
     const isError = !!props.errors?.[props.item.name];
-    const extensionMap = {
-        excel: ['xls', 'xlsx'],
-        pdf: ['pdf'],
-        image: ['jpg', 'jpeg', 'png'],
-        all: ['pdf', 'jpg', 'jpeg', 'png', 'xls', 'xlsx', 'doc', 'docx', 'zip'],
-        zip: ['zip'],
-        document: ['doc', 'docx', 'pdf'],
-    };
-    const getValidExtensions = () => {
+    // Derived once per fileType change
+    const validExtensions = useMemo(() => {
         const fileType = props.item.fileType;
-        if (!fileType) {
-            return extensionMap.all;
-        }
+        if (!fileType)
+            return EXTENSION_MAP.all;
         if (Array.isArray(fileType)) {
-            // Check if array contains predefined keys (like 'image', 'pdf') or actual extensions
-            const hasPredefinedKeys = fileType.some((item) => extensionMap[item]);
+            const hasPredefinedKeys = fileType.some((t) => EXTENSION_MAP[t]);
             if (hasPredefinedKeys) {
-                // Merge extensions from all predefined keys
-                const extensions = new Set();
-                fileType.forEach((item) => {
-                    if (extensionMap[item]) {
-                        extensionMap[item].forEach((ext) => extensions.add(ext));
-                    }
-                    else {
-                        // Treat as direct extension
-                        extensions.add(item);
-                    }
+                const exts = new Set();
+                fileType.forEach((t) => {
+                    if (EXTENSION_MAP[t])
+                        EXTENSION_MAP[t].forEach((e) => exts.add(e));
+                    else
+                        exts.add(t);
                 });
-                return Array.from(extensions);
+                return Array.from(exts);
             }
-            // All items are direct extensions
             return fileType;
         }
-        return extensionMap[fileType] || extensionMap.all;
-    };
-    const getAcceptString = () => {
-        const extensions = getValidExtensions();
-        return extensions.map((ext) => `.${ext}`).join(',');
-    };
-    const handleFileChange = (event) => {
+        return EXTENSION_MAP[fileType] ?? EXTENSION_MAP.all;
+    }, [props.item.fileType]);
+    const accept = useMemo(() => validExtensions.map((e) => `.${e}`).join(','), [validExtensions]);
+    const handleFileChange = useCallback((event) => {
         const files = event.target.files;
         if (!files)
             return;
         const fileArray = Array.from(files);
-        const validExtensions = getValidExtensions();
         const invalidFile = fileArray.find((file) => {
             const ext = file.name.split('.').pop()?.toLowerCase();
             return !ext || !validExtensions.includes(ext);
@@ -159,15 +182,12 @@ const MultiFileWithPreview = ({ props, variant, }) => {
             props.setValue(props.item.name + 'File', []);
             return;
         }
-        let combinedFiles = [];
+        let combinedFiles;
         if (isSingleFileMode) {
-            // only 1 file allowed → replace
             combinedFiles = fileArray;
         }
         else {
-            // append to existing
             combinedFiles = [...selectedFiles, ...fileArray];
-            // limit by maxLength
             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 = '';
@@ -182,26 +202,25 @@ const MultiFileWithPreview = ({ props, variant, }) => {
         props.setValue(props.item.name + 'File', combinedFiles);
         props.clearErrors(props.item.name);
         setSelectedFiles(combinedFiles);
-        setCurrentFileIndex(combinedFiles.length - fileArray.length); // move preview to new
+        setCurrentFileIndex(combinedFiles.length - fileArray.length);
         props.item.onChangeSetFileFn?.(combinedFiles);
-    };
-    const handlePreviewClick = () => {
+    }, [validExtensions, isSingleFileMode, selectedFiles, props.item, props.setValue, props.clearErrors]);
+    const handlePreviewClick = useCallback(() => {
         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);
+    }, []);
+    const handleClose = useCallback(() => setOpen(false), []);
+    const handlePrevious = useCallback(() => {
+        setCurrentFileIndex((prev) => (prev > 0 ? prev - 1 : selectedFiles.length - 1));
+    }, [selectedFiles.length]);
+    const handleNext = useCallback(() => {
+        setCurrentFileIndex((prev) => (prev < selectedFiles.length - 1 ? prev + 1 : 0));
+    }, [selectedFiles.length]);
+    const handleDeleteFile = useCallback((indexToDelete) => {
+        const updatedFiles = selectedFiles.filter((_, i) => i !== indexToDelete);
         setSelectedFiles(updatedFiles);
-        if (inputRef.current) {
+        if (inputRef.current)
             inputRef.current.value = '';
-        }
         if (updatedFiles.length === 0) {
             props.setValue(props.item.name, null);
             props.setValue(props.item.name + 'File', []);
@@ -216,59 +235,21 @@ const MultiFileWithPreview = ({ props, variant, }) => {
         if (currentFileIndex >= updatedFiles.length) {
             setCurrentFileIndex(Math.max(0, updatedFiles.length - 1));
         }
-        props.item.onChangeSetFileFn &&
-            props.item.onChangeSetFileFn(updatedFiles);
-        if (updatedFiles.length === 0) {
+        props.item.onChangeSetFileFn?.(updatedFiles);
+        if (updatedFiles.length === 0)
             setOpen(false);
-        }
-    };
-    const isImageFile = (file) => {
-        if (!file)
-            return false;
-        const ext = typeof file === 'string'
-            ? file.split('.').pop()?.toLowerCase()
-            : file.name?.split('.').pop()?.toLowerCase();
-        return ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'].includes(ext || '');
-    };
-    const isPdfFile = (file) => {
-        if (!file)
-            return false;
-        const name = typeof file === 'string' ? file : (file.name || '');
-        return name.toLowerCase().endsWith('.pdf');
-    };
-    const isExcelFile = (file) => {
-        if (!file)
-            return false;
-        const name = typeof file === 'string' ? file : (file.name || '');
-        return /\.xlsx?$/.test(name.toLowerCase());
-    };
-    const isWordFile = (file) => {
-        if (!file)
-            return false;
-        const name = typeof file === 'string' ? file : (file.name || '');
-        return /\.(doc|docx)$/.test(name.toLowerCase());
-    };
-    const getObjectUrl = (file) => {
-        if (!file)
-            return '';
-        return typeof file === 'string' ? file : URL.createObjectURL(file);
-    };
+    }, [selectedFiles, currentFileIndex, props.item, props.setValue]);
     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: getAcceptString(), ref: inputRef, onChange: handleFileChange })] }), jsx(Box, { sx: { width: 36, display: 'flex', justifyContent: 'center' }, children: props.item.showFileCarousel && selectedFiles.length > 0 ? (jsx(IconButton, { onClick: handlePreviewClick, color: "primary", size: "small", "aria-label": "preview selected files", children: jsx(VisibilityIcon, {}) })) : null })] })] }), jsx(FormBottomField, { ...props }), jsx(Modal, { open: open, onClose: handleClose, children: jsxs(Box, { sx: {
-                        position: 'absolute',
-                        top: '50%',
-                        left: '50%',
+                                            : 'Upload Files', jsx("input", { type: "file", hidden: true, multiple: !isSingleFileMode, accept: accept, ref: inputRef, onChange: handleFileChange })] }), jsx(Box, { sx: { width: 36, display: 'flex', justifyContent: 'center' }, children: props.item.showFileCarousel && selectedFiles.length > 0 ? (jsx(IconButton, { onClick: handlePreviewClick, color: "primary", size: "small", "aria-label": "preview selected files", children: jsx(VisibilityIcon, {}) })) : null })] })] }), 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,
+                        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: [selectedFiles.length > 1 && !isSingleFileMode ? (jsx(IconButton, { onClick: handlePrevious, children: jsx(NavigateBeforeIcon, {}) })) : null, jsx(Box, { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", sx: { p: 2, minHeight: '400px', width: '100%' }, children: (() => {
                                                     const currentFile = selectedFiles[currentFileIndex];
                                                     if (!currentFile) {
@@ -277,31 +258,21 @@ const MultiFileWithPreview = ({ props, variant, }) => {
                                                     const fileName = typeof currentFile === 'string'
                                                         ? currentFile.split('/').pop() || currentFile
                                                         : (currentFile.name || '');
-                                                    // Images
                                                     if (isImageFile(currentFile)) {
-                                                        return (jsx("img", { alt: "Preview", src: getObjectUrl(currentFile), style: {
-                                                                maxHeight: '400px',
-                                                                maxWidth: '100%',
-                                                                objectFit: 'contain',
-                                                                borderRadius: 8,
-                                                            } }));
+                                                        return (jsx("img", { alt: "Preview", src: getObjectUrl(currentFile), style: { maxHeight: '400px', maxWidth: '100%', objectFit: 'contain', borderRadius: 8 } }));
                                                     }
-                                                    // PDF inline viewer
                                                     if (isPdfFile(currentFile)) {
                                                         const url = getObjectUrl(currentFile);
-                                                        return (jsx(Box, { width: "100%", height: 420, children: jsx("object", { data: url, type: "application/pdf", width: "100%", height: "100%", children: jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "center", flexDirection: "column", gap: 1, children: [jsx(PictureAsPdfIcon, { color: "error" }), jsx(Typography, { variant: "body2", children: "Preview not available. " }), jsx(Button, { size: "small", variant: "outlined", href: url, target: "_blank", rel: "noreferrer", children: "Open PDF" })] }) }) }));
+                                                        return (jsx(Box, { width: "100%", height: 420, children: jsx("object", { data: url, type: "application/pdf", width: "100%", height: "100%", children: jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "center", flexDirection: "column", gap: 1, children: [jsx(PictureAsPdfIcon, { color: "error" }), jsx(Typography, { variant: "body2", children: "Preview not available." }), jsx(Button, { size: "small", variant: "outlined", href: url, target: "_blank", rel: "noreferrer", children: "Open PDF" })] }) }) }));
                                                     }
-                                                    // Excel preview placeholder with actions
                                                     if (isExcelFile(currentFile)) {
                                                         const url = getObjectUrl(currentFile);
                                                         return (jsxs(Box, { textAlign: "center", children: [jsx(TableChartIcon, { color: "primary", sx: { fontSize: 64, mb: 1 } }), jsx(Typography, { variant: "body1", gutterBottom: true, children: fileName }), jsx(Button, { size: "small", variant: "outlined", href: url, target: "_blank", rel: "noreferrer", children: "Open" })] }));
                                                     }
-                                                    // Word preview placeholder with actions
                                                     if (isWordFile(currentFile)) {
                                                         const url = getObjectUrl(currentFile);
                                                         return (jsxs(Box, { textAlign: "center", children: [jsx(DescriptionIcon, { color: "primary", sx: { fontSize: 64, mb: 1 } }), jsx(Typography, { variant: "body1", gutterBottom: true, children: fileName }), jsx(Button, { size: "small", variant: "outlined", href: url, target: "_blank", rel: "noreferrer", children: "Open" })] }));
                                                     }
-                                                    // Fallback: show name
                                                     return jsx(Typography, { variant: "body1", children: fileName });
                                                 })() }), selectedFiles.length > 1 && !isSingleFileMode ? (jsx(IconButton, { onClick: handleNext, children: jsx(NavigateNextIcon, {}) })) : null] }), selectedFiles.length > 1 && !isSingleFileMode && (jsx(Box, { display: "flex", justifyContent: "center", mt: 2, children: jsxs(Typography, { variant: "body2", color: "text.secondary", children: [currentFileIndex + 1, " of ", selectedFiles.length] }) }))] })) })] }) })] }));
 };

package/dist/components/FormComponents/FormNumberField/FormNumberField.d.ts

@@ -1,44 +1,6 @@
 import { FormRenderProps, VariantProps } from '../../../utils';
-/**
- * FormNumberField Component
- *
- * A numeric input field component that integrates with react-hook-form.
- * This component is used for integer inputs, phone numbers, and pincodes.
- * It restricts input to numeric characters only.
- *
- * @component
- * @param {Object} props - The component props
- * @param {FormRenderProps} props.props - Form rendering properties from parent form
- * @param {VariantProps} props.variant - UI variant style ('standard', 'outlined', etc.)
- *
- * @example
- * // Basic usage in FormRender
- * <FormNumberField props={formRenderProps} variant="outlined" />
- *
- * @example
- * // Usage with specific configuration
- * const formItem = {
- *   name: "phoneNumber",
- *   label: "Phone Number",
- *   inputType: "number",
- *   required: true,
- *   maxLength: 10
- * };
- * <FormNumberField
- *   props={{
- *     item: formItem,
- *     control: formMethods.control,
- *     errors: formMethods.formState.errors
- *   }}
- *   variant="outlined"
- * />
- */
 declare const FormNumberField: ({ props, variant }: {
     props: FormRenderProps;
     variant: VariantProps;
 }) => import("react/jsx-runtime").JSX.Element;
-/**
- * Export the FormNumberField component for use in the form renderer
- * This component is used for number, pincode, and phoneNumber input types
- */
 export default FormNumberField;