@topconsultnpm/sdkui-react 6.19.0-test.1 → 6.19.0

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

@@ -15,11 +15,18 @@ import { TMSaveFormButtonPrevious, TMSaveFormButtonNext } from '../../forms/TMSa
 import { StyledAnimatedComponentOpacity } from '../../base/Styled';
 import TMPanel from '../../base/TMPanel';
 import TMTooltip from '../../base/TMTooltip';
+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 })] }) }));
+    }
+    return _jsx(TMNothingToShow, { icon: _jsx(IconCloseOutline, { fontSize: 92, color: TMColors.error }), text: error });
+};
 const TMDcmtPreview = ({ dcmtData, isResizingActive, isVisible, canNext, canPrev, onClosePanel, onNext, onPrev, allowMaximize = true, onMaximizePanel }) => {
     const [dcmtBlob, setDcmtBlob] = useState(undefined);
     const [showPreview, setShowPreview] = useState(false);
     const [isFromCache, setIsFromCache] = useState(false);
     const [error, setError] = useState('');
+    const [isAbortError, setIsAbortError] = useState(false);
     const { abortController, showWaitPanel, waitPanelTitle, showPrimary, waitPanelTextPrimary, waitPanelValuePrimary, waitPanelMaxValuePrimary, showSecondary, waitPanelTextSecondary, waitPanelValueSecondary, waitPanelMaxValueSecondary, getDcmtFileAsync, clearDcmtsFileCache, removeDcmtsFileCache, isDcmtFileInCache } = useDcmtOperations();
     const cacheKey = dcmtData ? `${dcmtData.tid}-${dcmtData.did}` : '00';
     const [hasLoadedDataOnce, setHasLoadedDataOnce] = useState(false);
@@ -29,6 +36,7 @@ const TMDcmtPreview = ({ dcmtData, isResizingActive, isVisible, canNext, canPrev
             setLastLoadedDid(undefined); // Reset 
             setDcmtBlob(undefined);
             setError('');
+            setIsAbortError(false);
             setShowPreview(false);
             return;
         }
@@ -42,6 +50,7 @@ const TMDcmtPreview = ({ dcmtData, isResizingActive, isVisible, canNext, canPrev
         if (shouldFetch) {
             setDcmtBlob(undefined);
             setError('');
+            setIsAbortError(false);
             if ((extensionHandler(dcmtData.fileExt) !== FileExtensionHandler.NONE) && ((dcmtData.fileSize ?? 0) <= (SDKUI_Globals.userSettings.searchSettings.previewThreshold * 1024))) {
                 loadDocumentWithCache();
                 setShowPreview(true);
@@ -65,15 +74,19 @@ const TMDcmtPreview = ({ dcmtData, isResizingActive, isVisible, canNext, canPrev
             let dcmtFile = await getDcmtFileAsync({ TID: dcmtData?.tid, DID: dcmtData?.did, FILEEXT: dcmtData?.fileExt }, rfo, 'Anteprima', false);
             setDcmtBlob(dcmtFile?.file);
             setIsFromCache(!!dcmtFile?.isFromCache);
+            setError('');
+            setIsAbortError(false);
         }
         catch (ex) {
             const err = ex;
             if (err.name === 'CanceledError') {
                 setError('Operazione annullata.');
+                setIsAbortError(true);
                 ShowAlert({ message: err.message, mode: 'warning', duration: 3000, title: 'Abort' });
             }
             else {
                 setError(getExceptionMessage(ex));
+                setIsAbortError(false);
                 TMExceptionBoxManager.show({ exception: ex });
             }
         }
@@ -101,6 +114,9 @@ const TMDcmtPreview = ({ dcmtData, isResizingActive, isVisible, canNext, canPrev
     const reOpenDcmt = async () => {
         removeDcmtsFileCache(cacheKey);
         setIsFromCache(false);
+        setError('');
+        setIsAbortError(false);
+        setDcmtBlob(undefined);
         try {
             await loadDocumentWithCache();
         }
@@ -112,7 +128,7 @@ const TMDcmtPreview = ({ dcmtData, isResizingActive, isVisible, canNext, canPrev
                                 { 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
-                ? _jsx(TMNothingToShow, { icon: _jsx(IconCloseOutline, { fontSize: 92, color: TMColors.error }), text: 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) }) }));
 };
 export default TMDcmtPreview;
@@ -148,11 +164,12 @@ export const TMFileViewer = ({ fileBlob, isResizingActive }) => {
     }, []);
     useEffect(() => {
         if (fileBlob) {
-            const url = URL.createObjectURL(fileBlob);
-            setBlobUrl(url);
             setFileType(fileBlob.type);
             setFormattedXml(undefined);
-            if (fileBlob.type.includes("xml")) {
+            const fileName = fileBlob.name || '';
+            const fileExtension = fileName.split('.').pop()?.toLowerCase() || '';
+            const isConfigFile = ['config', 'cfg'].includes(fileExtension);
+            if (fileBlob.type.includes("xml") && !isConfigFile) {
                 fileBlob.text().then((text) => {
                     const parser = new DOMParser();
                     const xmlDoc = parser.parseFromString(text, "application/xml");
@@ -169,10 +186,28 @@ export const TMFileViewer = ({ fileBlob, isResizingActive }) => {
                         .replace(/</g, "&lt;")
                         .replace(/>/g, "&gt;")}</pre>`);
                 });
+                setBlobUrl(undefined);
+            }
+            else if (isConfigFile) {
+                fileBlob.text().then((text) => {
+                    const escapedText = text
+                        .replace(/&/g, "&amp;")
+                        .replace(/</g, "&lt;")
+                        .replace(/>/g, "&gt;");
+                    setFormattedXml(`<pre style="font-family: monospace; white-space: pre-wrap; line-height: 1.5; margin: 0; padding: 10px;">${escapedText}</pre>`);
+                }).catch((error) => {
+                    console.error("Error reading text file:", error);
+                    setFormattedXml(`<div style="color: red;">Error reading file</div>`);
+                });
+                setBlobUrl(undefined);
+            }
+            else {
+                const url = URL.createObjectURL(fileBlob);
+                setBlobUrl(url);
+                return () => {
+                    URL.revokeObjectURL(url);
+                };
             }
-            return () => {
-                URL.revokeObjectURL(url);
-            };
         }
         else {
             setBlobUrl(undefined);
@@ -225,7 +260,9 @@ export const TMFileViewer = ({ fileBlob, isResizingActive }) => {
                                 display: 'inline-block'
                             }, children: SDKUI_Localizator.OpenInNewTab })] })] }));
     }
-    return (_jsx("iframe", { srcDoc: fileType?.includes("xml") && formattedXml ? `<html><body>${formattedXml}</body></html>` : undefined, src: !fileType?.includes("xml") || !formattedXml ? blobUrl : undefined, title: "File Viewer", width: "100%", height: "100%", style: { border: 'none', zIndex: 0, pointerEvents: isResizingActive === true ? "none" : "auto" } }));
+    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));
 };
 const ImageViewer = ({ fileBlob, alt = 'Image', className }) => {
     const containerRef = useRef(null);
@@ -364,29 +401,29 @@ const ImageViewer = ({ fileBlob, alt = 'Image', className }) => {
         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.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();
         iframe.contentWindow?.addEventListener('afterprint', () => {
@@ -436,11 +473,11 @@ const StyledImage = styled.img.attrs(props => ({
     style: {
         transform: `translate(${props.$tx}px, ${props.$ty}px) scale(${props.$scale}) rotate(${props.$rotate}deg)`,
     },
-})) `
-  display: block;
-  max-width: none;
-  max-height: none;
-  transform-origin: top left;
-  pointer-events: none;
-  position: absolute;
+})) `
+  display: block;
+  max-width: none;
+  max-height: none;
+  transform-origin: top left;
+  pointer-events: none;
+  position: absolute;
 `;

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

@@ -89,27 +89,27 @@ const TMFileUploader = ({ deviceType = DeviceType.DESKTOP, onClose, onFileUpload
     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] }));
     return showTMPanel ? (_jsx(TMPanel, { ref: fileUploaderPanelRef, panelID: 'file-uploader-panel', title: SDKUI_Localizator.FileUpload, onBack: deviceType === DeviceType.MOBILE ? () => onClose?.() : undefined, toolbar: deviceType !== DeviceType.MOBILE ? (_jsx(StyledHeaderIcon, { onClick: onClose, "$color": 'white', children: _jsx(TMTooltip, { content: SDKUI_Localizator.Close, children: _jsx(IconCloseOutline, {}) }) })) : undefined, children: innerContent })) : (innerContent);
 };
-const UploadContainer = styled.div ` 
-position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  gap: 5px;
-  border: 2px dashed ${props => props.$isRequired ? () => TMColors.error : () => TMColors.primaryColor};
-  /* max-height: 100px; */
-  width: 100%;
-  height: 100%;
-  border-radius: 8px;
-  padding: 30px;
-  text-align: center;
-  color: ${props => props.$isRequired ? () => TMColors.error : () => TMColors.primaryColor};
-  transition: background-color 0.3s;
-  &:hover {
-    background-color: #658cab;
-  } 
+const UploadContainer = styled.div ` 
+position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: 5px;
+  border: 2px dashed ${props => props.$isRequired ? () => TMColors.error : () => TMColors.primaryColor};
+  /* max-height: 100px; */
+  width: 100%;
+  height: 100%;
+  border-radius: 8px;
+  padding: 30px;
+  text-align: center;
+  color: ${props => props.$isRequired ? () => TMColors.error : () => TMColors.primaryColor};
+  transition: background-color 0.3s;
+  &:hover {
+    background-color: #658cab;
+  } 
 `;
-const HiddenInput = styled.input `
-  display: none;
+const HiddenInput = styled.input `
+  display: none;
 `;
 export default TMFileUploader;

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

@@ -136,18 +136,22 @@ export const searchResultToDataSource = async (searchResult, hideSysMetadata) =>
     }
     return output;
 };
-const TMRelationViewer = ({ inputDcmts, isForMaster = false, showCurrentDcmtIndicator = true, allowShowZeroDcmts = true, initialShowZeroDcmts = false, allowedTIDs, allowMultipleSelection = false, focusedItem, selectedItems, onFocusedItemChanged, onSelectedItemsChanged, onDocumentDoubleClick, customItemRender, customDocumentStyle, customMainContainerContent, customDocumentContent, showMetadataNames = false, maxDepthLevel = 2, invertMasterNavigation = true, additionalStaticItems = [], showMainDocument = true, labelMainContainer, }) => {
+const TMRelationViewer = ({ inputDcmts, isForMaster = false, showCurrentDcmtIndicator = true, allowShowZeroDcmts = true, initialShowZeroDcmts = false, allowedTIDs, allowMultipleSelection = false, focusedItem, selectedItems, onFocusedItemChanged, onSelectedItemsChanged, onDocumentDoubleClick, customItemRender, customDocumentStyle, customMainContainerContent, customDocumentContent, showMetadataNames = false, maxDepthLevel = 2, invertMasterNavigation = true, additionalStaticItems, showMainDocument = true, labelMainContainer, }) => {
     // State
     const [dcmtTypes, setDcmtTypes] = useState([]);
     const [treeData, setTreeData] = useState([]);
     const [showZeroDcmts, setShowZeroDcmts] = useState(initialShowZeroDcmts);
     const [staticItemsState, setStaticItemsState] = useState([]);
-    // Wait Panel State (only used if allowWaitPanel is true)
     const [showWaitPanel, setShowWaitPanel] = useState(false);
     const [waitPanelTextPrimary, setWaitPanelTextPrimary] = useState('');
     const [waitPanelValuePrimary, setWaitPanelValuePrimary] = useState(0);
     const [waitPanelMaxValuePrimary, setWaitPanelMaxValuePrimary] = useState(0);
     const [abortController] = useState(new AbortController());
+    const [showExpansionWaitPanel, setShowExpansionWaitPanel] = useState(false);
+    const [expansionWaitPanelText, setExpansionWaitPanelText] = useState('');
+    const [expansionWaitPanelValue, setExpansionWaitPanelValue] = useState(0);
+    const [expansionWaitPanelMaxValue, setExpansionWaitPanelMaxValue] = useState(0);
+    const [expansionAbortController, setExpansionAbortController] = useState(undefined);
     // Ref to track last loaded input to prevent unnecessary reloads
     const lastLoadedInputRef = React.useRef('');
     // Ref to track if user has manually expanded/collapsed static items
@@ -560,30 +564,55 @@ const TMRelationViewer = ({ inputDcmts, isForMaster = false, showCurrentDcmtIndi
         // If container is already loaded, return items
         if (node.isLoaded)
             return node.items;
-        // Load sub-documents for each document in the container
-        const newItems = [];
-        for (const dcmt of node.items ?? []) {
-            const item = { ...dcmt }; // Create a new reference
-            if (item.tid && item.did && !item.isLoaded) {
-                // Nella modalità originale (invertMasterNavigation=false), 
-                // i documenti detail non devono caricare i master come figli
-                if (isForMaster && !invertMasterNavigation) {
-                    // Carica i detail dei detail (navigazione naturale detail→detail)
-                    const loadedItems = await getDetailDcmtsAsync(item.tid, item.did, 1);
-                    item.items = updateHiddenProperty(loadedItems);
+        const newAbortController = new AbortController();
+        setExpansionAbortController(newAbortController);
+        const itemsToLoad = node.items?.length ?? 0;
+        setShowExpansionWaitPanel(true);
+        setExpansionWaitPanelMaxValue(itemsToLoad);
+        setExpansionWaitPanelValue(0);
+        setExpansionWaitPanelText(`Caricamento documenti correlati...`);
+        try {
+            const newItems = [];
+            let processedCount = 0;
+            for (const dcmt of node.items ?? []) {
+                if (newAbortController.signal.aborted) {
+                    console.log('Folder expansion aborted by user');
+                    return node.items;
                 }
-                else {
-                    // Modalità standard o invertita
-                    const loadedItems = isForMaster
-                        ? await getMasterDcmtsAsync(item.tid, item.did, 1)
-                        : await getDetailDcmtsAsync(item.tid, item.did, 1);
-                    item.items = updateHiddenProperty(loadedItems);
+                const item = { ...dcmt };
+                if (item.tid && item.did && !item.isLoaded) {
+                    // Update progress
+                    processedCount++;
+                    setExpansionWaitPanelValue(processedCount);
+                    setExpansionWaitPanelText(`Caricamento ${processedCount} di ${itemsToLoad}...`);
+                    // Nella modalità originale (invertMasterNavigation=false), 
+                    // i documenti detail non devono caricare i master come figli
+                    if (isForMaster && !invertMasterNavigation) {
+                        // Carica i detail dei detail (navigazione naturale detail→detail)
+                        const loadedItems = await getDetailDcmtsAsync(item.tid, item.did, 1);
+                        item.items = updateHiddenProperty(loadedItems);
+                    }
+                    else {
+                        // Modalità standard o invertita
+                        const loadedItems = isForMaster
+                            ? await getMasterDcmtsAsync(item.tid, item.did, 1)
+                            : await getDetailDcmtsAsync(item.tid, item.did, 1);
+                        item.items = updateHiddenProperty(loadedItems);
+                    }
+                    item.isLoaded = true;
                 }
-                item.isLoaded = true;
+                newItems.push(item);
             }
-            newItems.push(item);
+            return newItems;
+        }
+        catch (error) {
+            console.error('Error loading folder contents:', error);
+            return node.items;
+        }
+        finally {
+            setShowExpansionWaitPanel(false);
+            setExpansionAbortController(undefined);
         }
-        return newItems;
     }, [isForMaster, invertMasterNavigation, getDetailDcmtsAsync, getMasterDcmtsAsync, updateHiddenProperty]);
     /**
      * Default item renderer with metadata display (adapted from TMMasterDetailDcmts.tsx)
@@ -715,6 +744,10 @@ const TMRelationViewer = ({ inputDcmts, isForMaster = false, showCurrentDcmtIndi
     if (mergedTreeData.length === 0) {
         return _jsx("div", { style: { padding: '20px', textAlign: 'center', color: '#666' }, children: "Nessuna relazione disponibile." });
     }
-    return (_jsx(TMTreeView, { dataSource: mergedTreeData, itemRender: finalItemRender, calculateItemsForNode: calculateItemsForNode, onDataChanged: handleDataChanged, focusedItem: focusedItem, onFocusedItemChanged: handleFocusedItemChanged, allowMultipleSelection: allowMultipleSelection, selectedItems: selectedItems, onSelectionChanged: handleSelectedItemsChanged }));
+    return (_jsxs(_Fragment, { children: [_jsx(TMTreeView, { dataSource: mergedTreeData, itemRender: finalItemRender, calculateItemsForNode: calculateItemsForNode, onDataChanged: handleDataChanged, focusedItem: focusedItem, onFocusedItemChanged: handleFocusedItemChanged, allowMultipleSelection: allowMultipleSelection, selectedItems: selectedItems, onSelectionChanged: handleSelectedItemsChanged }), showExpansionWaitPanel && (_jsx(TMWaitPanel, { title: isForMaster ? 'Caricamento documenti master' : 'Caricamento documenti dettaglio', showPrimary: true, textPrimary: expansionWaitPanelText, valuePrimary: expansionWaitPanelValue, maxValuePrimary: expansionWaitPanelMaxValue, isCancelable: true, abortController: expansionAbortController, onAbortClick: (abortController) => {
+                    setTimeout(() => {
+                        abortController?.abort();
+                    }, 100);
+                } }))] }));
 };
 export default TMRelationViewer;

package/lib/components/features/search/TMSavedQuerySelector.js

@@ -3,7 +3,7 @@ import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { SharingModes, SDK_Globals, SDK_Localizator } from '@topconsultnpm/sdk-ts';
 import { LocalizeSharingModes } from '../../../helper/Enum_Localizator';
-import ContextMenu from 'devextreme-react/cjs/context-menu';
+import ContextMenu from 'devextreme-react/context-menu';
 import { SDKUI_Localizator, Globalization, svgToString, IconStar, IconDelete, IconDashboard, IconSavedQuery, IconApply, IconInfo, IconCloseOutline } from '../../../helper';
 import { TMColors } from '../../../utils/theme';
 import ShowAlert from '../../base/TMAlert';
@@ -15,57 +15,57 @@ import { DeviceType, useDeviceType } from '../../base/TMDeviceProvider';
 import { StyledDivHorizontal, StyledOffCanvasPanel } from '../../base/Styled';
 import { useOutsideClick } from '../../../hooks/useOutsideClick';
 import TMShowAllOrMaxItemsButton from '../../base/TMShowAllOrMaxItemsButton';
-const StyledSqdItem = styled.div `
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-    min-width: 0;
-    padding: 10px;
-    position: relative;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-
-   &:hover {
-        cursor: pointer;
-        background: linear-gradient(
-            270deg,
-            rgba(70, 181, 162, 0.15) 16%,
-            rgba(59, 170, 188, 0.15) 34%,
-            rgba(59, 170, 188, 0.15) 34%,
-            rgba(54, 129, 173, 0.15) 54%,
-            rgba(51, 104, 165, 0.15) 72%,
-            rgba(47, 84, 157, 0.15) 88%,
-            rgba(48, 79, 153, 0.15) 100%
-        );
-    }
-
-    .info-icon {
-        opacity: 0;
-        pointer-events: none;
-        transition: opacity 0.2s;
-        ${({ $isMobile }) => $isMobile && `
-            display: none !important;
-        `}
-    }
-
-    &:hover .info-icon {
-        opacity: 1;
-        pointer-events: auto;
-    }
-
-    &::after {
-        content: '';
-        display: block;
-        width: 90%;
-        margin: 0 auto;
-        border-bottom: 1px solid #00A99D;
-        margin-top: 8px;
-    }
-
-    &:last-child {
-        border-bottom: none; // remove border for last item
-        margin-bottom: 0;
-    }
+const StyledSqdItem = styled.div `
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    min-width: 0;
+    padding: 10px;
+    position: relative;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+
+   &:hover {
+        cursor: pointer;
+        background: linear-gradient(
+            270deg,
+            rgba(70, 181, 162, 0.15) 16%,
+            rgba(59, 170, 188, 0.15) 34%,
+            rgba(59, 170, 188, 0.15) 34%,
+            rgba(54, 129, 173, 0.15) 54%,
+            rgba(51, 104, 165, 0.15) 72%,
+            rgba(47, 84, 157, 0.15) 88%,
+            rgba(48, 79, 153, 0.15) 100%
+        );
+    }
+
+    .info-icon {
+        opacity: 0;
+        pointer-events: none;
+        transition: opacity 0.2s;
+        ${({ $isMobile }) => $isMobile && `
+            display: none !important;
+        `}
+    }
+
+    &:hover .info-icon {
+        opacity: 1;
+        pointer-events: auto;
+    }
+
+    &::after {
+        content: '';
+        display: block;
+        width: 90%;
+        margin: 0 auto;
+        border-bottom: 1px solid #00A99D;
+        margin-top: 8px;
+    }
+
+    &:last-child {
+        border-bottom: none; // remove border for last item
+        margin-bottom: 0;
+    }
 `;
 const getSharingModeColor = (sharingMode) => {
     switch (sharingMode) {
@@ -176,7 +176,7 @@ const TMSavedQuerySelector = React.memo(({ items, selectedId, allowShowSearch =
             TMExceptionBoxManager.show({ exception: ex });
         }
     };
-    return (_jsxs("div", { style: { height: height ?? '100%', width: '100%', display: 'flex', flexDirection: 'column', gap: '5px', paddingTop: allowShowSearch ? '5px' : undefined }, children: [allowShowSearch &&
+    return (_jsxs("div", { onContextMenu: (e) => e.preventDefault(), style: { height: height ?? '100%', width: '100%', display: 'flex', flexDirection: 'column', gap: '5px', paddingTop: allowShowSearch ? '5px' : undefined }, children: [allowShowSearch &&
                 _jsx("div", { style: { width: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '10px', paddingBottom: '10px', paddingTop: '10px' }, children: _jsx(TMSearchBar, { marginLeft: '0px', maxWidth: '300px', searchValue: searchText, onSearchValueChanged: (e) => setSearchText(e) }) }), _jsx("div", { style: {
                     display: 'flex',
                     flexDirection: 'column',

package/lib/components/features/search/TMSearch.js

@@ -141,7 +141,7 @@ const TMSearch = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallback, addTask
             console.error("Error refreshing search:", error);
         }
     };
-    const isMobile = deviceType === DeviceType.MOBILE;
+    const isMobile = deviceType === DeviceType.TABLET || deviceType === DeviceType.MOBILE;
     // --- JSX WRAPPERS ---
     const tmTreeSelectorElement = useMemo(() => _jsx(TMTreeSelectorWrapper, { isMobile: isMobile, onSelectedTIDChanged: (tid) => {
             setCurrentTID(tid);
@@ -219,7 +219,7 @@ const TMSearch = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallback, addTask
             toolbarOptions: { icon: _jsx(IconSavedQuery, { fontSize: 24 }), visible: true, orderNumber: 4, isActive: allInitialPanelVisibility['TMSavedQuerySelector'] }
         }
     ], [tmTreeSelectorElement, showSearchResults, tmRecentsManagerElement, tmSearchQueryPanelElement, tmSavedQuerySelectorElement, fromDTD, mruTIDs]);
-    return (_jsxs(_Fragment, { children: [showSearchResults ? _jsx(StyledMultiViewPanel, { "$isVisible": currentSearchView === TMSearchViews.Search, children: _jsx(TMPanelManagerProvider, { panels: initialPanels, initialVisibility: allInitialPanelVisibility, defaultDimensions: initialPanelDimensions, initialDimensions: initialPanelDimensions, initialMobilePanelId: 'TMRecentsManager', children: _jsx(TMPanelManagerContainer, { panels: initialPanels, direction: "horizontal", showToolbar: true }) }) }) : tmSearchQueryPanelElement, showSearchResults && _jsx(TMSearchResult, { isVisible: isVisible && currentSearchView === TMSearchViews.Result, context: SearchResultContext.METADATA_SEARCH, searchResults: searchResult, floatingActionConfig: floatingActionConfig, onRefreshAfterAddDcmtToFavs: onRefreshAfterAddDcmtToFavs, openInOffice: openInOffice, onRefreshSearchAsync: onRefreshSearchAsync, onClose: () => { onlyShowSearchQueryPanel ? setShowSearchResults(false) : setCurrentSearchView(TMSearchViews.Search); }, onFileOpened: onFileOpened, onTaskCreateRequest: onTaskCreateRequest, openWGsCopyMoveForm: openWGsCopyMoveForm, openEditPdf: openEditPdf, openS4TViewer: openS4TViewer, onOpenS4TViewerRequest: onOpenS4TViewerRequest, passToArchiveCallback: passToArchiveCallback, onSelectedTIDChanged: onCurrentTIDChangedCallback, showTodoDcmtForm: showTodoDcmtForm, onReferenceClick: onReferenceClick, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers })] }));
+    return (_jsxs(_Fragment, { children: [showSearchResults ? _jsx(StyledMultiViewPanel, { "$isVisible": currentSearchView === TMSearchViews.Search, children: _jsx(TMPanelManagerProvider, { panels: initialPanels, initialVisibility: allInitialPanelVisibility, defaultDimensions: initialPanelDimensions, initialDimensions: initialPanelDimensions, initialMobilePanelId: 'TMRecentsManager', children: _jsx(TMPanelManagerContainer, { panels: initialPanels, direction: "horizontal", showToolbar: true, minPanelSizePx: !isMobile ? 250 : 150 }) }) }) : tmSearchQueryPanelElement, showSearchResults && _jsx(TMSearchResult, { isVisible: isVisible && currentSearchView === TMSearchViews.Result, context: SearchResultContext.METADATA_SEARCH, searchResults: searchResult, floatingActionConfig: floatingActionConfig, onRefreshAfterAddDcmtToFavs: onRefreshAfterAddDcmtToFavs, openInOffice: openInOffice, onRefreshSearchAsync: onRefreshSearchAsync, onClose: () => { onlyShowSearchQueryPanel ? setShowSearchResults(false) : setCurrentSearchView(TMSearchViews.Search); }, onFileOpened: onFileOpened, onTaskCreateRequest: onTaskCreateRequest, openWGsCopyMoveForm: openWGsCopyMoveForm, openEditPdf: openEditPdf, openS4TViewer: openS4TViewer, onOpenS4TViewerRequest: onOpenS4TViewerRequest, passToArchiveCallback: passToArchiveCallback, onSelectedTIDChanged: onCurrentTIDChangedCallback, showTodoDcmtForm: showTodoDcmtForm, onReferenceClick: onReferenceClick, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers })] }));
 };
 export default TMSearch;
 const TMTreeSelectorWrapper = ({ isMobile, onSelectedTIDChanged }) => {

package/lib/components/features/search/TMSearchQueryEditor.js

@@ -15,19 +15,19 @@ import { colorOperator, StyledItemWrapper, StyledRowItem } from '../../query/TMQ
 import { TMMidViewer } from '../../viewers/TMMidViewer';
 import { AdvancedMenuButtons } from '../../editors/TMMetadataValues';
 import { useResizeObserver } from '../../../hooks/useResizeObserver';
-const StyledMetadataListItem = styled.div `
-    padding: 5px;
-    border-radius: 8px;
-    height: max-content;
-    width: 100%;
-    /* box-shadow: 1px 1px 7px rgba(0,0,0,0.15); */
-    /* font-size: ${(props) => props.$isSelected ? '1.2rem' : '1rem'}; */
-    background: ${(props) => props.$isSelected ? props.$selectedColor : props.$backgroundColor};
-
-    &:hover {
-        background: ${(props) => props.$isSelected ? props.$selectedColor : props.$hoverColor};
-        cursor: pointer;
-    }
+const StyledMetadataListItem = styled.div `
+    padding: 5px;
+    border-radius: 8px;
+    height: max-content;
+    width: 100%;
+    /* box-shadow: 1px 1px 7px rgba(0,0,0,0.15); */
+    /* font-size: ${(props) => props.$isSelected ? '1.2rem' : '1rem'}; */
+    background: ${(props) => props.$isSelected ? props.$selectedColor : props.$backgroundColor};
+
+    &:hover {
+        background: ${(props) => props.$isSelected ? props.$selectedColor : props.$hoverColor};
+        cursor: pointer;
+    }
 `;
 const TMSearchQueryEditor = ({ qd, dcmtTypesList = [], isExpertMode = SDKUI_Globals.userSettings.advancedSettings.expertMode === 1, showAllMdWhere, onQdChanged, onFocusedMetadataChanged, onAdvancedMenuClick }) => {
     const [dynDataListsToBeRefreshed, setDynDataListsToBeRefreshed] = useState([]);
@@ -161,7 +161,7 @@ const TMSearchWhereItemEditor = React.memo(({ whereItem, queryParamsDynDataList,
         }
         onValueChanged?.(newValues);
     };
-    return (_jsxs(StyledRowItem, { style: { marginBottom: 0 }, children: [showValue1 && _jsx(TMMetadataEditor, { openChooserBySingleClick: openChooserBySingleClick, isSelected: isSelected, tid: whereItem.tid, mid: whereItem.mid, layoutMode: LayoutModes.None, isEditable: isEditableList, value: whereItem.value1, queryOperator: whereItem.operator, queryParamsDynDataList: queryParamsDynDataList, autoFocus: autoFocus ?? false, containerElement: undefined, onValueChanged: (value) => { normalizeValue(value, true); }, onCascadeRefreshDynDataLists: onCascadeRefreshDynDataLists, onCascadeUpdateMIDs: onCascadeUpdateMIDs }), showValue2 && _jsx(TMMetadataEditor, { openChooserBySingleClick: openChooserBySingleClick, isSelected: isSelected, tid: whereItem.tid, mid: whereItem.mid, layoutMode: LayoutModes.None, isEditable: isEditableList, value: whereItem.value2, queryOperator: whereItem.operator, autoFocus: autoFocus ?? false, containerElement: undefined, onValueChanged: (value) => { normalizeValue(value, false); } })] }));
+    return (_jsxs(StyledRowItem, { style: { marginBottom: 0, width: '100%' }, children: [showValue1 && _jsx(TMMetadataEditor, { openChooserBySingleClick: openChooserBySingleClick, isSelected: isSelected, tid: whereItem.tid, mid: whereItem.mid, layoutMode: LayoutModes.None, isEditable: isEditableList, value: whereItem.value1, queryOperator: whereItem.operator, queryParamsDynDataList: queryParamsDynDataList, autoFocus: autoFocus ?? false, containerElement: undefined, onValueChanged: (value) => { normalizeValue(value, true); }, onCascadeRefreshDynDataLists: onCascadeRefreshDynDataLists, onCascadeUpdateMIDs: onCascadeUpdateMIDs }), showValue2 && _jsx(TMMetadataEditor, { openChooserBySingleClick: openChooserBySingleClick, isSelected: isSelected, tid: whereItem.tid, mid: whereItem.mid, layoutMode: LayoutModes.None, isEditable: isEditableList, value: whereItem.value2, queryOperator: whereItem.operator, autoFocus: autoFocus ?? false, containerElement: undefined, onValueChanged: (value) => { normalizeValue(value, false); } })] }));
 });
 const TMSearchWhereItemCard = React.memo(({ index, whereItem, isSelected, queryParamsDynDataList, showEditor, showCompleteMetadataName, showId, isEditableList, onWhereItemChange, onHideEditor, onCascadeRefreshDynDataLists, onCascadeUpdateMIDs }) => {
     const [isOpen, setIsOpen] = useState(false);