@topconsultnpm/sdkui-react 6.20.0-dev1.7 → 6.20.0-dev1.70

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

@@ -8,13 +8,14 @@ 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 { 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 })] }) }));
@@ -124,10 +125,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) }) }));
 };
@@ -136,40 +138,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<boolean>(false);
-    // useEffect(() => {
-    //     const checkIsMobile = () => {
-    //         const userAgent = navigator.userAgent || navigator.vendor || (window as any).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");
@@ -188,7 +165,7 @@ export const TMFileViewer = ({ fileBlob, isResizingActive }) => {
                 });
                 setBlobUrl(undefined);
             }
-            else if (isConfigFile) {
+            else if (isTextBasedFile) {
                 fileBlob.text().then((text) => {
                     const escapedText = text
                         .replace(/&/g, "&amp;")
@@ -222,76 +199,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>
-    //     );
-    // }
-    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));
+    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 ? 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);
@@ -510,3 +421,28 @@ const StyledImage = styled.img.attrs(props => ({
   pointer-events: none;
   position: absolute;
 `;
+const PDFViewerContainer = styled.div `
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  background-color: #f5f5f5;
+  
+  .react-pdf__Document {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 10px;
+    padding: 10px 0;
+  }
+  
+  .react-pdf__Page {
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    margin: 0 auto;
+  }
+  
+  .react-pdf__Page__canvas {
+    max-width: 100%;
+    height: auto !important;
+  }
+`;

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 } 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%' },

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}

@@ -5,14 +5,14 @@ import { IconBxInfo, IconFileDots, IconFolder, SDKUI_Globals, SDKUI_Localizator
 import { FormModes } from "../../../ts";
 import { ResultTypes, ValidationItem } from "@topconsultnpm/sdk-ts";
 import { SaveFormOptions, useSaveForm } from "../../../hooks/useForm";
-import { getCicoDownloadFileName, updateCheckoutItem } from "../../../helper/checkinCheckoutManager";
+import { getCicoDownloadFileName, updateCicoCheckoutStorageItem } from "../../../helper/checkinCheckoutManager";
 import { TMColors } from "../../../utils/theme";
 import TMLayoutContainer, { TMLayoutItem } from "../../base/TMLayout";
 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("");
@@ -57,13 +57,8 @@ const TMSearchResultCheckoutInfoForm = (props) => {
             // Check: formData must exist, selectedDcmtOrFocused.TID and selectedDcmtOrFocused.DID must exist, and at least one of checkoutFolder or checkoutName must be filled
             if (formData && selectedDcmtOrFocused.TID && selectedDcmtOrFocused.DID) {
                 // Create a new draft checkout item with TID, DID, and folder/name values
-                const newItem = {
-                    TID: selectedDcmtOrFocused.TID.toString(),
-                    DID: selectedDcmtOrFocused.DID.toString(),
-                    checkoutFolder: formData.checkoutFolder ?? "",
-                    checkoutName: formData.checkoutName ?? ""
-                };
-                updateCheckoutItem(newItem, "dcmtInfo", "addOrUpdate");
+                const newItem = { TID: selectedDcmtOrFocused.TID.toString(), DID: selectedDcmtOrFocused.DID.toString(), checkoutFolder: formData.checkoutFolder ?? "", checkoutName: formData.checkoutName ?? "" };
+                updateCicoCheckoutStorageItem(newItem, "dcmtInfo", "addOrUpdate");
                 onClose();
                 ShowAlert({ mode: 'success', title: SDKUI_Localizator.CheckoutInfo, message: SDKUI_Localizator.OperationSuccess, duration: 3000 });
             }
@@ -131,4 +126,4 @@ const TMSearchResultCheckoutInfoForm = (props) => {
                                             e.currentTarget.style.color = TMColors.primary;
                                         }, children: SDKUI_Localizator.Cancel })] })] }) }) }) }) });
 };
-export default TMSearchResultCheckoutInfoForm;
+export default TMDcmtCheckoutInfoForm;