@solidxai/core-ui 0.1.13-beta.1 → 0.1.13-beta.3

package/dist/components/core/chatter/useChatterMentions.ts

@@ -0,0 +1,160 @@
+import { type ChangeEvent, type KeyboardEvent, type MouseEvent, type RefObject, useEffect, useState } from 'react';
+import { useLazyGetusersQuery } from '../../../redux/api/userApi';
+import { ChatterMention, getMentionCandidate } from './chatterMentions';
+
+interface UseChatterMentionsProps {
+    value: string;
+    onChange: (value: string) => void;
+    textareaRef: RefObject<HTMLTextAreaElement | null>;
+}
+
+export const useChatterMentions = ({ value, onChange, textareaRef }: UseChatterMentionsProps) => {
+    const [mentions, setMentions] = useState<ChatterMention[]>([]);
+    const [mentionQuery, setMentionQuery] = useState('');
+    const [mentionRange, setMentionRange] = useState<{ start: number; end: number } | null>(null);
+    const [mentionSuggestions, setMentionSuggestions] = useState<any[]>([]);
+    const [activeMentionIndex, setActiveMentionIndex] = useState(0);
+    const [getUsers, { isFetching: isFetchingMentionUsers }] = useLazyGetusersQuery();
+
+    const closeMentionMenu = () => {
+        setMentionRange(null);
+        setMentionQuery('');
+        setMentionSuggestions([]);
+        setActiveMentionIndex(0);
+    };
+
+    const updateMentionState = (nextValue: string, cursorPosition: number) => {
+        const candidate = getMentionCandidate(nextValue, cursorPosition);
+        if (!candidate) {
+            closeMentionMenu();
+            return;
+        }
+
+        setMentionRange({ start: candidate.start, end: candidate.end });
+        setMentionQuery(candidate.query);
+    };
+
+    const handleMentionTextChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
+        const nextValue = event.target.value;
+        onChange(nextValue);
+        updateMentionState(nextValue, event.target.selectionStart ?? nextValue.length);
+    };
+
+    const handleMentionKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {
+        if (!mentionRange) return;
+
+        if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            setActiveMentionIndex(prev => {
+                if (mentionSuggestions.length === 0) return 0;
+                return (prev + 1) % mentionSuggestions.length;
+            });
+            return;
+        }
+
+        if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            setActiveMentionIndex(prev => {
+                if (mentionSuggestions.length === 0) return 0;
+                return (prev - 1 + mentionSuggestions.length) % mentionSuggestions.length;
+            });
+            return;
+        }
+
+        if (event.key === 'Enter' || event.key === 'Tab') {
+            if (mentionSuggestions[activeMentionIndex]) {
+                event.preventDefault();
+                handleSelectMention(mentionSuggestions[activeMentionIndex]);
+            }
+            return;
+        }
+
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            closeMentionMenu();
+        }
+    };
+
+    const handleMentionKeyUp = (event: KeyboardEvent<HTMLTextAreaElement>) => {
+        if (['ArrowDown', 'ArrowUp', 'Enter', 'Tab', 'Escape'].includes(event.key)) return;
+        const target = event.currentTarget;
+        updateMentionState(target.value, target.selectionStart ?? target.value.length);
+    };
+
+    const handleMentionClick = (event: MouseEvent<HTMLTextAreaElement>) => {
+        updateMentionState(event.currentTarget.value, event.currentTarget.selectionStart ?? event.currentTarget.value.length);
+    };
+
+    const handleSelectMention = (user: any) => {
+        if (!mentionRange) return;
+        const username = user?.username;
+        if (!username) return;
+
+        const mention: ChatterMention = {
+            username,
+            display_name: user?.fullName || username,
+            id: String(user?.id),
+        };
+        const mentionText = `@${mention.username}`;
+        const nextValue = `${value.slice(0, mentionRange.start)}${mentionText} ${value.slice(mentionRange.end)}`;
+        const nextCursorPosition = mentionRange.start + mentionText.length + 1;
+
+        onChange(nextValue);
+        setMentions(prev => (
+            prev.some(item => item.id === mention.id || item.username === mention.username)
+                ? prev
+                : [...prev, mention]
+        ));
+        closeMentionMenu();
+
+        window.requestAnimationFrame(() => {
+            textareaRef.current?.focus();
+            textareaRef.current?.setSelectionRange(nextCursorPosition, nextCursorPosition);
+        });
+    };
+
+    const resetMentions = (nextMentions: ChatterMention[] = []) => {
+        setMentions(nextMentions);
+        closeMentionMenu();
+    };
+
+    useEffect(() => {
+        if (!mentionRange) return;
+
+        let isActive = true;
+        const timeout = window.setTimeout(async () => {
+            try {
+                const encodedQuery = encodeURIComponent(mentionQuery);
+                const queryString = mentionQuery
+                    ? `filters[username][$containsi]=${encodedQuery}&limit=8`
+                    : 'limit=8';
+                const response = await getUsers(queryString).unwrap();
+                if (!isActive) return;
+                setMentionSuggestions(response?.data?.records || []);
+                setActiveMentionIndex(0);
+            } catch (error) {
+                if (isActive) setMentionSuggestions([]);
+            }
+        }, 180);
+
+        return () => {
+            isActive = false;
+            window.clearTimeout(timeout);
+        };
+    }, [mentionQuery, mentionRange, getUsers]);
+
+    return {
+        mentions,
+        setMentions,
+        mentionRange,
+        mentionSuggestions,
+        activeMentionIndex,
+        isFetchingMentionUsers,
+        handleMentionTextChange,
+        handleMentionKeyDown,
+        handleMentionKeyUp,
+        handleMentionClick,
+        handleSelectMention,
+        resetMentions,
+    };
+};

package/dist/components/core/form/fields/SolidMediaMultipleField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SolidMediaMultipleField.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/form/fields/SolidMediaMultipleField.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,GAAG,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAK3E,OAAO,EAA6B,8BAA8B,EAAE,MAAM,8BAA8B,CAAC;AAMzG,qBAAa,uBAAwB,YAAW,WAAW;IAEvD,OAAO,CAAC,YAAY,CAAkB;IACtC,OAAO,CAAC,eAAe,CAAC,CAAyD;IACjF,OAAO,CAAC,eAAe,CAAC,CAA0B;gBACtC,YAAY,EAAE,eAAe,EAAE,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,WAAW,EAAE,MAAM,CAAA;KAAE,EAAE,KAAK,IAAI,EAC/G,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI;IAM7C,cAAc,CAAC,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,QAAQ,GAAG,GAAG;IAYnD,YAAY,IAAI,GAAG;IAKnB,gBAAgB,IAAI,GAAG,CAAC,MAAM;IAiD9B,MAAM,CAAC,MAAM,EAAE,YAAY;IAmC3B,yBAAyB,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY;CAcjE;AAGD,eAAO,MAAM,kCAAkC,+DAAgE,8BAA8B,4CAwW5I,CAAA;AAED,eAAO,MAAM,kCAAkC,+DAAgE,8BAA8B,4CAqK5I,CAAA"}
+{"version":3,"file":"SolidMediaMultipleField.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/form/fields/SolidMediaMultipleField.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,GAAG,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAO3E,OAAO,EAA6B,8BAA8B,EAAE,MAAM,8BAA8B,CAAC;AAOzG,qBAAa,uBAAwB,YAAW,WAAW;IAEvD,OAAO,CAAC,YAAY,CAAkB;IACtC,OAAO,CAAC,eAAe,CAAC,CAAyD;IACjF,OAAO,CAAC,eAAe,CAAC,CAA0B;gBACtC,YAAY,EAAE,eAAe,EAAE,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,WAAW,EAAE,MAAM,CAAA;KAAE,EAAE,KAAK,IAAI,EAC/G,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI;IAM7C,cAAc,CAAC,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,QAAQ,GAAG,GAAG;IAYnD,YAAY,IAAI,GAAG;IAKnB,gBAAgB,IAAI,GAAG,CAAC,MAAM;IAiD9B,MAAM,CAAC,MAAM,EAAE,YAAY;IAmC3B,yBAAyB,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY;CAcjE;AAGD,eAAO,MAAM,kCAAkC,+DAAgE,8BAA8B,4CA+X5I,CAAA;AAED,eAAO,MAAM,kCAAkC,+DAAgE,8BAA8B,4CA0K5I,CAAA"}

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

@@ -67,6 +67,8 @@ import { FileReaderExt } from "../../../../components/common/FileReaderExt";
 import getAcceptedFileTypes from "../../../../helpers/getAcceptedFileTypes";
 import { downloadMediaFile } from "../../../../helpers/downloadMediaFile";
 import { getExtensionComponent } from "../../../../helpers/registry";
+import { openMediaInNewTab } from "../../../../helpers/mediaUrl";
+import { getMediaPreviewKind, isLightboxMediaKind } from "../../../../helpers/mediaType";
 import { SolidFieldTooltip } from "../../../../components/common/SolidFieldTooltip";
 import { ERROR_MESSAGES } from "../../../../constants/error-messages";
 import styles from "./solidFields.module.css";
@@ -233,40 +235,42 @@ export var DefaultMediaMultipleFormEditWidget = function (_a) {
     var deleteMedia = useDeleteMediaMutation()[0];
     useEffect(function () {
         var fieldValue = formik === null || formik === void 0 ? void 0 : formik.values[fieldLayoutInfo.attrs.name];
-        var objectUrls = [];
-        if (Array.isArray(fieldValue) && fieldValue.length > 0) {
-            var details_1 = [];
-            fieldValue.forEach(function (file) {
-                if (file instanceof File) {
-                    var fileUrl = URL.createObjectURL(file);
-                    objectUrls.push(fileUrl);
-                    details_1.push({
-                        name: file.name,
-                        type: file.type,
-                        size: file.size,
-                        mediaId: null,
-                        fileKey: buildMediaFieldKey(file),
-                        fileUrl: fileUrl
-                    });
-                }
-                else if (typeof file === "object" && file._full_url) {
-                    details_1.push({
-                        name: file.originalFileName,
-                        type: file.mimeType,
-                        size: file.fileSize,
-                        mediaId: getPersistedMediaId(file),
-                        fileKey: buildMediaFieldKey(file),
-                        fileUrl: file._full_url
-                    });
-                }
-            });
-            setFileDetails(details_1);
-        }
-        else {
+        if (!Array.isArray(fieldValue) || fieldValue.length === 0) {
             setFileDetails([]);
+            return;
         }
+        var objectUrls = [];
+        var details = fieldValue
+            .map(function (file) {
+            if (file instanceof File) {
+                var fileUrl_1 = URL.createObjectURL(file);
+                objectUrls.push(fileUrl_1);
+                return {
+                    name: file.name,
+                    type: file.type,
+                    size: file.size,
+                    mediaId: null,
+                    fileKey: buildMediaFieldKey(file),
+                    fileUrl: fileUrl_1,
+                };
+            }
+            var fileUrl = file === null || file === void 0 ? void 0 : file._full_url;
+            if (!fileUrl) {
+                return null;
+            }
+            return {
+                name: file.originalFileName,
+                type: file.mimeType,
+                size: file.fileSize,
+                mediaId: getPersistedMediaId(file),
+                fileKey: buildMediaFieldKey(file),
+                fileUrl: fileUrl,
+            };
+        })
+            .filter(function (detail) { return detail !== null; });
+        setFileDetails(details);
         return function () {
-            objectUrls.forEach(function (url) { return URL.revokeObjectURL(url); });
+            objectUrls.forEach(function (fileUrl) { return URL.revokeObjectURL(fileUrl); });
         };
     }, [formik.values, fieldLayoutInfo.attrs.name]);
     var handleDropImages = function (acceptedFiles) {
@@ -369,40 +373,41 @@ export var DefaultMediaMultipleFormEditWidget = function (_a) {
         setOpenLightbox: setOpenLightbox
     };
     var handleFileView = function (url) {
-        var _a;
-        var 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();
-        if (ext && downloadOnlyExt.includes(ext)) {
-            var link = document.createElement('a');
-            link.href = url.fileUrl;
-            link.download = ''; // or specify a file name like 'file.pdf'
-            link.target = '_blank';
-            document.body.appendChild(link);
-            link.click();
-            document.body.removeChild(link);
-        }
-        else {
+        var previewKind = getMediaPreviewKind({
+            url: url === null || url === void 0 ? void 0 : url.fileUrl,
+            fileName: url === null || url === void 0 ? void 0 : url.name,
+            mimeType: url === null || url === void 0 ? void 0 : url.type,
+        });
+        if (isLightboxMediaKind(previewKind)) {
             setLightboxUrls === null || setLightboxUrls === void 0 ? void 0 : setLightboxUrls([
-                { src: url.fileUrl, downloadUrl: url.fileUrl },
+                {
+                    src: url.fileUrl,
+                    downloadUrl: url.fileUrl,
+                    type: previewKind === "video" ? "video" : undefined
+                },
             ]);
             setOpenLightbox === null || setOpenLightbox === void 0 ? void 0 : setOpenLightbox(true);
+            return;
         }
+        openMediaInNewTab(url === null || url === void 0 ? void 0 : url.fileUrl);
     };
     return (_jsxs("div", { style: readOnlyPermission === true ? { filter: 'opacity(50%)', pointerEvents: 'none' } : {}, children: [_jsxs("div", { className: "".concat(styles.fieldWrapper, " relative"), children: [showFieldLabel != false &&
                         _jsxs("label", { htmlFor: fieldLayoutInfo.attrs.name, className: "".concat(styles.fieldLabel, " 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(SolidMessage, { severity: "error", text: (_p = formik === null || formik === void 0 ? void 0 : formik.errors[fieldLayoutInfo.attrs.name]) === null || _p === void 0 ? void 0 : _p.toString() }) }))] }), fileSizeError &&
                         _jsx(SolidMessage, { 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 items-center md:gap-2", children: [_jsx(FileReaderExt, { fileDetails: fileDetails[0] }), _jsxs("div", { className: "w-full flex flex-col gap-1", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("p", { className: "m-0 w-9 font-normal text-[var(--primary-color)] solid-img-text-wrapper", style: { cursor: 'pointer' }, onClick: function () { return handleFileView(fileDetails[0]); }, children: fileDetails[0].name }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("button", { type: "button", className: "solid-file-icon-btn", disabled: isFieldDisabled || isFieldReadonly, "aria-label": "Download file", 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); }, children: _jsx(SolidIcon, { name: "si-download", "aria-hidden": true }) }), _jsx("button", { type: "button", className: "solid-file-icon-btn is-danger", disabled: isFieldDisabled || isFieldReadonly, "aria-label": "Remove file", onClick: function () { return confirmDeleteFile(fileDetails[0].fileKey); }, children: _jsx(SolidIcon, { name: "si-times", "aria-hidden": true }) })] })] }), _jsx("div", { className: "flex items-center gap-2 text-sm", children: formatFileSize(fileDetails[0].size) })] })] }) }), fileDetails.length > 1 &&
+                _jsx("div", { className: "".concat(styles.mediaAttachmentCard, " mt-4"), children: _jsxs("div", { className: "".concat(styles.mediaAttachmentRow, " flex items-center md:gap-2"), children: [_jsx(FileReaderExt, { fileDetails: fileDetails[0] }), _jsxs("div", { className: "".concat(styles.mediaAttachmentMeta, " w-full"), children: [_jsxs("div", { className: "flex items-start justify-between gap-4", children: [_jsx("button", { type: "button", className: styles.mediaAttachmentName, onClick: function () { return handleFileView(fileDetails[0]); }, title: fileDetails[0].name, children: fileDetails[0].name }), _jsxs("div", { className: "".concat(styles.mediaAttachmentActions, " flex items-center gap-2"), children: [_jsx("button", { type: "button", className: "solid-file-icon-btn", disabled: isFieldDisabled || isFieldReadonly, "aria-label": "Download file", onClick: function (event) {
+                                                            var _a, _b;
+                                                            event.preventDefault();
+                                                            event.stopPropagation();
+                                                            downloadMediaFile((_a = fileDetails[0]) === null || _a === void 0 ? void 0 : _a.fileUrl, (_b = fileDetails[0]) === null || _b === void 0 ? void 0 : _b.name);
+                                                        }, children: _jsx(SolidIcon, { name: "si-download", "aria-hidden": true }) }), _jsx("button", { type: "button", className: "solid-file-icon-btn is-danger", disabled: isFieldDisabled || isFieldReadonly, "aria-label": "Remove file", onClick: function () { return confirmDeleteFile(fileDetails[0].fileKey); }, children: _jsx(SolidIcon, { name: "si-times", "aria-hidden": true }) })] })] }), _jsx("div", { className: styles.mediaAttachmentSize, children: formatFileSize(fileDetails[0].size) })] })] }) }), fileDetails.length > 1 &&
                 _jsxs("div", { className: "flex items-center mt-1", children: [_jsxs("p", { className: "m-0", children: [fileDetails.length - 1, " items"] }), _jsx("div", { children: _jsx(SolidButton, { type: "button", size: "sm", variant: "ghost", onClick: function () { return setShowAllFiles(true); }, children: "View" }) })] }), _jsxs(SolidDialog, { open: isShowAllFiles, onOpenChange: setShowAllFiles, style: { minWidth: 450 }, children: [_jsxs(SolidDialogHeader, { children: [_jsx(SolidDialogTitle, { children: "Items Uploaded" }), _jsx(SolidDialogClose, {})] }), _jsx(SolidDialogBody, { children: fileDetails.length > 1 &&
                             fileDetails.map(function (file, index) {
                                 var fileId = file.fileKey;
-                                return (_jsx("div", { className: "solid-file-upload-wrapper", children: _jsxs("div", { className: "flex items-center md:gap-2", children: [_jsx(FileReaderExt, { fileDetails: file }), _jsxs("div", { className: "w-full flex flex-col gap-1", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("p", { className: "m-0 w-11 font-normal text-[var(--primary-color)] solid-img-text-wrapper", style: { cursor: 'pointer' }, onClick: function () { return handleFileView(file); }, children: file.name }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("button", { type: "button", className: "solid-file-icon-btn", disabled: isFieldDisabled || isFieldReadonly, "aria-label": "Download file", onClick: function () { return downloadMediaFile(file === null || file === void 0 ? void 0 : file.fileUrl, file === null || file === void 0 ? void 0 : file.name); }, children: _jsx(SolidIcon, { name: "si-download", "aria-hidden": true }) }), _jsx("button", { type: "button", className: "solid-file-icon-btn is-danger", disabled: isFieldDisabled || isFieldReadonly, "aria-label": "Remove file", onClick: function () { return confirmDeleteFile(fileId); }, children: _jsx(SolidIcon, { name: "si-times", "aria-hidden": true }) })] })] }), _jsx("div", { className: "flex items-center gap-2 text-sm", children: formatFileSize(file.size) })] })] }) }, fileId));
+                                return (_jsx("div", { className: index === fileDetails.length - 1 ? "" : "mb-3", children: _jsx("div", { className: styles.mediaAttachmentCard, children: _jsxs("div", { className: "".concat(styles.mediaAttachmentRow, " flex items-center md:gap-2"), children: [_jsx(FileReaderExt, { fileDetails: file }), _jsxs("div", { className: "".concat(styles.mediaAttachmentMeta, " w-full"), children: [_jsxs("div", { className: "flex items-start justify-between gap-4", children: [_jsx("button", { type: "button", className: styles.mediaAttachmentName, onClick: function () { return handleFileView(file); }, title: file.name, children: file.name }), _jsxs("div", { className: "".concat(styles.mediaAttachmentActions, " flex items-center gap-2"), children: [_jsx("button", { type: "button", className: "solid-file-icon-btn", disabled: isFieldDisabled || isFieldReadonly, "aria-label": "Download file", onClick: function (event) {
+                                                                                event.preventDefault();
+                                                                                event.stopPropagation();
+                                                                                downloadMediaFile(file === null || file === void 0 ? void 0 : file.fileUrl, file === null || file === void 0 ? void 0 : file.name);
+                                                                            }, children: _jsx(SolidIcon, { name: "si-download", "aria-hidden": true }) }), _jsx("button", { type: "button", className: "solid-file-icon-btn is-danger", disabled: isFieldDisabled || isFieldReadonly, "aria-label": "Remove file", onClick: function () { return confirmDeleteFile(fileId); }, children: _jsx(SolidIcon, { name: "si-times", "aria-hidden": true }) })] })] }), _jsx("div", { className: styles.mediaAttachmentSize, children: formatFileSize(file.size) })] })] }) }) }, fileId));
                             }) })] }), _jsxs(SolidDialog, { open: isDeleteImageDialogVisible, onOpenChange: setDeleteImageDialogVisible, className: "solid-shadcn-confirm-dialog", children: [_jsxs(SolidDialogHeader, { className: "solid-shadcn-dialog-head", children: [_jsx(SolidDialogTitle, { children: "Confirm Delete" }), _jsx(SolidDialogClose, {})] }), _jsx(SolidDialogSeparator, { className: "solid-shadcn-dialog-sep" }), _jsx(SolidDialogBody, { className: "solid-shadcn-dialog-body", children: _jsx("p", { className: "solid-shadcn-dialog-text", children: "Are you sure you want to delete this file?" }) }), _jsxs(SolidDialogFooter, { className: "solid-shadcn-dialog-actions", children: [_jsx(SolidButton, { variant: "destructive", size: "sm", autoFocus: true, onClick: deleteFile, children: "Delete" }), _jsx(SolidButton, { variant: "outline", size: "sm", onClick: function () { return setDeleteImageDialogVisible(false); }, children: "Cancel" })] })] })] }));
 };
 export var DefaultMediaMultipleFormViewWidget = function (_a) {
@@ -423,68 +428,68 @@ export var DefaultMediaMultipleFormViewWidget = function (_a) {
     };
     useEffect(function () {
         var fieldValue = formik === null || formik === void 0 ? void 0 : formik.values[fieldLayoutInfo.attrs.name];
-        if (Array.isArray(fieldValue) && fieldValue.length > 0) {
-            var urls_1 = [];
-            var details_2 = [];
-            var objectUrls_1 = [];
-            fieldValue.forEach(function (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_2.push({
-                        name: file.name,
-                        type: file.type,
-                        size: file.size,
-                        id: "".concat(file.name, "-").concat(file.size),
-                        fileUrl: fileUrl // ✅ Store the generated object URL
-                    });
-                }
-                else if (typeof file === "object" && file._full_url) {
-                    urls_1.push(file._full_url);
-                    details_2.push({
-                        name: file.originalFileName,
-                        type: file.mimeType,
-                        size: file.fileSize,
-                        id: file.id,
-                        fileUrl: file._full_url
-                    });
-                }
-            });
-            setFileDetails(details_2);
+        if (!Array.isArray(fieldValue) || fieldValue.length === 0) {
+            setFileDetails([]);
+            return;
         }
+        var objectUrls = [];
+        var details = fieldValue
+            .map(function (file) {
+            if (file instanceof File) {
+                var fileUrl_2 = URL.createObjectURL(file);
+                objectUrls.push(fileUrl_2);
+                return {
+                    name: file.name,
+                    type: file.type,
+                    size: file.size,
+                    id: "".concat(file.name, "-").concat(file.size),
+                    fileUrl: fileUrl_2,
+                };
+            }
+            var fileUrl = file === null || file === void 0 ? void 0 : file._full_url;
+            if (!fileUrl) {
+                return null;
+            }
+            return {
+                name: file.originalFileName,
+                type: file.mimeType,
+                size: file.fileSize,
+                id: file.id,
+                fileUrl: fileUrl,
+            };
+        })
+            .filter(Boolean);
+        setFileDetails(details);
+        return function () {
+            objectUrls.forEach(function (fileUrl) { return URL.revokeObjectURL(fileUrl); });
+        };
     }, [formik.values, fieldLayoutInfo.attrs.name]);
     var handleFileView = function (url) {
-        var _a;
-        var 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();
-        if (ext && downloadOnlyExt.includes(ext)) {
-            var link = document.createElement('a');
-            link.href = url.fileUrl;
-            link.download = ''; // or specify a file name like 'file.pdf'
-            link.target = '_blank';
-            document.body.appendChild(link);
-            link.click();
-            document.body.removeChild(link);
-        }
-        else {
+        var previewKind = getMediaPreviewKind({
+            url: url === null || url === void 0 ? void 0 : url.fileUrl,
+            fileName: url === null || url === void 0 ? void 0 : url.name,
+            mimeType: url === null || url === void 0 ? void 0 : url.type,
+        });
+        if (isLightboxMediaKind(previewKind)) {
             setLightboxUrls === null || setLightboxUrls === void 0 ? void 0 : setLightboxUrls([
-                { src: url.fileUrl, downloadUrl: url.fileUrl },
+                {
+                    src: url.fileUrl,
+                    downloadUrl: url.fileUrl,
+                    type: previewKind === "video" ? "video" : undefined
+                },
             ]);
             setOpenLightbox === null || setOpenLightbox === void 0 ? void 0 : setOpenLightbox(true);
+            return;
         }
+        openMediaInNewTab(url === null || url === void 0 ? void 0 : url.fileUrl);
     };
     var renderMediaFileCard = function (file, className) {
         if (className === void 0) { className = ""; }
-        return (_jsx("div", { className: "".concat(styles.mediaAttachmentCard, " ").concat(className).trim(), children: _jsxs("div", { className: "".concat(styles.mediaAttachmentRow, " flex items-center md:gap-2"), children: [_jsx(FileReaderExt, { fileDetails: file }), _jsxs("div", { className: "".concat(styles.mediaAttachmentMeta, " w-full"), children: [_jsxs("div", { className: "flex items-start justify-between gap-4", children: [_jsx("button", { type: "button", className: styles.mediaAttachmentName, onClick: function () { return handleFileView(file); }, title: file.name, children: file.name }), _jsx("div", { className: "".concat(styles.mediaAttachmentActions, " flex items-center md:gap-2"), children: _jsx("button", { type: "button", className: "solid-file-icon-btn", "aria-label": "Download file", onClick: function () { return downloadMediaFile(file === null || file === void 0 ? void 0 : file.fileUrl, file === null || file === void 0 ? void 0 : file.name); }, children: _jsx(SolidIcon, { name: "si-download", "aria-hidden": true }) }) })] }), _jsx("div", { className: styles.mediaAttachmentSize, children: formatFileSize(file.size) })] })] }) }));
+        return (_jsx("div", { className: "".concat(styles.mediaAttachmentCard, " ").concat(className).trim(), children: _jsxs("div", { className: "".concat(styles.mediaAttachmentRow, " flex items-center md:gap-2"), children: [_jsx(FileReaderExt, { fileDetails: file }), _jsxs("div", { className: "".concat(styles.mediaAttachmentMeta, " w-full"), children: [_jsxs("div", { className: "flex items-start justify-between gap-4", children: [_jsx("button", { type: "button", className: styles.mediaAttachmentName, onClick: function () { return handleFileView(file); }, title: file.name, children: file.name }), _jsx("div", { className: "".concat(styles.mediaAttachmentActions, " flex items-center md:gap-2"), children: _jsx("button", { type: "button", className: "solid-file-icon-btn", "aria-label": "Download file", onClick: function (event) {
+                                                event.preventDefault();
+                                                event.stopPropagation();
+                                                downloadMediaFile(file === null || file === void 0 ? void 0 : file.fileUrl, file === null || file === void 0 ? void 0 : file.name);
+                                            }, children: _jsx(SolidIcon, { name: "si-download", "aria-hidden": true }) }) })] }), _jsx("div", { className: styles.mediaAttachmentSize, children: formatFileSize(file.size) })] })] }) }));
     };
     return (_jsxs("div", { className: styles.fieldViewWrapper, children: [showFieldLabel != false &&
                 _jsxs("p", { className: "".concat(styles.fieldViewLabel, " form-field-label"), children: [fieldLabel, _jsx(SolidFieldTooltip, { fieldContext: fieldContext })] }), fileDetails.length > 0 &&