@solidstarters/solid-core-ui 1.1.210 → 1.1.211

package/dist/components/core/form/fields/SolidMediaMultipleField.js

@@ -1,24 +1,4 @@
 'use client';
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { DropzonePlaceholder } from "../../../../components/common/DropzonePlaceholder";
 import { useDeleteMediaMutation } from "../../../../redux/api/mediaApi";
@@ -34,41 +14,38 @@ import { downloadMediaFile } from "../../../../helpers/downloadMediaFile";
 import { getExtensionComponent } from "../../../../helpers/registry";
 import { SolidFieldTooltip } from "../../../../components/common/SolidFieldTooltip";
 import { ERROR_MESSAGES } from "../../../../constants/error-messages";
-var SolidMediaMultipleField = /** @class */ (function () {
-    function SolidMediaMultipleField(fieldContext, setLightboxUrls, setOpenLightbox) {
+export class SolidMediaMultipleField {
+    constructor(fieldContext, setLightboxUrls, setOpenLightbox) {
         this.fieldContext = fieldContext;
         this.setLightboxUrls = setLightboxUrls;
         this.setOpenLightbox = setOpenLightbox;
     }
-    SolidMediaMultipleField.prototype.updateFormData = function (value, formData) {
-        var fieldLayoutInfo = this.fieldContext.field;
+    updateFormData(value, formData) {
+        const fieldLayoutInfo = this.fieldContext.field;
         // @ts-ignore
-        for (var i = 0; i < value.length; i++) {
+        for (let i = 0; i < value.length; i++) {
             // @ts-ignore
-            var file = value[i];
+            const file = value[i];
             if (file instanceof File) {
                 formData.append(fieldLayoutInfo.attrs.name, file);
             }
         }
-    };
-    SolidMediaMultipleField.prototype.initialValue = function () {
-        var mediaUrls = this.fieldContext.data && this.fieldContext.data._media && this.fieldContext.data._media[this.fieldContext.field.attrs.name].map(function (i) { return i; });
+    }
+    initialValue() {
+        const mediaUrls = this.fieldContext.data && this.fieldContext.data._media && this.fieldContext.data._media[this.fieldContext.field.attrs.name].map((i) => i);
         return mediaUrls;
-    };
-    SolidMediaMultipleField.prototype.validationSchema = function () {
-        var _a;
-        var fieldMetadata = this.fieldContext.fieldMetadata;
-        var fieldLayoutInfo = this.fieldContext.field;
-        var fieldLabel = (_a = fieldLayoutInfo.label) !== null && _a !== void 0 ? _a : fieldMetadata.displayName;
-        var schema; // Correctly specifying type arguments for ArraySchema
+    }
+    validationSchema() {
+        const fieldMetadata = this.fieldContext.fieldMetadata;
+        const fieldLayoutInfo = this.fieldContext.field;
+        const fieldLabel = fieldLayoutInfo.label ?? fieldMetadata.displayName;
+        let schema; // Correctly specifying type arguments for ArraySchema
         if (fieldMetadata.required) {
             // For required fields: disallow null, undefined, and empty arrays
             schema = Yup.array()
                 .of(Yup.mixed()
                 .required(ERROR_MESSAGES.FIELD_REUQIRED(fieldLabel))
-                .test(ERROR_MESSAGES.FILE_OBJECT, ERROR_MESSAGES.MUST_BE_FILE_OBJECT(fieldLabel), function (value) {
-                return value instanceof File || typeof value === "object";
-            } // Validate File or object
+                .test(ERROR_MESSAGES.FILE_OBJECT, ERROR_MESSAGES.MUST_BE_FILE_OBJECT(fieldLabel), (value) => value instanceof File || typeof value === "object" // Validate File or object
             ))
                 .min(1, ERROR_MESSAGES.FIELD_MUST_HAVE_ITEM(fieldLabel)); // Ensure array has at least one item
         }
@@ -77,97 +54,90 @@ var SolidMediaMultipleField = /** @class */ (function () {
             schema = Yup.array()
                 .of(Yup.mixed()
                 .nullable() // Allow null explicitly
-                .test(ERROR_MESSAGES.FILE_OBJECT, ERROR_MESSAGES.MUST_BE_FILE_OBJECT(fieldLabel), function (value) {
-                return value === null || // Allow null
-                    value === undefined || // Allow undefined
-                    value instanceof File || // Allow File
-                    typeof value === "object";
-            } // Allow object
+                .test(ERROR_MESSAGES.FILE_OBJECT, ERROR_MESSAGES.MUST_BE_FILE_OBJECT(fieldLabel), (value) => value === null || // Allow null
+                value === undefined || // Allow undefined
+                value instanceof File || // Allow File
+                typeof value === "object" // Allow object
             ))
                 .nullable() // Allow null array explicitly
-                .test(ERROR_MESSAGES.EMPTY_VALID_ARRAY, ERROR_MESSAGES.CONTAIN_EMPTY_ARRAY_OR_FILE_OBECT(fieldLabel), function (value) { return value === null || value === undefined || Array.isArray(value); });
+                .test(ERROR_MESSAGES.EMPTY_VALID_ARRAY, ERROR_MESSAGES.CONTAIN_EMPTY_ARRAY_OR_FILE_OBECT(fieldLabel), (value) => value === null || value === undefined || Array.isArray(value));
         }
         return schema;
-    };
-    SolidMediaMultipleField.prototype.render = function (formik) {
-        var _a;
-        var fieldMetadata = this.fieldContext.fieldMetadata;
-        var fieldLayoutInfo = this.fieldContext.field;
-        var isFormFieldValid = function (formik, fieldName) { return formik.touched[fieldName] && formik.errors[fieldName]; };
-        var className = ((_a = fieldLayoutInfo.attrs) === null || _a === void 0 ? void 0 : _a.className) || 'field col-12';
-        var viewWidget = fieldLayoutInfo.attrs.viewWidget;
-        var editWidget = fieldLayoutInfo.attrs.editWidget;
+    }
+    render(formik) {
+        const fieldMetadata = this.fieldContext.fieldMetadata;
+        const fieldLayoutInfo = this.fieldContext.field;
+        const isFormFieldValid = (formik, fieldName) => formik.touched[fieldName] && formik.errors[fieldName];
+        const className = fieldLayoutInfo.attrs?.className || 'field col-12';
+        let viewWidget = fieldLayoutInfo.attrs.viewWidget;
+        let editWidget = fieldLayoutInfo.attrs.editWidget;
         if (!editWidget) {
             editWidget = 'DefaultMediaMultipleFormEditWidget';
         }
         if (!viewWidget) {
             viewWidget = 'DefaultMediaMultipleFormViewWidget';
         }
-        var viewMode = this.fieldContext.viewMode;
+        const viewMode = this.fieldContext.viewMode;
         return (_jsx(_Fragment, { children: _jsxs("div", { className: className, children: [viewMode === "view" &&
                         this.renderExtensionRenderMode(viewWidget, formik), viewMode === "edit" &&
                         _jsx(_Fragment, { children: editWidget &&
                                 this.renderExtensionRenderMode(editWidget, formik) })] }) }));
-    };
-    SolidMediaMultipleField.prototype.renderExtensionRenderMode = function (widget, formik) {
-        var DynamicWidget = getExtensionComponent(widget);
-        var widgetProps = {
+    }
+    renderExtensionRenderMode(widget, formik) {
+        let DynamicWidget = getExtensionComponent(widget);
+        const widgetProps = {
             formik: formik,
             fieldContext: this.fieldContext,
             setLightboxUrls: this.setLightboxUrls,
             setOpenLightbox: this.setOpenLightbox
         };
-        return (_jsx(_Fragment, { children: DynamicWidget && _jsx(DynamicWidget, __assign({}, widgetProps)) }));
-    };
-    return SolidMediaMultipleField;
-}());
-export { SolidMediaMultipleField };
-export var DefaultMediaMultipleFormEditWidget = function (_a) {
-    var _b, _c, _d, _e, _f;
-    var formik = _a.formik, fieldContext = _a.fieldContext, setLightboxUrls = _a.setLightboxUrls, setOpenLightbox = _a.setOpenLightbox;
-    var fieldMetadata = fieldContext.fieldMetadata;
-    var fieldLayoutInfo = fieldContext.field;
-    var className = ((_b = fieldLayoutInfo.attrs) === null || _b === void 0 ? void 0 : _b.className) || 'field col-12';
-    var fieldLabel = (_c = fieldLayoutInfo.attrs.label) !== null && _c !== void 0 ? _c : fieldMetadata.displayName;
-    var viewMode = fieldContext.viewMode;
-    var fieldDescription = (_d = fieldLayoutInfo.attrs.description) !== null && _d !== void 0 ? _d : fieldMetadata.description;
-    var solidFormViewMetaData = fieldContext.solidFormViewMetaData;
-    var showFieldLabel = (_e = fieldLayoutInfo === null || fieldLayoutInfo === void 0 ? void 0 : fieldLayoutInfo.attrs) === null || _e === void 0 ? void 0 : _e.showLabel;
-    var readOnlyPermission = fieldContext.readOnly ? fieldContext.readOnly : fieldLayoutInfo.attrs.readonly;
-    var _g = useState(false), isDeleteImageDialogVisible = _g[0], setDeleteImageDialogVisible = _g[1];
-    var _h = useState(), imageToBeDeletedData = _h[0], setImageToBeDeletedData = _h[1];
-    var _j = useState([]), fileDetails = _j[0], setFileDetails = _j[1];
-    var _k = useState(null), selectedFileId = _k[0], setSelectedFileId = _k[1];
-    var _l = useState(null), fileSizeError = _l[0], setFileSizeError = _l[1];
-    var formatFileSize = function (size) {
+        return (_jsx(_Fragment, { children: DynamicWidget && _jsx(DynamicWidget, { ...widgetProps }) }));
+    }
+}
+export const DefaultMediaMultipleFormEditWidget = ({ formik, fieldContext, setLightboxUrls, setOpenLightbox }) => {
+    const fieldMetadata = fieldContext.fieldMetadata;
+    const fieldLayoutInfo = fieldContext.field;
+    const className = fieldLayoutInfo.attrs?.className || 'field col-12';
+    const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
+    const viewMode = fieldContext.viewMode;
+    const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
+    const solidFormViewMetaData = fieldContext.solidFormViewMetaData;
+    const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
+    const readOnlyPermission = fieldContext.readOnly ? fieldContext.readOnly : fieldLayoutInfo.attrs.readonly;
+    const [isDeleteImageDialogVisible, setDeleteImageDialogVisible] = useState(false);
+    const [imageToBeDeletedData, setImageToBeDeletedData] = useState();
+    const [fileDetails, setFileDetails] = useState([]);
+    const [selectedFileId, setSelectedFileId] = useState(null);
+    const [fileSizeError, setFileSizeError] = useState(null);
+    const formatFileSize = (size) => {
         return size >= 1024 * 1024
-            ? "".concat((size / (1024 * 1024)).toFixed(1), " MB")
-            : "".concat((size / 1024).toFixed(1), " KB");
+            ? `${(size / (1024 * 1024)).toFixed(1)} MB`
+            : `${(size / 1024).toFixed(1)} KB`;
     };
-    var _m = useDeleteMediaMutation(), deleteMedia = _m[0], _o = _m[1], isMediaDeleted = _o.isLoading, isDeleteMediaSuceess = _o.isSuccess, isMediaDeleteError = _o.isError, mediaDeleteError = _o.error, DeletedMedia = _o.data;
-    useEffect(function () {
-        var fieldValue = formik === null || formik === void 0 ? void 0 : formik.values[fieldLayoutInfo.attrs.name];
+    const [deleteMedia, { isLoading: isMediaDeleted, isSuccess: isDeleteMediaSuceess, isError: isMediaDeleteError, error: mediaDeleteError, data: DeletedMedia },] = useDeleteMediaMutation();
+    useEffect(() => {
+        const fieldValue = formik?.values[fieldLayoutInfo.attrs.name];
         if (Array.isArray(fieldValue) && fieldValue.length > 0) {
-            var urls_1 = [];
-            var details_1 = [];
-            var objectUrls_1 = [];
-            fieldValue.forEach(function (file) {
+            const urls = [];
+            const details = [];
+            const objectUrls = [];
+            fieldValue.forEach((file) => {
                 if (file instanceof File) {
                     // New file (from local upload)
-                    var fileUrl = URL.createObjectURL(file);
-                    objectUrls_1.push(fileUrl); // Store URL for cleanup
-                    urls_1.push(fileUrl);
-                    details_1.push({
+                    const fileUrl = URL.createObjectURL(file);
+                    objectUrls.push(fileUrl); // Store URL for cleanup
+                    urls.push(fileUrl);
+                    details.push({
                         name: file.name,
                         type: file.type,
                         size: file.size,
-                        id: "".concat(file.name, "-").concat(file.size),
+                        id: `${file.name}-${file.size}`,
                         fileUrl: fileUrl // ✅ Store the generated object URL
                     });
                 }
                 else if (typeof file === "object" && file._full_url) {
-                    urls_1.push(file._full_url);
-                    details_1.push({
+                    urls.push(file._full_url);
+                    details.push({
                         name: file.originalFileName,
                         type: file.mimeType,
                         size: file.fileSize,
@@ -176,38 +146,38 @@ export var DefaultMediaMultipleFormEditWidget = function (_a) {
                     });
                 }
             });
-            setFileDetails(details_1);
+            setFileDetails(details);
         }
     }, [formik.values, fieldLayoutInfo.attrs.name]);
-    var handleDropImages = function (acceptedFiles) {
+    const handleDropImages = (acceptedFiles) => {
         if (!acceptedFiles.length)
             return;
         setFileSizeError(null);
-        var newFileDetails = __spreadArray([], fileDetails, true);
-        acceptedFiles.forEach(function (file) {
+        const newFileDetails = [...fileDetails];
+        acceptedFiles.forEach((file) => {
             newFileDetails.push({ name: file.name, type: file.type, size: file.size, id: file.id, fileUrl: file._full_url });
-            var reader = new FileReader();
+            const reader = new FileReader();
             reader.readAsDataURL(file);
         });
         setFileDetails(newFileDetails);
         formik.setFieldValue(fieldLayoutInfo.attrs.name, acceptedFiles);
     };
-    var confirmDeleteFile = function (fileId, deleteId) {
+    const confirmDeleteFile = (fileId, deleteId) => {
         setSelectedFileId(fileId);
         setDeleteImageDialogVisible(true);
         setImageToBeDeletedData(deleteId);
     };
-    var deleteFile = function () {
+    const deleteFile = () => {
         if (selectedFileId && imageToBeDeletedData) {
             // Remove file from UI before making API call
-            setFileDetails(function (prev) { return prev.filter(function (file) { return "".concat(file.name, "-").concat(file.size) !== selectedFileId; }); });
+            setFileDetails((prev) => prev.filter((file) => `${file.name}-${file.size}` !== selectedFileId));
             deleteMedia(imageToBeDeletedData)
                 .unwrap()
-                .then(function () {
+                .then(() => {
                 // Update form state
-                formik.setFieldValue(fieldLayoutInfo.attrs.name, fileDetails.filter(function (file) { return "".concat(file.name, "-").concat(file.size) !== selectedFileId; }));
+                formik.setFieldValue(fieldLayoutInfo.attrs.name, fileDetails.filter((file) => `${file.name}-${file.size}` !== selectedFileId));
             })
-                .catch(function (error) {
+                .catch((error) => {
                 console.error(ERROR_MESSAGES.ERROR_DELETING_FILE, error);
             });
             setDeleteImageDialogVisible(false);
@@ -215,45 +185,43 @@ export var DefaultMediaMultipleFormEditWidget = function (_a) {
             setSelectedFileId(null);
         }
     };
-    var _p = useDropzone({
+    const { getRootProps, getInputProps, isDragActive, } = useDropzone({
         onDrop: handleDropImages,
-        onDropRejected: function (fileRejections) {
-            var _a;
-            var rejection = fileRejections[0];
-            var sizeError = rejection.errors.find(function (err) { return err.code === 'file-too-large'; });
+        onDropRejected: (fileRejections) => {
+            const rejection = fileRejections[0];
+            const sizeError = rejection.errors.find(err => err.code === 'file-too-large');
             if (sizeError) {
                 setFileSizeError(ERROR_MESSAGES.FILE_TOO_LAREG(fieldMetadata.mediaMaxSizeKb));
                 ERROR_MESSAGES.FILE_TOO_LAREG(fieldMetadata.mediaMaxSizeKb);
             }
             else {
-                setFileSizeError(((_a = rejection.errors[0]) === null || _a === void 0 ? void 0 : _a.message) || ERROR_MESSAGES.FILE_NOT_ACCEPT);
+                setFileSizeError(rejection.errors[0]?.message || ERROR_MESSAGES.FILE_NOT_ACCEPT);
             }
         },
         accept: getAcceptedFileTypes(fieldMetadata.mediaTypes),
         maxSize: fieldMetadata.mediaMaxSizeKb * 1024,
-    }), getRootProps = _p.getRootProps, getInputProps = _p.getInputProps, isDragActive = _p.isDragActive;
-    var isFormFieldValid = function (formik, fieldName) { return formik.touched[fieldName] && formik.errors[fieldName]; };
-    var _q = useState(false), isShowAllFiles = _q[0], setShowAllFiles = _q[1];
-    var DynamicWidget = getExtensionComponent("SolidFormFieldViewMediaMultipleWidget");
-    var widgetProps = {
+    });
+    const isFormFieldValid = (formik, fieldName) => formik.touched[fieldName] && formik.errors[fieldName];
+    const [isShowAllFiles, setShowAllFiles] = useState(false);
+    let DynamicWidget = getExtensionComponent("SolidFormFieldViewMediaMultipleWidget");
+    const widgetProps = {
         formik: formik,
         fieldContext: fieldContext,
         setLightboxUrls: setLightboxUrls,
         setOpenLightbox: setOpenLightbox
     };
-    var handleFileView = function (url) {
-        var _a;
-        var downloadOnlyExt = [
+    const handleFileView = (url) => {
+        const downloadOnlyExt = [
             "txt", "zip", "rar",
             "doc", "docx",
             "xls", "xlsx",
             "ppt", "pptx"
         ];
-        var fileUrl = (url === null || url === void 0 ? void 0 : url.fileUrl) || "";
-        var cleanUrl = fileUrl.split("?")[0];
-        var ext = (_a = cleanUrl.split(".").pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase();
+        const fileUrl = url?.fileUrl || "";
+        const cleanUrl = fileUrl.split("?")[0];
+        const ext = cleanUrl.split(".").pop()?.toLowerCase();
         if (ext && downloadOnlyExt.includes(ext)) {
-            var link = document.createElement('a');
+            const link = document.createElement('a');
             link.href = url.fileUrl;
             link.download = ''; // or specify a file name like 'file.pdf'
             link.target = '_blank';
@@ -262,77 +230,75 @@ export var DefaultMediaMultipleFormEditWidget = function (_a) {
             document.body.removeChild(link);
         }
         else {
-            setLightboxUrls === null || setLightboxUrls === void 0 ? void 0 : setLightboxUrls([
+            setLightboxUrls?.([
                 { src: url.fileUrl, downloadUrl: url.fileUrl },
             ]);
-            setOpenLightbox === null || setOpenLightbox === void 0 ? void 0 : setOpenLightbox(true);
+            setOpenLightbox?.(true);
         }
     };
     return (_jsxs("div", { style: readOnlyPermission === true ? { filter: 'opacity(50%)', pointerEvents: 'none' } : {}, children: [_jsxs("div", { className: "flex flex-column gap-2 mt-1 sm:mt-2 md:mt-3 lg:mt-4 relative", children: [showFieldLabel != false &&
-                        _jsxs("label", { htmlFor: fieldLayoutInfo.attrs.name, className: "form-field-label", children: [fieldLabel, fieldMetadata.required && _jsx("span", { className: "text-red-500", children: " *" }), _jsx(SolidFieldTooltip, { fieldContext: fieldContext })] }), _jsxs("div", { className: "relative", children: [_jsxs("div", __assign({}, getRootProps(), { className: "solid-dropzone-wrapper", children: [_jsx("input", __assign({}, getInputProps())), _jsx(DropzonePlaceholder, { mediaTypes: fieldMetadata.mediaTypes, mediaMaxSizeKb: fieldMetadata.mediaMaxSizeKb })] })), isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (_jsx("div", { className: "absolute mt-1", children: _jsx(Message, { severity: "error", text: (_f = formik === null || formik === void 0 ? void 0 : formik.errors[fieldLayoutInfo.attrs.name]) === null || _f === void 0 ? void 0 : _f.toString() }) }))] }), fileSizeError &&
-                        _jsx(Message, { severity: "error", text: fileSizeError === null || fileSizeError === void 0 ? void 0 : fileSizeError.toString() })] }), fileDetails.length > 0 &&
-                _jsx("div", { className: "solid-file-upload-wrapper", children: _jsxs("div", { className: "flex align-items-center md:gap-2", children: [_jsx(FileReaderExt, { fileDetails: fileDetails[0] }), _jsxs("div", { className: "w-full flex flex-column gap-1", children: [_jsxs("div", { className: "flex align-items-center justify-content-between", children: [_jsx("p", { className: "font-normal w-9 text-primary m-0 solid-img-text-wrapper", style: { cursor: 'pointer' }, onClick: function () { return handleFileView(fileDetails[0]); }, children: fileDetails[0].name }), _jsxs("div", { className: "flex align-items-center md:gap-2", children: [_jsx("div", { children: _jsx(Button, { type: "button", text: true, icon: "pi pi-download", size: "small", style: {
+                        _jsxs("label", { htmlFor: fieldLayoutInfo.attrs.name, className: "form-field-label", children: [fieldLabel, fieldMetadata.required && _jsx("span", { className: "text-red-500", children: " *" }), _jsx(SolidFieldTooltip, { fieldContext: fieldContext })] }), _jsxs("div", { className: "relative", children: [_jsxs("div", { ...getRootProps(), className: "solid-dropzone-wrapper", children: [_jsx("input", { ...getInputProps() }), _jsx(DropzonePlaceholder, { mediaTypes: fieldMetadata.mediaTypes, mediaMaxSizeKb: fieldMetadata.mediaMaxSizeKb })] }), isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (_jsx("div", { className: "absolute mt-1", children: _jsx(Message, { severity: "error", text: formik?.errors[fieldLayoutInfo.attrs.name]?.toString() }) }))] }), fileSizeError &&
+                        _jsx(Message, { severity: "error", text: fileSizeError?.toString() })] }), fileDetails.length > 0 &&
+                _jsx("div", { className: "solid-file-upload-wrapper", children: _jsxs("div", { className: "flex align-items-center md:gap-2", children: [_jsx(FileReaderExt, { fileDetails: fileDetails[0] }), _jsxs("div", { className: "w-full flex flex-column gap-1", children: [_jsxs("div", { className: "flex align-items-center justify-content-between", children: [_jsx("p", { className: "font-normal w-9 text-primary m-0 solid-img-text-wrapper", style: { cursor: 'pointer' }, onClick: () => handleFileView(fileDetails[0]), children: fileDetails[0].name }), _jsxs("div", { className: "flex align-items-center md:gap-2", children: [_jsx("div", { children: _jsx(Button, { type: "button", text: true, icon: "pi pi-download", size: "small", style: {
                                                                 height: 16,
                                                                 width: 16
-                                                            }, onClick: function () { var _a, _b; return downloadMediaFile((_a = fileDetails[0]) === null || _a === void 0 ? void 0 : _a.fileUrl, (_b = fileDetails[0]) === null || _b === void 0 ? void 0 : _b.name); } }) }), _jsx("div", { children: _jsx(Button, { type: "button", text: true, icon: "pi pi-times", size: "small", severity: "secondary", 
+                                                            }, onClick: () => downloadMediaFile(fileDetails[0]?.fileUrl, fileDetails[0]?.name) }) }), _jsx("div", { children: _jsx(Button, { type: "button", text: true, icon: "pi pi-times", size: "small", severity: "secondary", 
                                                             // className="p-2"
                                                             style: {
                                                                 height: 16,
                                                                 width: 16
-                                                            }, onClick: function () { return confirmDeleteFile("".concat(fileDetails[0].name, "-").concat(fileDetails[0].size), fileDetails[0].id); } }) })] })] }), _jsx("div", { className: "flex align-items-center gap-2 text-sm", children: formatFileSize(fileDetails[0].size) })] })] }) }), fileDetails.length > 1 &&
-                _jsxs("div", { className: "flex align-items-center mt-1", children: [_jsxs("p", { className: "m-0", children: [fileDetails.length - 1, " items"] }), _jsx("div", { children: _jsx(Button, { type: "button", size: "small", text: true, label: "View", onClick: function () { return setShowAllFiles(true); } }) })] }), _jsx(Dialog, { visible: isShowAllFiles, header: "Items Uploaded", modal: true, onHide: function () { return setShowAllFiles(false); }, style: { minWidth: 450 }, children: fileDetails.length > 1 &&
-                    fileDetails.map(function (file, index) {
-                        var fileId = "".concat(file.name, "-").concat(file.size);
-                        return (_jsx("div", { className: "solid-file-upload-wrapper", children: _jsxs("div", { className: "flex align-items-center md:gap-2", children: [_jsx(FileReaderExt, { fileDetails: file }), _jsxs("div", { className: "w-full flex flex-column gap-1", children: [_jsxs("div", { className: "flex align-items-center justify-content-between", children: [_jsx("p", { className: "font-normal w-11 text-primary m-0 solid-img-text-wrapper", style: { cursor: 'pointer' }, onClick: function () { return handleFileView(file); }, children: file.name }), _jsxs("div", { className: "flex align-items-center md:gap-2", children: [_jsx("div", { children: _jsx(Button, { type: "button", text: true, icon: "pi pi-download", size: "small", style: {
+                                                            }, onClick: () => confirmDeleteFile(`${fileDetails[0].name}-${fileDetails[0].size}`, fileDetails[0].id) }) })] })] }), _jsx("div", { className: "flex align-items-center gap-2 text-sm", children: formatFileSize(fileDetails[0].size) })] })] }) }), fileDetails.length > 1 &&
+                _jsxs("div", { className: "flex align-items-center mt-1", children: [_jsxs("p", { className: "m-0", children: [fileDetails.length - 1, " items"] }), _jsx("div", { children: _jsx(Button, { type: "button", size: "small", text: true, label: "View", onClick: () => setShowAllFiles(true) }) })] }), _jsx(Dialog, { visible: isShowAllFiles, header: "Items Uploaded", modal: true, onHide: () => setShowAllFiles(false), style: { minWidth: 450 }, children: fileDetails.length > 1 &&
+                    fileDetails.map((file, index) => {
+                        const fileId = `${file.name}-${file.size}`;
+                        return (_jsx("div", { className: "solid-file-upload-wrapper", children: _jsxs("div", { className: "flex align-items-center md:gap-2", children: [_jsx(FileReaderExt, { fileDetails: file }), _jsxs("div", { className: "w-full flex flex-column gap-1", children: [_jsxs("div", { className: "flex align-items-center justify-content-between", children: [_jsx("p", { className: "font-normal w-11 text-primary m-0 solid-img-text-wrapper", style: { cursor: 'pointer' }, onClick: () => handleFileView(file), children: file.name }), _jsxs("div", { className: "flex align-items-center md:gap-2", children: [_jsx("div", { children: _jsx(Button, { type: "button", text: true, icon: "pi pi-download", size: "small", style: {
                                                                         height: 16,
                                                                         width: 16
-                                                                    }, onClick: function () { return downloadMediaFile(file === null || file === void 0 ? void 0 : file.fileUrl, file === null || file === void 0 ? void 0 : file.name); } }) }), _jsx("div", { children: _jsx(Button, { type: "button", text: true, icon: "pi pi-times", size: "small", severity: "secondary", 
+                                                                    }, onClick: () => downloadMediaFile(file?.fileUrl, file?.name) }) }), _jsx("div", { children: _jsx(Button, { type: "button", text: true, icon: "pi pi-times", size: "small", severity: "secondary", 
                                                                     // className="p-2"
                                                                     style: {
                                                                         height: 16,
                                                                         width: 16
-                                                                    }, onClick: function () { return confirmDeleteFile(fileId, file === null || file === void 0 ? void 0 : file.id); } }) })] })] }), _jsx("div", { className: "flex align-items-center gap-2 text-sm", children: formatFileSize(file.size) })] })] }) }, fileId));
-                    }) }), _jsx(Dialog, { visible: isDeleteImageDialogVisible, header: "Confirm Delete", modal: true, className: "solid-confirm-dialog", footer: function () { return (_jsxs("div", { className: "flex justify-content-center", children: [_jsx(Button, { type: "button", label: "Yes", icon: "pi pi-check", className: 'small-button', severity: "danger", autoFocus: true, onClick: deleteFile }), _jsx(Button, { type: "button", label: "No", icon: "pi pi-times", className: 'small-button', onClick: function () { return setDeleteImageDialogVisible(false); } })] })); }, onHide: function () { return setDeleteImageDialogVisible(false); }, children: _jsx("p", { children: "Are you sure you want to delete image?" }) })] }));
+                                                                    }, onClick: () => confirmDeleteFile(fileId, file?.id) }) })] })] }), _jsx("div", { className: "flex align-items-center gap-2 text-sm", children: formatFileSize(file.size) })] })] }) }, fileId));
+                    }) }), _jsx(Dialog, { visible: isDeleteImageDialogVisible, header: "Confirm Delete", modal: true, className: "solid-confirm-dialog", footer: () => (_jsxs("div", { className: "flex justify-content-center", children: [_jsx(Button, { type: "button", label: "Yes", icon: "pi pi-check", className: 'small-button', severity: "danger", autoFocus: true, onClick: deleteFile }), _jsx(Button, { type: "button", label: "No", icon: "pi pi-times", className: 'small-button', onClick: () => setDeleteImageDialogVisible(false) })] })), onHide: () => setDeleteImageDialogVisible(false), children: _jsx("p", { children: "Are you sure you want to delete image?" }) })] }));
 };
-export var DefaultMediaMultipleFormViewWidget = function (_a) {
-    var _b, _c, _d;
-    var formik = _a.formik, fieldContext = _a.fieldContext, setLightboxUrls = _a.setLightboxUrls, setOpenLightbox = _a.setOpenLightbox;
-    var _e = useState([]), fileDetails = _e[0], setFileDetails = _e[1];
-    var _f = useState(false), isShowAllFiles = _f[0], setShowAllFiles = _f[1];
-    var fieldMetadata = fieldContext.fieldMetadata;
-    var fieldLayoutInfo = fieldContext.field;
-    var className = ((_b = fieldLayoutInfo.attrs) === null || _b === void 0 ? void 0 : _b.className) || 'field col-12';
-    var fieldLabel = (_c = fieldLayoutInfo.attrs.label) !== null && _c !== void 0 ? _c : fieldMetadata.displayName;
-    var showFieldLabel = (_d = fieldLayoutInfo === null || fieldLayoutInfo === void 0 ? void 0 : fieldLayoutInfo.attrs) === null || _d === void 0 ? void 0 : _d.showLabel;
+export const DefaultMediaMultipleFormViewWidget = ({ formik, fieldContext, setLightboxUrls, setOpenLightbox }) => {
+    const [fileDetails, setFileDetails] = useState([]);
+    const [isShowAllFiles, setShowAllFiles] = useState(false);
+    const fieldMetadata = fieldContext.fieldMetadata;
+    const fieldLayoutInfo = fieldContext.field;
+    const className = fieldLayoutInfo.attrs?.className || 'field col-12';
+    const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
+    const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
     // useEffect(() => { formik.setFieldValue(fieldLayoutInfo.attrs.name, "false") }, [])
-    var formatFileSize = function (size) {
+    const formatFileSize = (size) => {
         return size >= 1024 * 1024
-            ? "".concat((size / (1024 * 1024)).toFixed(1), " MB")
-            : "".concat((size / 1024).toFixed(1), " KB");
+            ? `${(size / (1024 * 1024)).toFixed(1)} MB`
+            : `${(size / 1024).toFixed(1)} KB`;
     };
-    useEffect(function () {
-        var fieldValue = formik === null || formik === void 0 ? void 0 : formik.values[fieldLayoutInfo.attrs.name];
+    useEffect(() => {
+        const fieldValue = formik?.values[fieldLayoutInfo.attrs.name];
         if (Array.isArray(fieldValue) && fieldValue.length > 0) {
-            var urls_2 = [];
-            var details_2 = [];
-            var objectUrls_2 = [];
-            fieldValue.forEach(function (file) {
+            const urls = [];
+            const details = [];
+            const objectUrls = [];
+            fieldValue.forEach((file) => {
                 if (file instanceof File) {
                     // New file (from local upload)
-                    var fileUrl = URL.createObjectURL(file);
-                    objectUrls_2.push(fileUrl); // Store URL for cleanup
-                    urls_2.push(fileUrl);
-                    details_2.push({
+                    const fileUrl = URL.createObjectURL(file);
+                    objectUrls.push(fileUrl); // Store URL for cleanup
+                    urls.push(fileUrl);
+                    details.push({
                         name: file.name,
                         type: file.type,
                         size: file.size,
-                        id: "".concat(file.name, "-").concat(file.size),
+                        id: `${file.name}-${file.size}`,
                         fileUrl: fileUrl // ✅ Store the generated object URL
                     });
                 }
                 else if (typeof file === "object" && file._full_url) {
-                    urls_2.push(file._full_url);
-                    details_2.push({
+                    urls.push(file._full_url);
+                    details.push({
                         name: file.originalFileName,
                         type: file.mimeType,
                         size: file.fileSize,
@@ -341,22 +307,21 @@ export var DefaultMediaMultipleFormViewWidget = function (_a) {
                     });
                 }
             });
-            setFileDetails(details_2);
+            setFileDetails(details);
         }
     }, [formik.values, fieldLayoutInfo.attrs.name]);
-    var handleFileView = function (url) {
-        var _a;
-        var downloadOnlyExt = [
+    const handleFileView = (url) => {
+        const downloadOnlyExt = [
             "txt", "zip", "rar",
             "doc", "docx",
             "xls", "xlsx",
             "ppt", "pptx"
         ];
-        var fileUrl = (url === null || url === void 0 ? void 0 : url.fileUrl) || "";
-        var cleanUrl = fileUrl.split("?")[0];
-        var ext = (_a = cleanUrl.split(".").pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase();
+        const fileUrl = url?.fileUrl || "";
+        const cleanUrl = fileUrl.split("?")[0];
+        const ext = cleanUrl.split(".").pop()?.toLowerCase();
         if (ext && downloadOnlyExt.includes(ext)) {
-            var link = document.createElement('a');
+            const link = document.createElement('a');
             link.href = url.fileUrl;
             link.download = ''; // or specify a file name like 'file.pdf'
             link.target = '_blank';
@@ -365,25 +330,25 @@ export var DefaultMediaMultipleFormViewWidget = function (_a) {
             document.body.removeChild(link);
         }
         else {
-            setLightboxUrls === null || setLightboxUrls === void 0 ? void 0 : setLightboxUrls([
+            setLightboxUrls?.([
                 { src: url.fileUrl, downloadUrl: url.fileUrl },
             ]);
-            setOpenLightbox === null || setOpenLightbox === void 0 ? void 0 : setOpenLightbox(true);
+            setOpenLightbox?.(true);
         }
     };
     return (_jsxs("div", { children: [showFieldLabel != false &&
                 _jsxs("label", { htmlFor: fieldLayoutInfo.attrs.name, className: "form-field-label mt-4 font-medium", children: [fieldLabel, _jsx(SolidFieldTooltip, { fieldContext: fieldContext })] }), fileDetails.length > 0 &&
-                _jsx("div", { className: "solid-file-view-wrapper", children: _jsxs("div", { className: "flex align-items-center md:gap-2", children: [_jsx(FileReaderExt, { fileDetails: fileDetails[0] }), _jsxs("div", { className: "w-full flex flex-column gap-1", children: [_jsxs("div", { className: "flex align-items-center justify-content-between", children: [_jsx("p", { className: "font-normal w-11 text-primary m-0 solid-img-text-wrapper", style: { cursor: 'pointer' }, onClick: function () { return handleFileView(fileDetails[0]); }, children: fileDetails[0].name }), _jsx("div", { className: "flex align-items-center md:gap-2", children: _jsx("div", { children: _jsx(Button, { type: "button", text: true, icon: "pi pi-download", size: "small", style: {
+                _jsx("div", { className: "solid-file-view-wrapper", children: _jsxs("div", { className: "flex align-items-center md:gap-2", children: [_jsx(FileReaderExt, { fileDetails: fileDetails[0] }), _jsxs("div", { className: "w-full flex flex-column gap-1", children: [_jsxs("div", { className: "flex align-items-center justify-content-between", children: [_jsx("p", { className: "font-normal w-11 text-primary m-0 solid-img-text-wrapper", style: { cursor: 'pointer' }, onClick: () => handleFileView(fileDetails[0]), children: fileDetails[0].name }), _jsx("div", { className: "flex align-items-center md:gap-2", children: _jsx("div", { children: _jsx(Button, { type: "button", text: true, icon: "pi pi-download", size: "small", style: {
                                                             height: 16,
                                                             width: 16
-                                                        }, onClick: function () { var _a, _b; return downloadMediaFile((_a = fileDetails[0]) === null || _a === void 0 ? void 0 : _a.fileUrl, (_b = fileDetails[0]) === null || _b === void 0 ? void 0 : _b.name); } }) }) })] }), _jsx("div", { className: "flex align-items-center gap-2 text-sm", children: formatFileSize(fileDetails[0].size) })] })] }) }), fileDetails.length > 1 &&
-                _jsxs("div", { className: "flex align-items-center mt-1", children: [_jsxs("p", { className: "m-0", children: [fileDetails.length - 1, " items"] }), _jsx("div", { children: _jsx(Button, { type: "button", size: "small", text: true, label: "View", onClick: function () { return setShowAllFiles(true); } }) })] }), _jsx(Dialog, { visible: isShowAllFiles, header: "Items Uploaded", modal: true, onHide: function () { return setShowAllFiles(false); }, style: { minWidth: 450 }, children: fileDetails.length > 1 &&
-                    fileDetails.map(function (file, index) {
-                        var fileId = "".concat(file.name, "-").concat(file.size);
-                        return (_jsx("div", { className: "solid-file-view-wrapper", children: _jsxs("div", { className: "flex align-items-center md:gap-2", children: [_jsx(FileReaderExt, { fileDetails: file }), _jsxs("div", { className: "w-full flex flex-column gap-1", children: [_jsxs("div", { className: "flex align-items-center justify-content-between", children: [_jsx("p", { className: "font-normal w-11 solid-img-text-wrapper", style: { cursor: 'pointer' }, onClick: function () { return handleFileView(file); }, children: file.name }), _jsx("div", { className: "flex align-items-center md:gap-2", children: _jsx("div", { children: _jsx(Button, { type: "button", text: true, icon: "pi pi-download", size: "small", style: {
+                                                        }, onClick: () => downloadMediaFile(fileDetails[0]?.fileUrl, fileDetails[0]?.name) }) }) })] }), _jsx("div", { className: "flex align-items-center gap-2 text-sm", children: formatFileSize(fileDetails[0].size) })] })] }) }), fileDetails.length > 1 &&
+                _jsxs("div", { className: "flex align-items-center mt-1", children: [_jsxs("p", { className: "m-0", children: [fileDetails.length - 1, " items"] }), _jsx("div", { children: _jsx(Button, { type: "button", size: "small", text: true, label: "View", onClick: () => setShowAllFiles(true) }) })] }), _jsx(Dialog, { visible: isShowAllFiles, header: "Items Uploaded", modal: true, onHide: () => setShowAllFiles(false), style: { minWidth: 450 }, children: fileDetails.length > 1 &&
+                    fileDetails.map((file, index) => {
+                        const fileId = `${file.name}-${file.size}`;
+                        return (_jsx("div", { className: "solid-file-view-wrapper", children: _jsxs("div", { className: "flex align-items-center md:gap-2", children: [_jsx(FileReaderExt, { fileDetails: file }), _jsxs("div", { className: "w-full flex flex-column gap-1", children: [_jsxs("div", { className: "flex align-items-center justify-content-between", children: [_jsx("p", { className: "font-normal w-11 solid-img-text-wrapper", style: { cursor: 'pointer' }, onClick: () => handleFileView(file), children: file.name }), _jsx("div", { className: "flex align-items-center md:gap-2", children: _jsx("div", { children: _jsx(Button, { type: "button", text: true, icon: "pi pi-download", size: "small", style: {
                                                                     height: 16,
                                                                     width: 16
-                                                                }, onClick: function () { return downloadMediaFile(file === null || file === void 0 ? void 0 : file.fileUrl, file === null || file === void 0 ? void 0 : file.name); } }) }) })] }), _jsx("div", { className: "flex align-items-center gap-2 text-sm", children: formatFileSize(file.size) })] })] }) }, fileId));
+                                                                }, onClick: () => downloadMediaFile(file?.fileUrl, file?.name) }) }) })] }), _jsx("div", { className: "flex align-items-center gap-2 text-sm", children: formatFileSize(file.size) })] })] }) }, fileId));
                     }) })] }));
 };
 //# sourceMappingURL=SolidMediaMultipleField.js.map