@topconsultnpm/sdkui-react 6.21.0-dev1.8 → 6.21.0-dev2.10

package/lib/components/features/documents/TMDcmtFormActionButtons.js

@@ -1,23 +1,36 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useMemo, useRef } from "react";
+import { useCallback, useMemo, useRef, useState } from "react";
 import { ObjectClasses, SDK_Globals } from "@topconsultnpm/sdk-ts";
-import { TASK_MORE_INFO_PREFIX_NAME, SDKUI_Localizator, PDGS_COLORS } from "../../../helper";
+import { TASK_MORE_INFO_PREFIX_NAME, SDKUI_Localizator, PDGS_COLORS, calcResponsiveSizes } from "../../../helper";
 import { TMColors } from "../../../utils/theme";
-import { ReferencesContainer, StyledReferenceButton } from "../../base/Styled";
+import { StyledReferenceButton } from "../../base/Styled";
 import TMButton from "../../base/TMButton";
+import TMModal from "../../base/TMModal";
 import TMTooltip from "../../base/TMTooltip";
 import { WorkFlowOperationButtons } from "../workflow/TMWorkflowPopup";
 const TMDcmtFormActionButtons = (props) => {
     const { showToppyForApprove, workItems, deviceType, isMobile, handleSignApprove, updateShowApprovePopup, updateShowRejectPopup, updateShowReAssignPopup, updateShowMoreInfoPopup, fromDTD, showToppyForCompleteMoreInfo, moreInfoTasks, setShowCommentForm, showToppyForReferences, dcmtReferences, referenceActionMap, handleNavigateToReference, setShowMoreInfoTaskPopup, setShowMoreInfoTaskTask } = props;
+    const [showAllMoreInfoModal, setShowAllMoreInfoModal] = useState(false);
+    const [showAllDossiersModal, setShowAllDossiersModal] = useState(false);
+    const [showAllWorkingGroupsModal, setShowAllWorkingGroupsModal] = useState(false);
     const tasksNumber = useMemo(() => moreInfoTasks?.length ?? 0, [moreInfoTasks]);
-    const currentTask = useMemo(() => {
+    const firstTask = useMemo(() => {
         if (!moreInfoTasks || moreInfoTasks.length === 0)
             return null;
-        if (moreInfoTasks.length === 1)
-            return moreInfoTasks[0];
-        // If there are multiple tasks, we cannot determine which one is relevant, so we return null
-        return null;
+        return moreInfoTasks[0];
     }, [moreInfoTasks]);
+    // Verifica se la More Info Card sarà effettivamente renderizzata (non null)
+    const isMoreInfoCardVisible = useMemo(() => {
+        if (!firstTask)
+            return false;
+        const userID = SDK_Globals.tmSession?.SessionDescr?.userID;
+        const isSender = firstTask?.fromID !== undefined && firstTask.fromID === userID;
+        const isRecipient = firstTask?.toID !== undefined && firstTask.toID === userID;
+        // Caso 4: L'utente è sia mittente che destinatario - la card non viene renderizzata
+        if (isSender && isRecipient)
+            return false;
+        return true;
+    }, [firstTask]);
     const { hasMoreInfo, hasApprove, hasReferences } = useMemo(() => {
         const referencesExist = showToppyForReferences && dcmtReferences?.some(ref => ref.objClass === ObjectClasses.Dossier || ref.objClass === ObjectClasses.WorkingGroup);
         return {
@@ -31,8 +44,34 @@ const TMDcmtFormActionButtons = (props) => {
         showToppyForReferences,
         dcmtReferences
     ]);
+    // Raggruppa references per categoria
+    const { dossierRefs, workingGroupRefs } = useMemo(() => {
+        const dossiers = dcmtReferences?.filter(ref => ref.objClass === ObjectClasses.Dossier) ?? [];
+        const workingGroups = dcmtReferences?.filter(ref => ref.objClass === ObjectClasses.WorkingGroup) ?? [];
+        return { dossierRefs: dossiers, workingGroupRefs: workingGroups };
+    }, [dcmtReferences]);
+    const refButtonMouseMoved = useRef(false);
+    const handleRefButtonMouseDown = useCallback(() => { refButtonMouseMoved.current = false; }, []);
+    const handleRefButtonMouseMove = useCallback(() => { refButtonMouseMoved.current = true; }, []);
+    const handleRefButtonClick = useCallback((ref) => {
+        if (!refButtonMouseMoved.current) {
+            handleNavigateToReference(ref);
+        }
+    }, [handleNavigateToReference]);
     const Divider = () => (_jsx("div", { style: { height: '1px', width: '100%', background: 'linear-gradient(to right, transparent, rgba(255,255,255,0.4), transparent)', margin: '3px 0', opacity: 0.8, } }));
-    return _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '10px' }, children: [hasMoreInfo && (tasksNumber === 1 ? (_jsx("div", { style: { display: 'flex', gap: "10px", flexDirection: 'column', alignItems: 'center' }, children: _jsx("div", { style: {
+    const truncate = (str, maxLength) => str && str.length > maxLength ? str.substring(0, maxLength) + '...' : str;
+    const formatBadgeCount = (count) => count > 99 ? '99+' : `+${count}`;
+    const renderMoreInfoCard = (task, showOthersIndicator = false) => {
+        const userID = SDK_Globals.tmSession?.SessionDescr?.userID;
+        const isSender = task?.fromID !== undefined && task.fromID === userID;
+        const isRecipient = task?.toID !== undefined && task.toID === userID;
+        const senderNameTruncated = task?.fromName ? truncate(task.fromName, 30) : 'N/A';
+        const recipientNameTruncated = task?.toName ? truncate(task.toName, 30) : 'N/A';
+        const taskNameTrunc = task?.name ? truncate(task.name.replace(TASK_MORE_INFO_PREFIX_NAME ?? '', ''), 30) : 'N/A';
+        // Caso 4: L'utente è sia mittente che destinatario - non renderizzare nulla
+        if (isSender && isRecipient)
+            return null;
+        return (_jsxs("div", { style: { position: 'relative', display: 'flex' }, children: [_jsxs("div", { style: {
                         padding: '10px',
                         color: '#FFFFFF',
                         maxWidth: '240px',
@@ -46,58 +85,218 @@ const TMDcmtFormActionButtons = (props) => {
                         textAlign: 'center',
                         gap: '10px',
                         cursor: 'default',
-                    }, children: (() => {
+                        flex: 1,
+                    }, children: [(isSender && !isRecipient) && (_jsx(TaskLink, { messagePrefix: `Hai richiesto maggiori informazioni a "${recipientNameTruncated}" tramite l'attività`, name: task.name ?? 'N/A', taskNameTrunc: taskNameTrunc ?? 'N/A', description: task.description ?? 'N/A', currentTask: task, setShowMoreInfoTaskPopup: setShowMoreInfoTaskPopup, setShowMoreInfoTaskTask: setShowMoreInfoTaskTask })), (isRecipient && !isSender) && (_jsxs("div", { style: {
+                                display: 'flex',
+                                flexDirection: 'column',
+                                alignItems: 'center',
+                                gap: '10px'
+                            }, children: [_jsx(TaskLink, { messagePrefix: `"${senderNameTruncated}" ti ha richiesto maggiori informazioni tramite l'attività`, name: task.name ?? 'N/A', taskNameTrunc: taskNameTrunc ?? 'N/A', description: task.description ?? 'N/A', currentTask: task, setShowMoreInfoTaskPopup: setShowMoreInfoTaskPopup, setShowMoreInfoTaskTask: setShowMoreInfoTaskTask }), _jsx(TMButton, { btnStyle: isMobile ? 'toolbar' : 'advanced', showTooltip: isMobile, icon: _jsx("span", { className: "dx-icon-chat" }), caption: SDKUI_Localizator.CommentAndComplete, width: "180px", disabled: false, onClick: () => setShowCommentForm(true), onMouseDown: e => e.stopPropagation(), advancedColor: TMColors.success, color: "success" })] })), (!isSender && !isRecipient) && (_jsx(TaskLink, { messagePrefix: `Richiesta maggiori informazioni tramite l'attività`, name: task.name ?? 'N/A', taskNameTrunc: taskNameTrunc ?? 'N/A', description: task.description ?? 'N/A', currentTask: task, setShowMoreInfoTaskPopup: setShowMoreInfoTaskPopup, setShowMoreInfoTaskTask: setShowMoreInfoTaskTask }))] }), showOthersIndicator && tasksNumber > 1 && ((() => {
+                    const bgColor = '#0077BE';
+                    const bgColorHover = '#1E90FF';
+                    return (_jsx("div", { onClick: () => setShowAllMoreInfoModal(true), onMouseDown: e => e.stopPropagation(), style: {
+                            position: 'absolute',
+                            right: '-36px',
+                            top: '50%',
+                            transform: 'translateY(-50%)',
+                            width: '28px',
+                            height: '28px',
+                            background: bgColor,
+                            border: '2px solid rgba(255,255,255,0.5)',
+                            borderRadius: '50%',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            cursor: 'pointer',
+                            color: '#FFFFFF',
+                            fontSize: '11px',
+                            fontWeight: 700,
+                            boxShadow: '0 2px 8px rgba(0, 0, 50, 0.3)',
+                            transition: 'all 0.2s',
+                        }, onMouseEnter: e => {
+                            e.currentTarget.style.background = bgColorHover;
+                            e.currentTarget.style.transform = 'translateY(-50%) scale(1.1)';
+                        }, onMouseLeave: e => {
+                            e.currentTarget.style.background = bgColor;
+                            e.currentTarget.style.transform = 'translateY(-50%)';
+                        }, children: formatBadgeCount(tasksNumber - 1) }));
+                })())] }));
+    };
+    const renderReferenceCard = (ref, allRefs, showOthersIndicator, onShowAll, onClickRef) => {
+        const mapEntry = referenceActionMap[String(ref.objClass)];
+        const label = mapEntry?.label ?? 'Vai a riferimento';
+        const othersCount = allRefs.length - 1;
+        let backgroundColor;
+        switch (ref.objClass) {
+            case ObjectClasses.WorkingGroup:
+                backgroundColor = PDGS_COLORS.WORKING_GROUP;
+                break;
+            case ObjectClasses.Dossier:
+                backgroundColor = PDGS_COLORS.DOSSIER;
+                break;
+            case ObjectClasses.Document:
+                backgroundColor = PDGS_COLORS.DOCUMENT;
+                break;
+            default:
+                backgroundColor = "#C2388B";
+                break;
+        }
+        return (_jsxs("div", { style: { position: 'relative', display: 'inline-flex' }, children: [_jsxs(StyledReferenceButton, { onMouseDown: handleRefButtonMouseDown, onMouseMove: handleRefButtonMouseMove, onClick: () => {
+                        handleRefButtonClick(ref);
+                        onClickRef?.();
+                    }, onDoubleClick: (e) => { e.preventDefault(); e.stopPropagation(); }, "$bgColor": backgroundColor, children: [_jsx("span", { children: label }), _jsx("span", { children: `"${ref.objName}"` })] }), showOthersIndicator && othersCount > 0 && (_jsx("div", { onClick: (e) => { e.stopPropagation(); onShowAll(); }, onMouseDown: e => e.stopPropagation(), style: {
+                        position: 'absolute',
+                        right: '-36px',
+                        top: '50%',
+                        transform: 'translateY(-50%)',
+                        width: '28px',
+                        height: '28px',
+                        background: backgroundColor,
+                        border: '2px solid rgba(255,255,255,0.5)',
+                        borderRadius: '50%',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        cursor: 'pointer',
+                        color: '#FFFFFF',
+                        fontSize: '11px',
+                        fontWeight: 700,
+                        boxShadow: '0 2px 8px rgba(0, 0, 50, 0.3)',
+                        transition: 'all 0.2s',
+                    }, onMouseEnter: e => {
+                        e.currentTarget.style.filter = 'brightness(1.2)';
+                        e.currentTarget.style.transform = 'translateY(-50%) scale(1.1)';
+                    }, onMouseLeave: e => {
+                        e.currentTarget.style.filter = 'none';
+                        e.currentTarget.style.transform = 'translateY(-50%)';
+                    }, children: formatBadgeCount(othersCount) }))] }));
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '10px' }, children: [hasMoreInfo && firstTask && isMoreInfoCardVisible && (_jsx("div", { style: { display: 'flex', gap: "10px", flexDirection: 'column', alignItems: 'center', paddingRight: tasksNumber > 1 ? '36px' : '0' }, children: renderMoreInfoCard(firstTask, tasksNumber > 1) })), hasMoreInfo && isMoreInfoCardVisible && hasApprove && _jsx(Divider, {}), hasApprove && (workItems.length === 1 ?
+                        _jsx(WorkFlowOperationButtons, { dtd: fromDTD, deviceType: deviceType, onApprove: () => updateShowApprovePopup(true), onSignApprove: handleSignApprove, onReject: () => updateShowRejectPopup(true), onReAssign: () => updateShowReAssignPopup(true), onMoreInfo: () => updateShowMoreInfoPopup(true) })
+                        :
+                            _jsxs("div", { style: { padding: 10, color: 'white', maxWidth: '180px', borderRadius: 10, background: '#1B1464 0% 0% no-repeat padding-box', border: '1px solid #FFFFFF' }, children: [`Questo documento è associato a ${workItems.length} workitem.`, _jsx("br", {}), `Per approvare, vai alla pagina "Approvazione workflow".`] })), (hasApprove && hasReferences) || (hasMoreInfo && isMoreInfoCardVisible && !hasApprove && hasReferences) ? (_jsx(Divider, {})) : null, hasReferences && (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '10px', alignItems: 'center' }, children: [dossierRefs.length > 0 && (_jsx("div", { style: { paddingRight: dossierRefs.length > 1 ? '36px' : '0' }, children: renderReferenceCard(dossierRefs[0], dossierRefs, dossierRefs.length > 1, () => setShowAllDossiersModal(true)) })), workingGroupRefs.length > 0 && (_jsx("div", { style: { paddingRight: workingGroupRefs.length > 1 ? '36px' : '0' }, children: renderReferenceCard(workingGroupRefs[0], workingGroupRefs, workingGroupRefs.length > 1, () => setShowAllWorkingGroupsModal(true)) }))] }))] }), showAllMoreInfoModal && moreInfoTasks && moreInfoTasks.length > 1 && (_jsx(TMModal, { title: `Altre richieste maggiori informazioni (${moreInfoTasks.length - 1})`, onClose: () => setShowAllMoreInfoModal(false), width: calcResponsiveSizes(deviceType, '450px', '450px', '95%'), height: 'auto', children: _jsx("div", { style: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        gap: '8px',
+                        padding: '15px',
+                        maxHeight: '50vh',
+                        overflowY: 'auto',
+                        scrollbarWidth: 'thin',
+                        scrollbarColor: '#888 #f1f1f1'
+                    }, children: moreInfoTasks.slice(1).map((task, index) => {
                         const userID = SDK_Globals.tmSession?.SessionDescr?.userID;
-                        const isSender = currentTask?.fromID !== undefined && currentTask.fromID === userID;
-                        const isRecipient = currentTask?.toID !== undefined && currentTask.toID === userID;
-                        const truncate = (str, maxLength) => str && str.length > maxLength ? str.substring(0, maxLength) + '...' : str;
-                        const senderNameTruncated = currentTask?.fromName ? truncate(currentTask.fromName, 30) : 'N/A';
-                        const recipientNameTruncated = currentTask?.toName ? truncate(currentTask.toName, 30) : 'N/A';
-                        const taskNameTrunc = currentTask?.name ? truncate(currentTask.name.replace(TASK_MORE_INFO_PREFIX_NAME ?? '', ''), 30) : 'N/A';
-                        return (_jsxs(_Fragment, { children: [(isSender && !isRecipient) && (_jsx(TaskLink, { messagePrefix: `Hai richiesto maggiori informazioni a "${recipientNameTruncated}" tramite l'attività`, name: currentTask.name ?? 'N/A', taskNameTrunc: taskNameTrunc ?? 'N/A', description: currentTask.description ?? 'N/A', currentTask: currentTask, setShowMoreInfoTaskPopup: setShowMoreInfoTaskPopup, setShowMoreInfoTaskTask: setShowMoreInfoTaskTask })), (isRecipient && !isSender) && (_jsxs("div", { style: {
-                                        display: 'flex',
-                                        flexDirection: 'column',
-                                        alignItems: 'center',
-                                        gap: '10px'
-                                    }, children: [_jsx(TaskLink, { messagePrefix: `"${senderNameTruncated}" ti ha richiesto maggiori informazioni tramite l'attività`, name: currentTask.name ?? 'N/A', taskNameTrunc: taskNameTrunc ?? 'N/A', description: currentTask.description ?? 'N/A', currentTask: currentTask, setShowMoreInfoTaskPopup: setShowMoreInfoTaskPopup, setShowMoreInfoTaskTask: setShowMoreInfoTaskTask }), _jsx(TMButton, { btnStyle: isMobile ? 'toolbar' : 'advanced', showTooltip: isMobile, icon: _jsx("span", { className: "dx-icon-chat" }), caption: SDKUI_Localizator.CommentAndComplete, width: "180px", disabled: false, onClick: () => setShowCommentForm(true), onMouseDown: e => e.stopPropagation(), advancedColor: TMColors.success, color: "success" })] }))] }));
-                    })() }) })) : (_jsx("div", { style: {
-                    padding: '10px',
-                    color: '#FFFFFF',
-                    maxWidth: '240px',
-                    background: 'linear-gradient(135deg, #1E90FF 0%, #0077BE 60%, #00509E 100%)',
-                    border: '1px solid rgba(255,255,255,0.15)',
-                    boxShadow: '0 8px 20px rgba(0, 0, 50, 0.4)',
-                    backdropFilter: 'blur(6px)',
-                    display: 'flex',
-                    flexDirection: 'column',
-                    alignItems: 'center',
-                    textAlign: 'center',
-                    gap: '10px',
-                    cursor: 'default',
-                }, children: `Ci sono ${moreInfoTasks?.length ?? 0} richieste di maggiori informazioni. ${SDKUI_Localizator.ManageFromTaskPanel}` }))), hasMoreInfo && hasApprove && _jsx(Divider, {}), hasApprove && (workItems.length === 1 ?
-                _jsx(WorkFlowOperationButtons, { dtd: fromDTD, deviceType: deviceType, onApprove: () => updateShowApprovePopup(true), onSignApprove: handleSignApprove, onReject: () => updateShowRejectPopup(true), onReAssign: () => updateShowReAssignPopup(true), onMoreInfo: () => updateShowMoreInfoPopup(true) })
-                :
-                    _jsxs("div", { style: { padding: 10, color: 'white', maxWidth: '180px', borderRadius: 10, background: '#1B1464 0% 0% no-repeat padding-box', border: '1px solid #FFFFFF' }, children: [`Questo documento è associato a ${workItems.length} workitem.`, _jsx("br", {}), `Per approvare, vai alla pagina "Approvazione workflow".`] })), (hasApprove && hasReferences) || (hasMoreInfo && !hasApprove && hasReferences) ? (_jsx(Divider, {})) : null, hasReferences && (_jsx(ReferencesContainer, { children: dcmtReferences?.filter(ref => ref.objClass === ObjectClasses.Dossier || ref.objClass === ObjectClasses.WorkingGroup)
-                    .map((ref, index) => {
-                    const mapEntry = referenceActionMap[String(ref.objClass)];
-                    const label = mapEntry?.label ?? 'Vai a riferimento';
-                    let backgroundColor;
-                    switch (ref.objClass) {
-                        case ObjectClasses.WorkingGroup:
-                            backgroundColor = PDGS_COLORS.WORKING_GROUP;
-                            break;
-                        case ObjectClasses.Dossier:
-                            backgroundColor = PDGS_COLORS.DOSSIER;
-                            break;
-                        case ObjectClasses.Document:
-                            backgroundColor = PDGS_COLORS.DOCUMENT;
-                            break;
-                        default:
-                            backgroundColor = "#C2388B";
-                            break;
-                    }
-                    return (_jsxs(StyledReferenceButton, { onClick: () => handleNavigateToReference(ref), onDoubleClick: (e) => { e.preventDefault(); e.stopPropagation(); }, "$bgColor": backgroundColor, children: [_jsx("span", { children: label }), _jsx("span", { children: `"${ref.objName}"` })] }, `ref-${index}-${ref.objID}`));
-                }) }))] });
+                        const isSender = task?.fromID !== undefined && task.fromID === userID;
+                        const isRecipient = task?.toID !== undefined && task.toID === userID;
+                        const taskName = task?.name?.replace(TASK_MORE_INFO_PREFIX_NAME ?? '', '') ?? 'N/A';
+                        let roleInfo = '';
+                        if (isSender && !isRecipient) {
+                            roleInfo = `Richiesta a: ${task.toName ?? 'N/A'}`;
+                        }
+                        else if (isRecipient && !isSender) {
+                            roleInfo = `Da: ${task.fromName ?? 'N/A'}`;
+                        }
+                        return (_jsxs("div", { onClick: () => {
+                                setShowMoreInfoTaskPopup(true);
+                                setShowMoreInfoTaskTask(task);
+                                setShowAllMoreInfoModal(false);
+                            }, style: {
+                                display: 'flex',
+                                alignItems: 'center',
+                                gap: '12px',
+                                padding: '12px 16px',
+                                borderRadius: '8px',
+                                backgroundColor: '#f5f5f5',
+                                cursor: 'pointer',
+                                transition: 'background-color 0.2s',
+                            }, onMouseEnter: e => e.currentTarget.style.backgroundColor = '#e8e8e8', onMouseLeave: e => e.currentTarget.style.backgroundColor = '#f5f5f5', children: [_jsx("div", { style: {
+                                        width: '8px',
+                                        height: '8px',
+                                        borderRadius: '50%',
+                                        backgroundColor: '#0077BE',
+                                        flexShrink: 0
+                                    } }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '2px' }, children: [_jsx("span", { style: {
+                                                fontSize: '1rem',
+                                                color: '#333',
+                                                wordBreak: 'break-word',
+                                                fontWeight: 500
+                                            }, children: taskName }), roleInfo && (_jsx("span", { style: {
+                                                fontSize: '1rem',
+                                                color: '#333',
+                                                wordBreak: 'break-word'
+                                            }, children: roleInfo }))] })] }, `moreinfo-task-${index}-${task.id}`));
+                    }) }) })), showAllDossiersModal && dossierRefs.length > 1 && (_jsx(TMModal, { title: `Altre ${SDKUI_Localizator.Dossiers} (${dossierRefs.length - 1})`, onClose: () => setShowAllDossiersModal(false), width: calcResponsiveSizes(deviceType, '450px', '450px', '95%'), height: calcResponsiveSizes(deviceType, 'auto', 'auto', '95%'), children: _jsx("div", { style: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        gap: '8px',
+                        padding: '15px',
+                        maxHeight: '50vh',
+                        overflowY: 'auto',
+                        scrollbarWidth: 'thin',
+                        scrollbarColor: '#888 #f1f1f1'
+                    }, children: dossierRefs.slice(1).map((ref, index) => {
+                        const mapEntry = referenceActionMap[String(ref.objClass)];
+                        const label = mapEntry?.label ?? 'Vai a riferimento';
+                        return (_jsxs("div", { onClick: () => { handleNavigateToReference(ref); setShowAllDossiersModal(false); }, style: {
+                                display: 'flex',
+                                alignItems: 'center',
+                                gap: '12px',
+                                padding: '12px 16px',
+                                borderRadius: '8px',
+                                backgroundColor: '#f5f5f5',
+                                cursor: 'pointer',
+                                transition: 'background-color 0.2s',
+                            }, onMouseEnter: e => e.currentTarget.style.backgroundColor = '#e8e8e8', onMouseLeave: e => e.currentTarget.style.backgroundColor = '#f5f5f5', children: [_jsx("div", { style: {
+                                        width: '8px',
+                                        height: '8px',
+                                        borderRadius: '50%',
+                                        backgroundColor: PDGS_COLORS.DOSSIER,
+                                        flexShrink: 0
+                                    } }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '2px' }, children: [_jsxs("span", { style: {
+                                                fontSize: '1rem',
+                                                color: '#333'
+                                            }, children: [label, ":"] }), _jsx("span", { style: {
+                                                fontSize: '1rem',
+                                                color: '#333',
+                                                wordBreak: 'break-word',
+                                                fontWeight: 500
+                                            }, children: ref.objName })] })] }, `dossier-ref-${index}-${ref.objID}`));
+                    }) }) })), showAllWorkingGroupsModal && workingGroupRefs.length > 1 && (_jsx(TMModal, { title: `Altri ${SDKUI_Localizator.WorkingGroups} (${workingGroupRefs.length - 1})`, onClose: () => setShowAllWorkingGroupsModal(false), width: calcResponsiveSizes(deviceType, '450px', '450px', '95%'), height: calcResponsiveSizes(deviceType, 'auto', 'auto', '95%'), children: _jsx("div", { style: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        gap: '8px',
+                        padding: '15px',
+                        maxHeight: '50vh',
+                        overflowY: 'auto',
+                        scrollbarWidth: 'thin',
+                        scrollbarColor: '#888 #f1f1f1'
+                    }, children: workingGroupRefs.slice(1).map((ref, index) => {
+                        const mapEntry = referenceActionMap[String(ref.objClass)];
+                        const label = mapEntry?.label ?? 'Vai a riferimento';
+                        return (_jsxs("div", { onClick: () => { handleNavigateToReference(ref); setShowAllWorkingGroupsModal(false); }, style: {
+                                display: 'flex',
+                                alignItems: 'center',
+                                gap: '12px',
+                                padding: '12px 16px',
+                                borderRadius: '8px',
+                                backgroundColor: '#f5f5f5',
+                                cursor: 'pointer',
+                                transition: 'background-color 0.2s',
+                            }, onMouseEnter: e => e.currentTarget.style.backgroundColor = '#e8e8e8', onMouseLeave: e => e.currentTarget.style.backgroundColor = '#f5f5f5', children: [_jsx("div", { style: {
+                                        width: '8px',
+                                        height: '8px',
+                                        borderRadius: '50%',
+                                        backgroundColor: PDGS_COLORS.WORKING_GROUP,
+                                        flexShrink: 0
+                                    } }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '2px' }, children: [_jsxs("span", { style: {
+                                                fontSize: '1rem',
+                                                color: '#333'
+                                            }, children: [label, ":"] }), _jsx("span", { style: {
+                                                fontSize: '1rem',
+                                                color: '#333',
+                                                wordBreak: 'break-word',
+                                                fontWeight: 500
+                                            }, children: ref.objName })] })] }, `wg-ref-${index}-${ref.objID}`));
+                    }) }) }))] }));
 };
 export default TMDcmtFormActionButtons;
 const TaskLink = (props) => {

package/lib/components/features/documents/TMDcmtPreview.d.ts

@@ -25,7 +25,9 @@ export declare const TMNothingToShow: ({ text, secondText, fileExt, icon }: {
     fileExt?: string;
     icon?: any;
 }) => import("react/jsx-runtime").JSX.Element;
-export declare const StyledHeaderIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+export declare const StyledHeaderIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$color"> & {
     $color: string;
-}>> & string;
-export declare const StyledPanelStatusContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+}, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$color"> & {
+    $color: string;
+}, never>>> & string;
+export declare const StyledPanelStatusContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;

package/lib/components/features/documents/TMDragDropOverlay.js

@@ -8,7 +8,10 @@ const TMDragDropOverlay = (props) => {
     useEffect(() => {
         const handleWindowDragEnter = (e) => {
             e.preventDefault();
-            setDragOver(true);
+            // Attiva solo se si trascina un file
+            if (e.dataTransfer?.types.includes('Files')) {
+                setDragOver(true);
+            }
         };
         const handleWindowDragOver = (e) => {
             e.preventDefault();
@@ -60,7 +63,9 @@ const TMDragDropOverlay = (props) => {
             boxShadow: '0 8px 20px rgba(0,0,0,0.3)',
             backdropFilter: 'blur(5px)',
             transition: 'opacity 0.2s, transform 0.2s, background 0.2s',
-        }, onDragEnter: (e) => { e.preventDefault(); e.stopPropagation(); setDragOver(true); }, onDragOver: (e) => { e.preventDefault(); e.stopPropagation(); setDragOver(true); }, onDragLeave: (e) => {
+        }, onDragEnter: (e) => { e.preventDefault(); e.stopPropagation(); if (e.dataTransfer?.types.includes('Files'))
+            setDragOver(true); }, onDragOver: (e) => { e.preventDefault(); e.stopPropagation(); if (e.dataTransfer?.types.includes('Files'))
+            setDragOver(true); }, onDragLeave: (e) => {
             e.preventDefault();
             e.stopPropagation();
             // Solo se il cursore ha lasciato il div principale

package/lib/components/features/documents/TMFileUploader.js

@@ -2,7 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import styled from 'styled-components';
 import { IconFolderOpen, IconScanner, SDKUI_Localizator, formatBytes, IconClear, extensionHandler, IconCloseOutline, IconMenuVertical, TMCommandsContextMenu, IconEdit, isPdfEditorAvailable, SDKUI_Globals } from '../../../helper';
-import { useBetaFeatures } from '../../../hooks/useBetaFeatures';
 import usePreventFileDrop from '../../../hooks/usePreventFileDrop';
 import { FileExtensionHandler } from '../../../ts';
 import { TMColors } from '../../../utils/theme';
@@ -24,7 +23,6 @@ const isScannerLicenseConfigured = () => {
     }
 };
 const TMFileUploader = ({ fromDTD, deviceType = DeviceType.DESKTOP, onClose, onFileUpload, openFileUploaderPdfEditor, onScanRequest, isRequired = false, defaultBlob = null, isResizingActive, showTMPanel = true, enableDragDropOverlay = false, showScannerIcon = true }) => {
-    const isBetaFeaturesEnabled = useBetaFeatures();
     const [dragOver, setDragOver] = useState(false);
     const [uploadedFile, setUploadedFile] = useState(defaultBlob);
     const [fileName, setFileName] = useState('');
@@ -54,7 +52,10 @@ const TMFileUploader = ({ fromDTD, deviceType = DeviceType.DESKTOP, onClose, onF
     };
     const handleDragOver = (e) => {
         e.preventDefault();
-        setDragOver(true);
+        // Attiva solo se si trascina un file, non testo selezionato
+        if (e.dataTransfer?.types.includes('Files')) {
+            setDragOver(true);
+        }
     };
     const handleDragLeave = () => {
         setDragOver(false);
@@ -96,7 +97,7 @@ const TMFileUploader = ({ fromDTD, deviceType = DeviceType.DESKTOP, onClose, onF
         document.getElementById('fileInput')?.click();
     }, []);
     let content = !uploadedFile ?
-        _jsxs("div", { style: { display: 'flex', gap: 10, width: '100%', height: '100%' }, children: [_jsx(HiddenInput, { id: "fileInput", type: "file", onChange: handleInputChange }), _jsxs(UploadContainer, { ref: uploaderRef, tabIndex: 0, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, style: { backgroundColor: dragOver ? '#76b1e6' : 'white' }, onDoubleClick: browseHandler, "$isRequired": isRequired, children: [_jsxs("div", { style: { display: 'flex', gap: '10px', flexDirection: 'column', position: 'absolute', right: 5, top: 5 }, children: [_jsx(TMButton, { btnStyle: 'icon', caption: 'Sfoglia', color: isRequired && !uploadedFile ? 'error' : 'primary', onClick: browseHandler, icon: _jsx(IconFolderOpen, { fontSize: 22 }) }), isBetaFeaturesEnabled && showScannerIcon && isScannerLicenseConfigured() && onScanRequest && _jsx(TMButton, { btnStyle: 'icon', caption: 'Scanner', color: 'primary', onClick: () => { onScanRequest((file) => { onFileUpload?.(file); }); }, icon: _jsx(IconScanner, { fontSize: 22 }) }), isBetaFeaturesEnabled && showScannerIcon && isScannerLicenseConfigured() && !onScanRequest && _jsx(TMButton, { btnStyle: 'icon', caption: 'Scanner', color: 'primary', onClick: () => { ShowAlert({ message: 'Funzionalità scanner non disponibile in questo contesto.', mode: 'info', duration: 3000, title: 'Scanner' }); }, icon: _jsx(IconScanner, { fontSize: 22 }) })] }), _jsx("p", { style: { fontSize: '1.2rem', fontWeight: 'bold' }, children: deviceType === DeviceType.MOBILE ? 'Clicca per sfogliare il tuo file' : 'Trascina il tuo file o fai doppio click per sfogliarlo' }), isRequired && _jsxs("p", { style: { fontWeight: 'bold' }, children: [" ", SDKUI_Localizator.RequiredField, " "] })] })] }) :
+        _jsxs("div", { style: { display: 'flex', gap: 10, width: '100%', height: '100%' }, children: [_jsx(HiddenInput, { id: "fileInput", type: "file", onChange: handleInputChange }), _jsxs(UploadContainer, { ref: uploaderRef, tabIndex: 0, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, style: { backgroundColor: dragOver ? '#76b1e6' : 'white' }, onDoubleClick: browseHandler, "$isRequired": isRequired, children: [_jsxs("div", { style: { display: 'flex', gap: '10px', flexDirection: 'column', position: 'absolute', right: 5, top: 5 }, children: [_jsx(TMButton, { btnStyle: 'icon', caption: 'Sfoglia', color: isRequired && !uploadedFile ? 'error' : 'primary', onClick: browseHandler, icon: _jsx(IconFolderOpen, { fontSize: 22 }) }), showScannerIcon && isScannerLicenseConfigured() && onScanRequest && _jsx(TMButton, { btnStyle: 'icon', caption: 'Scanner', color: 'primary', onClick: () => { onScanRequest((file) => { onFileUpload?.(file); }); }, icon: _jsx(IconScanner, { fontSize: 22 }) }), showScannerIcon && isScannerLicenseConfigured() && !onScanRequest && _jsx(TMButton, { btnStyle: 'icon', caption: 'Scanner', color: 'primary', onClick: () => { ShowAlert({ message: SDKUI_Localizator.ScanFeatureUnavailableInThisContext, mode: 'info', duration: 3000, title: 'Scanner' }); }, icon: _jsx(IconScanner, { fontSize: 22 }) })] }), _jsx("p", { style: { fontSize: '1.2rem', fontWeight: 'bold' }, children: deviceType === DeviceType.MOBILE ? 'Clicca per sfogliare il tuo file' : 'Trascina il tuo file o fai doppio click per sfogliarlo' }), isRequired && _jsxs("p", { style: { fontWeight: 'bold' }, children: [" ", SDKUI_Localizator.RequiredField, " "] })] })] }) :
         _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 10, width: '100%', height: '100%' }, children: [_jsxs("div", { style: { backgroundColor: 'white', padding: '5px 10px', borderRadius: 8, display: 'flex', alignItems: 'center', justifyContent: 'space-between', color: TMColors.primaryColor }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 5 }, children: [_jsx("p", { children: "File name:" }), _jsxs("div", { style: { fontWeight: 'bold' }, children: [fileName, " ", _jsxs("span", { children: [" ", ` (${formatBytes(fileSize)})`, " "] })] })] }), uploadedFile && _jsx(TMButton, { btnStyle: 'icon', color: 'error', caption: 'Pulisci', onClick: () => clearFile(true), icon: _jsx(IconClear, { fontSize: 22 }) })] }), extensionHandler(fileExt) === FileExtensionHandler.READY_TO_SHOW ? _jsx(TMFileViewer, { fileBlob: uploadedFile, isResizingActive: isResizingActive }) :
                     _jsx("div", { style: { backgroundColor: '#f6dbdb', padding: '5px 10px', borderRadius: 8, display: 'flex', alignItems: 'center', justifyContent: 'space-between', color: TMColors.error }, children: _jsxs("div", { children: [" ", 'Anteprima non disponibile.', fileExt && _jsx("b", { children: ` (*.${fileExt})` })] }) })] });
     const innerContent = (_jsxs("div", { style: { width: '100%', height: '100%', padding: '2px', display: 'flex', flexDirection: 'column', gap: 10 }, children: [enableDragDropOverlay && _jsx(TMDragDropOverlay, { handleFile: handleFile, refocusAfterFileInput: refocusAfterFileInput }), content] }));