@topconsultnpm/sdkui-react 6.20.0-dev1.13 → 6.20.0-dev1.131

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

@@ -2,22 +2,20 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef, useState } from 'react';
 import styled from 'styled-components';
 import { RetrieveFileOptions, DcmtOpers, GeneralRetrieveFormats, FileFormats } from '@topconsultnpm/sdk-ts';
-import { extensionHandler, sleep, getExceptionMessage, formatBytes, IconMenuVertical, IconCloseCircle, IconClear, IconCloseOutline, IconPreview, SDKUI_Globals, IconZoomOutLinear, IconZoomInLinear, IconPrintOutline, SDKUI_Localizator, IconRefresh } from '../../../helper';
+import { extensionHandler, sleep, getExceptionMessage, formatBytes, IconMenuVertical, IconCloseCircle, IconClear, IconCloseOutline, IconPreview, SDKUI_Globals, IconZoomOutLinear, IconZoomInLinear, IconPrintOutline, SDKUI_Localizator, IconRefresh, IconCache } from '../../../helper';
 import { useDcmtOperations } from '../../../hooks/useDcmtOperations';
 import { FileExtensionHandler, FormModes } from '../../../ts';
 import { TMColors } from '../../../utils/theme';
 import ShowAlert from '../../base/TMAlert';
 import TMButton from '../../base/TMButton';
-import TMDropDownMenu from '../../base/TMDropDownMenu';
 import { TMExceptionBoxManager } from '../../base/TMPopUp';
 import { TMLayoutWaitingContainer } from '../../base/TMWaitPanel';
 import { TMSaveFormButtonPrevious, TMSaveFormButtonNext } from '../../forms/TMSaveForm';
 import { StyledAnimatedComponentOpacity } from '../../base/Styled';
 import TMPanel from '../../base/TMPanel';
 import TMTooltip from '../../base/TMTooltip';
-import { Document, Page, pdfjs } from 'react-pdf';
-// Configure PDF.js worker
-pdfjs.GlobalWorkerOptions.workerSrc = `https://unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.mjs`;
+import { ContextMenu } from '../../NewComponents/ContextMenu';
+import TMPdfViewer from '../../../helper/TMPdfViewer';
 const ErrorContent = ({ error, isAbortError, onRetry }) => {
     if (isAbortError) {
         return (_jsx(StyledAnimatedComponentOpacity, { style: { width: '100%', height: '100%' }, children: _jsxs(StyledPanelStatusContainer, { children: [_jsx(IconCloseOutline, { fontSize: 92, color: TMColors.error }), _jsxs(StyledPreviewNotAvailable, { children: [_jsx("div", { children: error }), _jsx("div", { children: SDKUI_Localizator.PreviewNotAvailable })] }), _jsx(TMButton, { caption: SDKUI_Localizator.TryAgain, onClick: onRetry, showTooltip: false })] }) }));
@@ -109,8 +107,9 @@ const TMDcmtPreview = ({ dcmtData, isResizingActive, isVisible, canNext, canPrev
             extensionInfo = '';
         title += extensionInfo;
         title += dcmtData.fileSize && dcmtData.fileSize > 0 ? formatBytes(dcmtData.fileSize) + ')' : '';
-        if ((isDcmtFileInCache(cacheKey) && isFromCache)) {
-            title += ' | da cache';
+        const isCached = isDcmtFileInCache(cacheKey) && isFromCache;
+        if (isCached) {
+            return (_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '3px' }, children: [title, _jsx(TMTooltip, { content: "da cache", children: _jsx(IconCache, { fontSize: 13 }) })] }));
         }
         return title;
     };
@@ -127,10 +126,11 @@ const TMDcmtPreview = ({ dcmtData, isResizingActive, isVisible, canNext, canPrev
             console.error('Error reopening document:', error);
         }
     };
-    return (_jsx(TMLayoutWaitingContainer, { direction: 'vertical', showWaitPanel: showWaitPanel, showWaitPanelPrimary: showPrimary, showWaitPanelSecondary: showSecondary, waitPanelTitle: waitPanelTitle, waitPanelTextPrimary: waitPanelTextPrimary, waitPanelValuePrimary: waitPanelValuePrimary, waitPanelMaxValuePrimary: waitPanelMaxValuePrimary, waitPanelTextSecondary: waitPanelTextSecondary, waitPanelValueSecondary: waitPanelValueSecondary, waitPanelMaxValueSecondary: waitPanelMaxValueSecondary, isCancelable: true, abortController: abortController, children: _jsx(TMPanel, { padding: '0', title: titleHandler(), onClose: onClosePanel, allowMaximize: allowMaximize, onMaximize: onMaximizePanel, onHeaderDoubleClick: onMaximizePanel, toolbar: _jsxs("div", { style: { width: 'max-content', display: 'flex', alignItems: 'center', gap: '10px' }, children: [onPrev && _jsx(TMSaveFormButtonPrevious, { btnStyle: 'icon', isModified: false, formMode: FormModes.ReadOnly, canPrev: canPrev, onPrev: onPrev }), onNext && _jsx(TMSaveFormButtonNext, { btnStyle: 'icon', isModified: false, formMode: FormModes.ReadOnly, canNext: canNext, onNext: onNext }), _jsx(StyledHeaderIcon, { "$color": TMColors.primaryColor, children: _jsx(TMDropDownMenu, { backgroundColor: 'white', borderRadius: '3px', content: _jsx(TMButton, { btnStyle: 'icon', caption: 'Altro', icon: _jsx(IconMenuVertical, {}), showTooltip: false }), items: [
-                                { icon: _jsx(IconCloseCircle, {}), text: SDKUI_Localizator.RemoveFromCache, onClick: () => { removeDcmtsFileCache(cacheKey); setIsFromCache(false); } },
-                                { icon: _jsx(IconClear, {}), text: SDKUI_Localizator.ClearCache, onClick: () => { clearDcmtsFileCache(); setIsFromCache(false); } },
-                            ] }, "btn13") }), _jsx(StyledHeaderIcon, { onClick: reOpenDcmt, "$color": TMColors.primaryColor, children: _jsx(TMTooltip, { content: SDKUI_Localizator.ReopenDocument, children: _jsx(IconRefresh, {}) }) })] }), children: error
+    const cacheMenuItems = useMemo(() => [
+        { icon: _jsx(IconCloseCircle, {}), name: SDKUI_Localizator.RemoveFromCache, onClick: () => { removeDcmtsFileCache(cacheKey); setIsFromCache(false); } },
+        { icon: _jsx(IconClear, {}), name: SDKUI_Localizator.ClearCache, onClick: () => { clearDcmtsFileCache(); setIsFromCache(false); } },
+    ], [cacheKey, removeDcmtsFileCache, clearDcmtsFileCache, setIsFromCache]);
+    return (_jsx(TMLayoutWaitingContainer, { direction: 'vertical', showWaitPanel: showWaitPanel, showWaitPanelPrimary: showPrimary, showWaitPanelSecondary: showSecondary, waitPanelTitle: waitPanelTitle, waitPanelTextPrimary: waitPanelTextPrimary, waitPanelValuePrimary: waitPanelValuePrimary, waitPanelMaxValuePrimary: waitPanelMaxValuePrimary, waitPanelTextSecondary: waitPanelTextSecondary, waitPanelValueSecondary: waitPanelValueSecondary, waitPanelMaxValueSecondary: waitPanelMaxValueSecondary, isCancelable: true, abortController: abortController, children: _jsx(TMPanel, { padding: '0', title: titleHandler(), onClose: onClosePanel, allowMaximize: allowMaximize, onMaximize: onMaximizePanel, onHeaderDoubleClick: onMaximizePanel, toolbar: _jsxs("div", { style: { width: 'max-content', display: 'flex', alignItems: 'center', gap: '10px' }, children: [onPrev && _jsx(TMSaveFormButtonPrevious, { btnStyle: 'icon', isModified: false, formMode: FormModes.ReadOnly, canPrev: canPrev, onPrev: onPrev }), onNext && _jsx(TMSaveFormButtonNext, { btnStyle: 'icon', isModified: false, formMode: FormModes.ReadOnly, canNext: canNext, onNext: onNext }), _jsx(StyledHeaderIcon, { "$color": TMColors.primaryColor, children: _jsx(ContextMenu, { items: cacheMenuItems, trigger: "left", children: _jsx(IconMenuVertical, {}) }) }), _jsx(StyledHeaderIcon, { onClick: reOpenDcmt, "$color": TMColors.primaryColor, children: _jsx(TMTooltip, { content: SDKUI_Localizator.ReopenDocument, children: _jsx(IconRefresh, {}) }) })] }), children: error
                 ? _jsx(ErrorContent, { error: error, isAbortError: isAbortError, onRetry: reOpenDcmt })
                 : renderedPreview(dcmtData?.tid, dcmtData?.did, dcmtData?.fileExt, dcmtData?.fileSize, dcmtData?.fileCount, extensionHandler(dcmtData?.fileExt), showPreview, isResizingActive, () => { loadDocumentWithCache(); setShowPreview(true); }, dcmtBlob) }) }));
 };
@@ -139,41 +139,15 @@ export const TMFileViewer = ({ fileBlob, isResizingActive }) => {
     const [blobUrl, setBlobUrl] = useState(undefined);
     const [fileType, setFileType] = useState(undefined);
     const [formattedXml, setFormattedXml] = useState(undefined);
-    const [isMobile, setIsMobile] = useState(false);
-    const [numPages, setNumPages] = useState(0);
-    useEffect(() => {
-        const checkIsMobile = () => {
-            const userAgent = navigator.userAgent || navigator.vendor || window.opera;
-            // Only detect actual mobile/tablet devices, NOT desktop browsers
-            const isMobileDevice = 
-            // Traditional mobile detection (phones and tablets)
-            /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(userAgent) ||
-                // Additional Android tablet detection (covers tablets in landscape)
-                /android.*tablet|android.*mobile/i.test(userAgent) ||
-                // Touch-only devices (excludes laptops with touchscreen)
-                (('ontouchstart' in window || navigator.maxTouchPoints > 0) &&
-                    !/Windows NT|Macintosh|Linux/.test(userAgent)) ||
-                // Small screen mobile devices only
-                (window.screen.width <= 768 && /Mobi|Android/i.test(userAgent));
-            setIsMobile(isMobileDevice);
-        };
-        checkIsMobile();
-        // Listen for orientation changes (important for tablets)
-        window.addEventListener('orientationchange', checkIsMobile);
-        window.addEventListener('resize', checkIsMobile);
-        return () => {
-            window.removeEventListener('orientationchange', checkIsMobile);
-            window.removeEventListener('resize', checkIsMobile);
-        };
-    }, []);
     useEffect(() => {
         if (fileBlob) {
-            setFileType(fileBlob.type);
+            const blobType = fileBlob.type;
+            setFileType(blobType);
             setFormattedXml(undefined);
             const fileName = fileBlob.name || '';
             const fileExtension = fileName.split('.').pop()?.toLowerCase() || '';
-            const isConfigFile = ['config', 'cfg'].includes(fileExtension);
-            if (fileBlob.type.includes("xml") && !isConfigFile) {
+            const isTextBasedFile = ['config', 'cfg', 'sql'].includes(fileExtension);
+            if (fileBlob.type.includes("xml") && !isTextBasedFile) {
                 fileBlob.text().then((text) => {
                     const parser = new DOMParser();
                     const xmlDoc = parser.parseFromString(text, "application/xml");
@@ -192,7 +166,7 @@ export const TMFileViewer = ({ fileBlob, isResizingActive }) => {
                 });
                 setBlobUrl(undefined);
             }
-            else if (isConfigFile) {
+            else if (isTextBasedFile) {
                 fileBlob.text().then((text) => {
                     const escapedText = text
                         .replace(/&/g, "&amp;")
@@ -226,93 +200,10 @@ export const TMFileViewer = ({ fileBlob, isResizingActive }) => {
     if (fileBlob.type.includes('image')) {
         return (_jsx(ImageViewer, { fileBlob: fileBlob, alt: '' }));
     }
-    // if (fileType === 'application/pdf' && isMobile) {
-    //     return (
-    //         <object
-    //             key={blobUrl}
-    //             data={blobUrl}
-    //             type="application/pdf"
-    //             width="100%"
-    //             height="100%"
-    //             style={{ 
-    //                 border: 'none', 
-    //                 zIndex: 0, 
-    //                 pointerEvents: isResizingActive === true ? "none" : "auto" 
-    //             }}
-    //         >
-    //             {/* Fallback UI if <object> tag fails to render PDF */}
-    //             <div style={{
-    //                 padding: '40px',
-    //                 textAlign: 'center',
-    //                 display: 'flex',
-    //                 flexDirection: 'column',
-    //                 alignItems: 'center',
-    //                 justifyContent: 'center',
-    //                 height: '100%',
-    //                 gap: '20px'
-    //             }}>
-    //                 <IconPreview fontSize={96} />
-    //                 <div>
-    //                     <h3>{SDKUI_Localizator.PDFDocument}</h3>
-    //                     <p>{SDKUI_Localizator.PreviewNotAvailableOnDevice}</p>
-    //                 </div>
-    //                 <div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap', alignItems: 'center', justifyContent: 'center' }}>
-    //                     <a
-    //                         href={blobUrl}
-    //                         download="document.pdf"
-    //                         style={{
-    //                             minWidth: '180px',
-    //                             padding: '12px 24px',
-    //                             backgroundColor: TMColors.primaryColor,
-    //                             color: 'white',
-    //                             textDecoration: 'none',
-    //                             borderRadius: '4px',
-    //                             display: 'inline-block'
-    //                         }}
-    //                     >
-    //                         {SDKUI_Localizator.DownloadFile}
-    //                     </a>
-    //                     <a
-    //                         href={blobUrl}
-    //                         target="_blank"
-    //                         rel="noopener noreferrer"
-    //                         style={{
-    //                             minWidth: '180px',
-    //                             padding: '12px 24px',
-    //                             backgroundColor: TMColors.primaryColor,
-    //                             color: 'white',
-    //                             textDecoration: 'none',
-    //                             borderRadius: '4px',
-    //                             display: 'inline-block'
-    //                         }}
-    //                     >
-    //                         {SDKUI_Localizator.OpenInNewTab}
-    //                     </a>
-    //                 </div>
-    //             </div>
-    //         </object>
-    //     );
-    // }
-    if (fileType === 'application/pdf' && isMobile) {
-        return (_jsx(PDFViewerContainer, { children: _jsx(Document, { file: blobUrl, onLoadSuccess: ({ numPages }) => setNumPages(numPages), loading: _jsxs("div", { style: {
-                        display: 'flex',
-                        justifyContent: 'center',
-                        alignItems: 'center',
-                        height: '100%',
-                        flexDirection: 'column',
-                        gap: '10px'
-                    }, children: [_jsx(IconPreview, { fontSize: 64 }), _jsxs("div", { children: [SDKUI_Localizator.Loading, "..."] })] }), error: _jsxs("div", { style: {
-                        display: 'flex',
-                        justifyContent: 'center',
-                        alignItems: 'center',
-                        height: '100%',
-                        flexDirection: 'column',
-                        gap: '10px'
-                    }, children: [_jsx(IconCloseOutline, { fontSize: 64, color: TMColors.error }), _jsx("div", { children: "Errore nel caricamento del PDF" })] }), children: Array.from(new Array(numPages), (el, index) => (_jsx(Page, { pageNumber: index + 1, renderTextLayer: false, renderAnnotationLayer: false, width: window.innerWidth }, `page_${index + 1}`))) }) }));
+    if (fileType === 'application/pdf') {
+        return _jsx(TMPdfViewer, { pdfBlob: fileBlob, isResizingActive: isResizingActive, enableFitToWidth: true });
     }
-    return (_jsx("iframe", { srcDoc: formattedXml ? `<html><body>${formattedXml}</body></html>` : undefined, src: !formattedXml
-            ? (fileType === 'application/pdf' ? `${blobUrl}#view=FitH&scrollbar=1` : blobUrl)
-            : undefined, title: "File Viewer", width: "100%", height: "100%", style: { border: 'none', zIndex: 0, pointerEvents: isResizingActive === true ? "none" : "auto" } }, blobUrl));
+    return (_jsx("iframe", { srcDoc: formattedXml ? `<html><body>${formattedXml}</body></html>` : undefined, src: !formattedXml ? blobUrl : undefined, title: "File Viewer", width: "100%", height: "100%", style: { border: 'none', zIndex: 0, pointerEvents: isResizingActive === true ? "none" : "auto" } }, blobUrl));
 };
 const ImageViewer = ({ fileBlob, alt = 'Image', className }) => {
     const containerRef = useRef(null);
@@ -450,32 +341,28 @@ const ImageViewer = ({ fileBlob, alt = 'Image', className }) => {
         const doc = iframe.contentWindow?.document;
         if (!doc)
             return;
-        doc.open();
-        doc.write(`
-            <html>
-                <head>
-                    <title>Print Image</title>
-                    <style>
-                        body, html {
-                            margin: 0;
-                            padding: 0;
-                            height: 100%;
-                            display: flex;
-                            justify-content: center;
-                            align-items: center;
-                        }
-                        img {
-                            max-width: 100%;
-                            max-height: 100%;
-                        }
-                    </style>
-                </head>
-                <body>
-                    <img src="${dataUrl}" onload="setTimeout(() => { window.print(); window.close(); }, 100);" />
-                </body>
-            </html>
-        `);
-        doc.close();
+        doc.documentElement.innerHTML = `
+            <head>
+                <title>Print Image</title>
+                <style>
+                    body, html {
+                        margin: 0;
+                        padding: 0;
+                        height: 100%;
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+                    }
+                    img {
+                        max-width: 100%;
+                        max-height: 100%;
+                    }
+                </style>
+            </head>
+            <body>
+                <img src="${dataUrl}" onload="setTimeout(() => { window.print(); window.close(); }, 100);" />
+            </body>
+        `;
         iframe.contentWindow?.addEventListener('afterprint', () => {
             document.body.removeChild(iframe);
         });
@@ -514,7 +401,7 @@ const StyledPreviewContainer = styled.div `display: flex; justify-content: cente
 export const StyledHeaderIcon = styled.div ` color: ${props => props.$color};  cursor: pointer; display: flex; align-items: center; justify-content: center; &:hover{ color: white ; transition: 200ms ease; } `;
 export const StyledPanelStatusContainer = styled.div ` width: 100%; height: 100%; padding: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; `;
 const StyledPreviewNotAvailable = styled.div ` display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; `;
-const ImageContainer = styled.div ` width: calc(100% - 20px); height: 100%; left:10px; position: absolute; top:50px; overflow: hidden; background: #f5f5f5; touch-action: none; user-select: none; cursor: ${({ $cursor }) => $cursor ?? 'default'}; `;
+const ImageContainer = styled.div ` width: calc(100% - 20px); height: 100%; left:10px; position: absolute; top:50px; overflow: hidden; background: #f5f5f5; touch-action: none; user-select: none; -webkit-touch-callout: none; -webkit-user-select: none; cursor: ${({ $cursor }) => $cursor ?? 'default'}; `;
 const TopToolbar = styled.div ` position: absolute; top: 0; width: 100%; height: 40px; background-color: #e4e4e4; display: flex; justify-content: center; align-items: center; z-index: 10; `;
 const ToolbarCenter = styled.div ` display: flex; align-items: center; gap: 12px;`;
 const ToolbarIconButton = styled.button ` background: #f0f0f0; border: none; color: #313131; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; height: 32px; width: 32px; padding: 0; border-radius: 50px; &:hover{ background-color: #c4c4c4; } &:disabled { color: #c2c2c2; cursor: not-allowed; } `;

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

@@ -1,6 +1,6 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
-import { IconMenuVertical, IconRefresh, SDKUI_Localizator, svgToString, TMCommandsContextMenu } from "../../../helper";
+import { IconMenuVertical, IconRefresh, SDKUI_Localizator, TMCommandsContextMenu } from "../../../helper";
 import { DeviceType, useDeviceType } from "../../base/TMDeviceProvider";
 import { useTMPanelManagerContext } from "../../layout/panelManager/TMPanelManagerContext";
 import TMPanel from "../../base/TMPanel";
@@ -12,13 +12,13 @@ const TMDcmtTasks = (props) => {
     // This avoids unnecessary re-renders by only recalculating when deviceType changes.
     let isMobile = useMemo(() => { return deviceType === DeviceType.MOBILE; }, [deviceType]);
     const { togglePanelVisibility, toggleMaximize, countVisibleLeafPanels } = useTMPanelManagerContext();
-    const toolbar = useMemo(() => _jsxs(_Fragment, { children: [_jsx(IconMenuVertical, { id: "TMTaksPanel-Commands-Header", color: 'white', cursor: 'pointer' }), _jsx(TMCommandsContextMenu, { target: '#TMTaksPanel-Commands-Header', showEvent: "click", menuItems: [
-                    {
-                        icon: svgToString(_jsx(IconRefresh, {})),
-                        onClick: async () => await getAllTasks(),
-                        text: SDKUI_Localizator.Refresh,
-                    },
-                ] })] }), []);
+    const toolbar = useMemo(() => _jsx(TMCommandsContextMenu, { target: '#TMTaksPanel-Commands-Header', showEvent: "click", menuItems: [
+            {
+                icon: _jsx(IconRefresh, {}),
+                onClick: async () => await getAllTasks(),
+                text: SDKUI_Localizator.Refresh,
+            },
+        ], children: _jsx(IconMenuVertical, { id: "TMTaksPanel-Commands-Header", color: 'white', cursor: 'pointer' }) }), []);
     return _jsx("div", { style: { width: "100%", height: "100%", position: 'relative' }, children: _jsx(TMPanel, { title: SDKUI_Localizator.Widget_Activities, allowMaximize: !isMobile && countVisibleLeafPanels() > 1, onClose: countVisibleLeafPanels() > 1 ? () => togglePanelVisibility("tmDcmtTasks") : undefined, onMaximize: countVisibleLeafPanels() > 1 ? () => toggleMaximize("tmDcmtTasks") : undefined, toolbar: toolbar, children: _jsx(TMTasksPanelContent, { id: "dcmtTasks", taskContext: taskContext, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: () => { return Promise.resolve(); }, handleNavigateToDossiers: () => { return Promise.resolve(); }, afterTaskSaved: afterTaskSaved }) }) });
 };
 export default TMDcmtTasks;

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

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { DcmtTypeListCacheService, SDK_Localizator } from '@topconsultnpm/sdk-ts';
-import { ContextMenu } from 'devextreme-react';
 import TMRelationViewer from './TMRelationViewer';
-import { genUniqueId, svgToString, IconMultipleSelection, IconCheckFile, IconDetailDcmts, SDKUI_Localizator, IconMail, IconDcmtTypeOnlyMetadata, IconCopy, IconMenuVertical, IconDataList, IconPreview, IconSearchCheck, IconBoard, IconDcmtTypeSys, IconShow } from '../../../helper';
+import TMContextMenu from '../../NewComponents/ContextMenu/TMContextMenu';
+import { genUniqueId, IconMultipleSelection, IconCheckFile, IconDetailDcmts, SDKUI_Localizator, IconMail, IconDcmtTypeOnlyMetadata, IconCopy, IconMenuVertical, IconDataList, IconPreview, IconSearchCheck, IconBoard, IconDcmtTypeSys, IconShow, getMoreInfoTasksForDocument } from '../../../helper';
 import { FormModes, SearchResultContext } from '../../../ts';
 import { TMColors } from '../../../utils/theme';
 import ShowAlert from '../../base/TMAlert';
@@ -46,120 +46,105 @@ const TMMasterDetailDcmts = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallba
     }, []);
     const commandsMenuItems = [
         {
-            icon: svgToString(_jsx(IconMultipleSelection, { color: allowMultipleSelection ? TMColors.tertiary : TMColors.text_normal })),
-            text: "Selezione multipla",
-            operationType: 'singleRow',
+            icon: _jsx(IconMultipleSelection, { color: allowMultipleSelection ? TMColors.tertiary : TMColors.text_normal }),
+            name: "Selezione multipla",
             onClick: () => {
                 setAllowMultipleSelection(prev => !prev);
             }
         },
         {
-            icon: svgToString(_jsx(IconCheckFile, {})),
-            text: "Consenti dettagli con 0 documenti",
-            operationType: 'singleRow',
+            icon: _jsx(IconCheckFile, {}),
+            name: "Consenti dettagli con 0 documenti",
             onClick: () => {
                 setShowZeroDcmts(prev => !prev);
             }
         },
         {
-            icon: svgToString(_jsx(IconDetailDcmts, { transform: 'scale(-1, 1)' })),
-            text: SDKUI_Localizator.DcmtsMaster,
-            operationType: 'singleRow',
+            icon: _jsx(IconDetailDcmts, { transform: 'scale(-1, 1)' }),
+            name: SDKUI_Localizator.DcmtsMaster,
             disabled: !focusedItem?.isDcmt || !isForMaster,
             onClick: () => {
                 appendMasterDcmts?.(focusedItem?.tid, focusedItem?.did);
             }
         },
         {
-            icon: svgToString(_jsx(IconMail, {})),
-            text: "Invia per posta",
-            operationType: 'multiRow',
+            icon: _jsx(IconMail, {}),
+            name: "Invia per posta",
             disabled: false,
             beginGroup: true,
-            items: [
+            submenu: [
                 {
-                    icon: svgToString(_jsx(IconMail, {})),
-                    text: "I documenti selezionati",
-                    operationType: 'multiRow',
+                    icon: _jsx(IconMail, {}),
+                    name: "I documenti selezionati",
                     disabled: false,
                     onClick: () => ShowAlert({ message: "TODO", mode: 'info', title: `${"TODO"}`, duration: 3000 })
                 },
                 {
-                    icon: svgToString(_jsx(IconMail, {})),
-                    text: "I documenti di primo livello e tutti i documenti correlati",
-                    operationType: 'multiRow',
+                    icon: _jsx(IconMail, {}),
+                    name: "I documenti di primo livello e tutti i documenti correlati",
                     disabled: false,
                     onClick: () => ShowAlert({ message: "TODO", mode: 'info', title: `${"TODO"}`, duration: 3000 })
                 },
                 {
-                    icon: svgToString(_jsx(IconMail, {})),
-                    text: "I documenti di primo livello e i documenti correlati personalizzando l'operazione",
-                    operationType: 'multiRow',
+                    icon: _jsx(IconMail, {}),
+                    name: "I documenti di primo livello e i documenti correlati personalizzando l'operazione",
                     disabled: false,
                     onClick: () => ShowAlert({ message: "TODO", mode: 'info', title: `${"TODO"}`, duration: 3000 })
                 },
             ]
         },
         {
-            icon: svgToString(_jsx(IconDcmtTypeOnlyMetadata, {})),
-            text: "Unisci in un file PDF",
-            operationType: 'multiRow',
+            icon: _jsx(IconDcmtTypeOnlyMetadata, {}),
+            name: "Unisci in un file PDF",
             disabled: false,
-            items: [
+            submenu: [
                 {
-                    icon: svgToString(_jsx(IconDcmtTypeOnlyMetadata, {})),
-                    text: "I documenti selezionati",
-                    operationType: 'multiRow',
+                    icon: _jsx(IconDcmtTypeOnlyMetadata, {}),
+                    name: "I documenti selezionati",
                     disabled: false,
                     onClick: () => ShowAlert({ message: "TODO", mode: 'info', title: `${"TODO"}`, duration: 3000 })
                 },
                 {
-                    icon: svgToString(_jsx(IconDcmtTypeOnlyMetadata, {})),
-                    text: "I documenti di primo livello e tutti i documenti correlati",
-                    operationType: 'multiRow',
+                    icon: _jsx(IconDcmtTypeOnlyMetadata, {}),
+                    name: "I documenti di primo livello e tutti i documenti correlati",
                     disabled: false,
                     onClick: () => ShowAlert({ message: "TODO", mode: 'info', title: `${"TODO"}`, duration: 3000 })
                 },
                 {
-                    icon: svgToString(_jsx(IconDcmtTypeOnlyMetadata, {})),
-                    text: "I documenti di primo livello e i documenti correlati personalizzando l'operazione",
-                    operationType: 'multiRow',
+                    icon: _jsx(IconDcmtTypeOnlyMetadata, {}),
+                    name: "I documenti di primo livello e i documenti correlati personalizzando l'operazione",
                     disabled: false,
                     onClick: () => ShowAlert({ message: "TODO", mode: 'info', title: `${"TODO"}`, duration: 3000 })
                 },
             ]
         },
         {
-            icon: svgToString(_jsx(IconCopy, {})),
-            text: "Copia in una cartella",
-            operationType: 'multiRow',
+            icon: _jsx(IconCopy, {}),
+            name: "Copia in una cartella",
             disabled: false,
-            items: [
+            submenu: [
                 {
-                    icon: svgToString(_jsx(IconCopy, {})),
-                    text: "I documenti selezionati",
-                    operationType: 'multiRow',
+                    icon: _jsx(IconCopy, {}),
+                    name: "I documenti selezionati",
                     disabled: false,
                     onClick: () => ShowAlert({ message: "TODO", mode: 'info', title: `${"TODO"}`, duration: 3000 })
                 },
                 {
-                    icon: svgToString(_jsx(IconCopy, {})),
-                    text: "I documenti di primo livello e tutti i documenti correlati",
-                    operationType: 'multiRow',
+                    icon: _jsx(IconCopy, {}),
+                    name: "I documenti di primo livello e tutti i documenti correlati",
                     disabled: false,
                     onClick: () => ShowAlert({ message: "TODO", mode: 'info', title: `${"TODO"}`, duration: 3000 })
                 },
                 {
-                    icon: svgToString(_jsx(IconCopy, {})),
-                    text: "I documenti di primo livello e i documenti correlati personalizzando l'operazione",
-                    operationType: 'multiRow',
+                    icon: _jsx(IconCopy, {}),
+                    name: "I documenti di primo livello e i documenti correlati personalizzando l'operazione",
                     disabled: false,
                     onClick: () => ShowAlert({ message: "TODO", mode: 'info', title: `${"TODO"}`, duration: 3000 })
                 },
             ]
         }
     ];
-    const toolbar = _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '10px' }, children: [allowMultipleSelection && _jsx("p", { style: { color: TMColors.colorHeader, textAlign: 'center', padding: '1px 4px', borderRadius: '3px', display: 'flex' }, children: `${selectedItems.length} selezionati` }), allowNavigation && canPrev != undefined && _jsx(TMSaveFormButtonPrevious, { btnStyle: 'icon', iconColor: 'white', isModified: false, formMode: FormModes.ReadOnly, canPrev: canPrev, onPrev: onPrev }), allowNavigation && canNext != undefined && _jsx(TMSaveFormButtonNext, { btnStyle: 'icon', iconColor: 'white', isModified: false, formMode: FormModes.ReadOnly, canNext: canNext, onNext: onNext }), _jsx(IconMenuVertical, { id: `commands-detail-${id}`, color: 'white', cursor: 'pointer' }), _jsx(ContextMenu, { showEvent: 'click', dataSource: commandsMenuItems, target: `#commands-detail-${id}` })] });
+    const toolbar = _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '10px' }, children: [allowMultipleSelection && _jsx("p", { style: { color: TMColors.colorHeader, textAlign: 'center', padding: '1px 4px', borderRadius: '3px', display: 'flex' }, children: `${selectedItems.length} selezionati` }), allowNavigation && canPrev != undefined && _jsx(TMSaveFormButtonPrevious, { btnStyle: 'icon', iconColor: 'white', isModified: false, formMode: FormModes.ReadOnly, canPrev: canPrev, onPrev: onPrev }), allowNavigation && canNext != undefined && _jsx(TMSaveFormButtonNext, { btnStyle: 'icon', iconColor: 'white', isModified: false, formMode: FormModes.ReadOnly, canNext: canNext, onNext: onNext }), _jsx(TMContextMenu, { items: commandsMenuItems, trigger: 'left', children: _jsx(IconMenuVertical, { color: 'white', cursor: 'pointer' }) })] });
     const getTitle = () => isForMaster ? `${SDKUI_Localizator.DcmtsMaster} - ${dtdMaster?.nameLoc}` : SDKUI_Localizator.DcmtsDetail;
     const isMobile = deviceType === DeviceType.MOBILE;
     const tmTreeView = useMemo(() => _jsx(_Fragment, { children: !inputDcmts || inputDcmts.length === 0
@@ -169,7 +154,7 @@ const TMMasterDetailDcmts = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallba
                 _jsx(TMRelationViewerWrapper, { inputDcmts: inputDcmts, isForMaster: isForMaster, showCurrentDcmtIndicator: showCurrentDcmtIndicator, showZeroDcmts: showZeroDcmts, 
                     // customItemRender={customItemRender}
                     allowMultipleSelection: allowMultipleSelection, focusedItem: focusedItem, selectedItems: selectedItems, onFocusedItemChanged: handleFocusedItemChanged, onSelectedItemsChanged: handleSelectedItemsChanged }) }), [inputDcmts, isForMaster, showCurrentDcmtIndicator, showZeroDcmts, allowMultipleSelection, focusedItem, selectedItems, handleFocusedItemChanged, handleSelectedItemsChanged]);
-    const tmFormOrResult = useMemo(() => _jsx(TMFormOrResultWrapper, { deviceType: deviceType, focusedItem: focusedItem, onTaskCreateRequest: onTaskCreateRequest, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers }), [focusedItem, deviceType, allTasks]);
+    const tmFormOrResult = useMemo(() => _jsx(TMFormOrResultWrapper, { deviceType: deviceType, focusedItem: focusedItem, onTaskCreateRequest: onTaskCreateRequest, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers }), [focusedItem, deviceType, allTasks, handleNavigateToWGs, handleNavigateToDossiers]);
     const initialPanelDimensions = {
         'tmTreeView': { width: '50%', height: '100%' },
         'tmFormOrResult': { width: '50%', height: '100%' },
@@ -281,7 +266,7 @@ const TMFormOrResultWrapper = ({ deviceType, focusedItem, onTaskCreateRequest, a
     return (_jsx(_Fragment, { children: focusedItem?.isDcmt ?
             _jsx(TMDcmtForm, { groupId: 'tmFormOrResult', TID: focusedItem?.tid, DID: focusedItem.did, allowButtonsRefs: true, isClosable: deviceType !== DeviceType.MOBILE, allowNavigation: false, allowRelations: deviceType !== DeviceType.MOBILE, showDcmtFormSidebar: false, onClose: () => {
                     setPanelVisibilityById('tmTreeView', true);
-                }, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers }) :
+                }, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers, moreInfoTasks: getMoreInfoTasksForDocument(allTasks, focusedItem?.tid, focusedItem?.did) }) :
             _jsx(TMSearchResult, { groupId: 'tmFormOrResult', isClosable: deviceType !== DeviceType.MOBILE, context: SearchResultContext.METADATA_SEARCH, allowFloatingBar: false, allowRelations: false, openDcmtFormAsModal: true, searchResults: focusedItem?.searchResult ?? [], showSearchResultSidebar: false, onTaskCreateRequest: onTaskCreateRequest, onClose: () => {
                     setPanelVisibilityById('tmTreeView', true);
                 }, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers }) }));

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

@@ -65,7 +65,7 @@ export interface TMRelationViewerProps {
     /**
      * Show metadata names before values (default: false).
      * When true, displays "MetadataName: Value", otherwise just "Value".
-     * Value rendering respects DataDomain (uses TMDataListItemViewer for lists, TMUserIdViewer for users, etc.)
+     * Value rendering respects DataDomain (uses TMDataListItemViewer for lists, TMDataUserIdItemViewer for users, etc.)
      */
     showMetadataNames?: boolean;
     /** Maximum depth level for recursive loading (default: 2) */

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

@@ -6,9 +6,9 @@ import { TMColors } from '../../../utils/theme';
 import { StyledDivHorizontal, StyledBadge } from '../../base/Styled';
 import TMTreeView from '../../base/TMTreeView';
 import { TMWaitPanel } from '../../base/TMWaitPanel';
-import { TMUserIdViewer } from '../../choosers/TMUserChooser';
 import TMDataListItemViewer from '../../viewers/TMDataListItemViewer';
 import TMDcmtIcon from './TMDcmtIcon';
+import TMDataUserIdItemViewer from '../../viewers/TMDataUserIdItemViewer';
 /**
  * Check if document type has detail relations
  */
@@ -685,7 +685,7 @@ const TMRelationViewer = ({ inputDcmts, isForMaster = false, showCurrentDcmtIndi
                         flexShrink: isLast ? 1 : 0,
                         minWidth: isLast ? 0 : 'auto',
                         overflow: isLast ? 'hidden' : 'visible'
-                    }, children: [index > 0 && _jsx("span", { style: { margin: '0 5px', color: '#999' }, children: "\u2022" }), showMetadataNames && (_jsxs("span", { style: { color: '#666', marginRight: '5px' }, children: [md?.name || key, ":"] })), md?.dataDomain === MetadataDataDomains.DataList ? (_jsx(TMDataListItemViewer, { dataListId: md.dataListID, viewMode: md.dataListViewMode, value: value })) : md?.dataDomain === MetadataDataDomains.UserID ? (_jsx(TMUserIdViewer, { userId: value, showIcon: true, noneSelectionText: '' })) : (_jsx("span", { style: {
+                    }, children: [index > 0 && _jsx("span", { style: { margin: '0 5px', color: '#999' }, children: "\u2022" }), showMetadataNames && (_jsxs("span", { style: { color: '#666', marginRight: '5px' }, children: [md?.name || key, ":"] })), md?.dataDomain === MetadataDataDomains.DataList ? (_jsx(TMDataListItemViewer, { dataListId: md.dataListID, viewMode: md.dataListViewMode, value: value })) : md?.dataDomain === MetadataDataDomains.UserID ? (_jsx(TMDataUserIdItemViewer, { userId: value, showIcon: true })) : (_jsx("span", { style: {
                                 fontWeight: 500,
                                 overflow: isLast ? 'hidden' : 'visible',
                                 textOverflow: isLast ? 'ellipsis' : 'clip',

package/lib/components/features/search/TMDcmtCheckoutInfoForm.d.ts

@@ -0,0 +1,8 @@
+import { DcmtInfo } from "../../../ts";
+interface TMDcmtCheckoutInfoFormProps {
+    dtdName: string;
+    selectedDcmtOrFocused: DcmtInfo;
+    onClose: () => void;
+}
+declare const TMDcmtCheckoutInfoForm: (props: TMDcmtCheckoutInfoFormProps) => import("react/jsx-runtime").JSX.Element;
+export default TMDcmtCheckoutInfoForm;

package/lib/components/features/search/{TMSearchResultCheckoutInfoForm.js → TMDcmtCheckoutInfoForm.js}

@@ -12,7 +12,7 @@ import TMTooltip from "../../base/TMTooltip";
 import TMTextBox from "../../editors/TMTextBox";
 import ShowAlert from "../../base/TMAlert";
 import { TMExceptionBoxManager } from "../../base/TMPopUp";
-const TMSearchResultCheckoutInfoForm = (props) => {
+const TMDcmtCheckoutInfoForm = (props) => {
     const { dtdName, selectedDcmtOrFocused, onClose } = props;
     const [initialDcmtCheckoutFolder, setInitialDcmtCheckoutFolder] = useState("");
     const [initialDcmtCheckoutName, setInitialDcmtCheckoutName] = useState("");
@@ -126,4 +126,4 @@ const TMSearchResultCheckoutInfoForm = (props) => {
                                             e.currentTarget.style.color = TMColors.primary;
                                         }, children: SDKUI_Localizator.Cancel })] })] }) }) }) }) });
 };
-export default TMSearchResultCheckoutInfoForm;
+export default TMDcmtCheckoutInfoForm;