@topconsultnpm/sdkui-react-beta 6.13.18 → 6.13.20

package/lib/components/base/TMFileManager.js

@@ -4,7 +4,7 @@ import Toolbar, { Item as ToolbarItem } from 'devextreme-react/cjs/toolbar';
 import TreeView from 'devextreme-react/cjs/tree-view';
 import ScrollView from 'devextreme-react/cjs/scroll-view';
 import { ContextMenu, Pagination } from 'devextreme-react';
-import { IconFolder, SDKUI_Localizator, IconHide, IconShow, IconDashboard, IconList, getFileIcon, formatBytes, Globalization } from '../../helper';
+import { IconFolder, SDKUI_Localizator, IconHide, IconShow, IconDashboard, IconList, getFileIcon, formatBytes, Globalization, IconMenuVertical } from '../../helper';
 import { TMSearchBar } from '../sidebar/TMHeader';
 import TMButton from './TMButton';
 import TMDataGrid from './TMDataGrid';
@@ -13,6 +13,7 @@ import { DeviceType, useDeviceType } from './TMDeviceProvider';
 import TMToolbarCard from './TMToolbarCard';
 import TMFileManagerThumbnailItems from './TMFileManagerThumbnailItems';
 import TMTooltip from './TMTooltip';
+import TMPanel from './TMPanel';
 export var TMFileManagerPageSize;
 (function (TMFileManagerPageSize) {
     TMFileManagerPageSize[TMFileManagerPageSize["Small"] = 30] = "Small";
@@ -21,7 +22,7 @@ export var TMFileManagerPageSize;
 })(TMFileManagerPageSize || (TMFileManagerPageSize = {}));
 const TMFileManager = (props) => {
     // Destructure the treeFs prop to get the root file system
-    const { treeFs, selectedFolder, selectedFiles, focusedFile, userID, handleSelectedFiles, handleFocusedFile, handleFocusedFolder, handleSelectedFolder, viewMode: initialViewMode, onDoubleClickHandler, handleDropFileCallback, dcmtsFound, folderContextMenuItems, fileContextMenuItems } = props;
+    const { treeFs, selectedFolder, selectedFiles, focusedFile, userID, handleSelectedFiles, handleFocusedFile, handleFocusedFolder, handleSelectedFolder, viewMode: initialViewMode, onDoubleClickHandler, handleDropFileCallback, dcmtsFound, folderContextMenuItems, fileContextMenuItems, showPanel = false, onClosePanel, onMaximizePanel } = props;
     // State to manage the current view mode ('thumbnails' or 'details')
     const [viewMode, setViewMode] = useState(initialViewMode ?? 'thumbnails');
     // State to store the search text entered by the user
@@ -36,8 +37,6 @@ const TMFileManager = (props) => {
     const [droppedFiles, setDroppedFiles] = useState([]);
     // State to track whether a file drag operation is in progress
     const [isDragging, setIsDragging] = useState(false);
-    /* // State to store context menu items for file manager actions
-    const [menuItems, setMenuItems] = useState<{folder: Array<TMFileManagerContextMenuItem>; file: Array<TMFileManagerContextMenuItem>;}>({folder: [], file: []}); */
     // State to store the anchor element for the tree view context menu.
     const [treeViewAnchor, setTreeViewAnchor] = useState(null);
     // State to store the anchor element for another view-related menu
@@ -210,7 +209,14 @@ const TMFileManager = (props) => {
         }
     };
     // Main render of the file manager component with a split layout
-    return _jsxs("div", { style: { height: "100%", width: "100%" }, children: [!isMobile && _jsx("div", { style: { flexDirection: "column", height: "100%", width: "100%", }, children: _jsx("div", { style: { display: "flex", flexGrow: 1, height: "100%" }, children: _jsxs(TMSplitterLayout, { direction: 'horizontal', showSeparator: true, separatorColor: 'transparent', separatorActiveColor: 'transparent', min: ['0', '0'], start: [isLeftPanelCollapsed ? '0%' : "50%", isLeftPanelCollapsed ? '100%' : "50%"], children: [_jsxs("div", { style: { height: "100%", width: "100%" }, onContextMenu: onTreeViewContextMenu, children: [_jsx(TreeView, { style: { marginTop: "10px" }, dataSource: treeViewData, displayExpr: "text", itemRender: renderTreeViewItem, onItemClick: handleTreeViewItemClick, onItemContextMenu: handleTreeViewContextMenu }), treeViewAnchor && _jsx(ContextMenu, { id: 'treeViewContextMenuDesktop', dataSource: folderContextMenuItems, target: treeViewAnchor, onHiding: closeTreeViewContextMenu })] }), _jsxs("div", { style: { backgroundColor: "#fff", width: "100%", height: "100%" }, children: [_jsxs(Toolbar, { style: { backgroundColor: '#f4f4f4', height: "40px", paddingLeft: "5px", paddingRight: '5px' }, children: [_jsx(ToolbarItem, { location: "before", children: _jsx(TMButton, { caption: isLeftPanelCollapsed ? SDKUI_Localizator.ShowLeftPanel : SDKUI_Localizator.HideLeftPanel, btnStyle: 'toolbar', color: 'primaryOutline', icon: isLeftPanelCollapsed ? _jsx(IconHide, {}) : _jsx(IconShow, {}), onClick: () => setIsLeftPanelCollapsed(prev => !prev) }) }), _jsx(ToolbarItem, { location: "before", children: _jsx(TMButton, { caption: viewMode === 'details' ? SDKUI_Localizator.PreviewView : SDKUI_Localizator.DetailsView, btnStyle: 'toolbar', color: 'primaryOutline', icon: viewMode === 'details' ? _jsx(IconDashboard, {}) : _jsx(IconList, {}), onClick: toggleViewMode }) }), _jsx(ToolbarItem, { location: "before", children: _jsx(TMSearchBar, { marginLeft: '0px', maxWidth: '160px', searchValue: searchText, onSearchValueChanged: (e) => handleSearchChange(e) }) })] }), _jsxs("div", { onDrop: handleDrop, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onContextMenu: onContextMenu, style: { width: "100%", height: "calc(100% - 40px)", border: isDragging ? '2px solid red' : '2px solid transparent' }, children: [viewMode === 'thumbnails' && _jsx(ThumbnailsView, { userID: userID, items: filteredFileItems, focusedFile: focusedFile, selectedFiles: selectedFiles, searchText: searchText, handleSelectedFiles: handleSelectedFiles, handleFocusedFile: handleFocusedFile, onDoubleClickHandler: onDoubleClickHandler, setViewAnchor: setViewAnchor }), viewMode === 'details' && _jsx(DetailsView, { userID: userID, items: filteredFileItems, selectedFiles: selectedFiles, searchText: searchText, focusedFile: focusedFile, handleSelectedFiles: handleSelectedFiles, handleFocusedFile: handleFocusedFile, onDoubleClickHandler: onDoubleClickHandler, fileContextMenuItems: fileContextMenuItems }), viewAnchor && _jsx(ContextMenu, { id: 'fileContextMenuDesktop', dataSource: fileContextMenuItems, target: viewAnchor, onHiding: closeViewContextMenu })] })] })] }, "TMWGs-panels-treeView") }) }), isMobile && _jsx("div", { style: { height: "100%", width: "100%" }, children: _jsxs(TMToolbarCard, { onBack: openDraftList ? onBackCallback : undefined, title: SDKUI_Localizator.Drafts, totalItems: dcmtsFound ?? 0, children: [_jsxs("div", { style: { display: openDraftList ? 'none' : 'block', transition: 'opacity 0.3s ease-in-out' }, children: [_jsx(TreeView, { style: { marginTop: "10px", }, dataSource: treeViewData, displayExpr: "text", itemRender: renderTreeViewItem, onItemClick: handleTreeViewItemClick }), treeViewAnchor && _jsx(ContextMenu, { id: 'treeViewContextMenuMobile', dataSource: folderContextMenuItems, target: treeViewAnchor, onHiding: closeTreeViewContextMenu })] }), _jsxs("div", { style: { backgroundColor: "#fff", width: "100%", height: "100%", display: openDraftList ? 'block' : 'none', transition: 'opacity 0.3s ease-in-out' }, children: [_jsxs(Toolbar, { style: { backgroundColor: '#f4f4f4', height: "40px", paddingLeft: "5px", paddingRight: '5px' }, children: [_jsx(ToolbarItem, { location: "before", children: _jsx(TMButton, { caption: viewMode === 'details' ? SDKUI_Localizator.PreviewView : SDKUI_Localizator.DetailsView, btnStyle: 'toolbar', color: 'primaryOutline', icon: viewMode === 'details' ? _jsx(IconDashboard, {}) : _jsx(IconList, {}), onClick: toggleViewMode }) }), _jsx(ToolbarItem, { location: "before", children: _jsx(TMSearchBar, { marginLeft: '0px', maxWidth: '160px', searchValue: searchText, onSearchValueChanged: (e) => handleSearchChange(e) }) })] }), _jsxs("div", { onDrop: handleDrop, onDragOver: handleDragOver, onDragLeave: handleDragLeave, style: { width: "100%", height: "calc(100% - 40px)", border: isDragging ? '2px solid red' : '2px solid transparent' }, children: [viewMode === 'thumbnails' && _jsx(ThumbnailsView, { userID: userID, items: filteredFileItems, focusedFile: focusedFile, selectedFiles: selectedFiles, searchText: searchText, handleSelectedFiles: handleSelectedFiles, handleFocusedFile: handleFocusedFile, onDoubleClickHandler: onDoubleClickHandler, setViewAnchor: setViewAnchor }), viewMode === 'details' && _jsx(DetailsView, { items: filteredFileItems, selectedFiles: selectedFiles, searchText: searchText, focusedFile: focusedFile, handleSelectedFiles: handleSelectedFiles, handleFocusedFile: handleFocusedFile, onDoubleClickHandler: onDoubleClickHandler }), viewAnchor && _jsx(ContextMenu, { id: 'fileViewContextMenuMobile', dataSource: fileContextMenuItems, target: viewAnchor, onHiding: closeViewContextMenu })] })] })] }) })] });
+    return _jsxs("div", { style: { height: "100%", width: "100%" }, children: [!isMobile &&
+                _jsx(TMPanel, { title: SDKUI_Localizator.Drafts, totalItems: dcmtsFound ?? 0, showHeader: showPanel, onClose: onClosePanel, onMaximize: onMaximizePanel, toolbar: _jsxs(_Fragment, { children: [_jsx(IconMenuVertical, { id: "TMPanel-Draft-Commands-Header", color: 'white', cursor: 'pointer' }), _jsx(ContextMenu, { showEvent: 'click', dataSource: [
+                                    {
+                                        icon: isLeftPanelCollapsed ? "eyeclose" : "eyeopen",
+                                        onClick: () => setIsLeftPanelCollapsed(prev => !prev),
+                                        text: isLeftPanelCollapsed ? SDKUI_Localizator.ShowLeftPanel : SDKUI_Localizator.HideLeftPanel,
+                                    },
+                                ], target: '#TMPanel-Draft-Commands-Header' })] }), children: _jsx("div", { style: { flexDirection: "column", height: "100%", width: "100%", }, children: _jsx("div", { style: { display: "flex", flexGrow: 1, height: "100%" }, children: _jsxs(TMSplitterLayout, { direction: 'horizontal', showSeparator: true, separatorColor: 'transparent', separatorActiveColor: 'transparent', min: ['0', '0'], start: [isLeftPanelCollapsed ? '0%' : "50%", isLeftPanelCollapsed ? '100%' : "50%"], children: [_jsxs("div", { style: { height: "100%", width: "100%" }, onContextMenu: onTreeViewContextMenu, children: [_jsx(TreeView, { style: { marginTop: "10px" }, dataSource: treeViewData, displayExpr: "text", itemRender: renderTreeViewItem, onItemClick: handleTreeViewItemClick, onItemContextMenu: handleTreeViewContextMenu }), treeViewAnchor && _jsx(ContextMenu, { id: 'treeViewContextMenuDesktop', dataSource: folderContextMenuItems, target: treeViewAnchor, onHiding: closeTreeViewContextMenu })] }), _jsxs("div", { style: { backgroundColor: "#fff", width: "100%", height: "100%" }, children: [_jsxs(Toolbar, { style: { backgroundColor: '#f4f4f4', height: "40px", paddingLeft: "5px", paddingRight: '5px' }, children: [!showPanel && _jsx(ToolbarItem, { location: "before", children: _jsx(TMButton, { caption: isLeftPanelCollapsed ? SDKUI_Localizator.ShowLeftPanel : SDKUI_Localizator.HideLeftPanel, btnStyle: 'toolbar', color: 'primaryOutline', icon: isLeftPanelCollapsed ? _jsx(IconHide, {}) : _jsx(IconShow, {}), onClick: () => setIsLeftPanelCollapsed(prev => !prev) }) }), _jsx(ToolbarItem, { location: "before", children: _jsx(TMButton, { caption: viewMode === 'details' ? SDKUI_Localizator.PreviewView : SDKUI_Localizator.DetailsView, btnStyle: 'toolbar', color: 'primaryOutline', icon: viewMode === 'details' ? _jsx(IconDashboard, {}) : _jsx(IconList, {}), onClick: toggleViewMode }) }), _jsx(ToolbarItem, { location: "before", children: _jsx(TMSearchBar, { marginLeft: '0px', maxWidth: '160px', searchValue: searchText, onSearchValueChanged: (e) => handleSearchChange(e) }) })] }), _jsxs("div", { onDrop: handleDrop, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onContextMenu: onContextMenu, style: { width: "100%", height: "calc(100% - 40px)", border: isDragging ? '2px solid red' : '2px solid transparent' }, children: [viewMode === 'thumbnails' && _jsx(ThumbnailsView, { userID: userID, items: filteredFileItems, focusedFile: focusedFile, selectedFiles: selectedFiles, searchText: searchText, handleSelectedFiles: handleSelectedFiles, handleFocusedFile: handleFocusedFile, onDoubleClickHandler: onDoubleClickHandler, setViewAnchor: setViewAnchor }), viewMode === 'details' && _jsx(DetailsView, { userID: userID, items: filteredFileItems, selectedFiles: selectedFiles, searchText: searchText, focusedFile: focusedFile, handleSelectedFiles: handleSelectedFiles, handleFocusedFile: handleFocusedFile, onDoubleClickHandler: onDoubleClickHandler, fileContextMenuItems: fileContextMenuItems }), viewAnchor && _jsx(ContextMenu, { id: 'fileContextMenuDesktop', dataSource: fileContextMenuItems, target: viewAnchor, onHiding: closeViewContextMenu })] })] })] }, "TMWGs-panels-treeView") }) }) }), isMobile && _jsx("div", { style: { height: "100%", width: "100%" }, children: _jsxs(TMToolbarCard, { onBack: openDraftList ? onBackCallback : undefined, title: SDKUI_Localizator.Drafts, totalItems: dcmtsFound ?? 0, children: [_jsxs("div", { style: { display: openDraftList ? 'none' : 'block', transition: 'opacity 0.3s ease-in-out' }, children: [_jsx(TreeView, { style: { marginTop: "10px", }, dataSource: treeViewData, displayExpr: "text", itemRender: renderTreeViewItem, onItemClick: handleTreeViewItemClick }), treeViewAnchor && _jsx(ContextMenu, { id: 'treeViewContextMenuMobile', dataSource: folderContextMenuItems, target: treeViewAnchor, onHiding: closeTreeViewContextMenu })] }), _jsxs("div", { style: { backgroundColor: "#fff", width: "100%", height: "100%", display: openDraftList ? 'block' : 'none', transition: 'opacity 0.3s ease-in-out' }, children: [_jsxs(Toolbar, { style: { backgroundColor: '#f4f4f4', height: "40px", paddingLeft: "5px", paddingRight: '5px' }, children: [_jsx(ToolbarItem, { location: "before", children: _jsx(TMButton, { caption: viewMode === 'details' ? SDKUI_Localizator.PreviewView : SDKUI_Localizator.DetailsView, btnStyle: 'toolbar', color: 'primaryOutline', icon: viewMode === 'details' ? _jsx(IconDashboard, {}) : _jsx(IconList, {}), onClick: toggleViewMode }) }), _jsx(ToolbarItem, { location: "before", children: _jsx(TMSearchBar, { marginLeft: '0px', maxWidth: '160px', searchValue: searchText, onSearchValueChanged: (e) => handleSearchChange(e) }) })] }), _jsxs("div", { onDrop: handleDrop, onDragOver: handleDragOver, onDragLeave: handleDragLeave, style: { width: "100%", height: "calc(100% - 40px)", border: isDragging ? '2px solid red' : '2px solid transparent' }, children: [viewMode === 'thumbnails' && _jsx(ThumbnailsView, { userID: userID, items: filteredFileItems, focusedFile: focusedFile, selectedFiles: selectedFiles, searchText: searchText, handleSelectedFiles: handleSelectedFiles, handleFocusedFile: handleFocusedFile, onDoubleClickHandler: onDoubleClickHandler, setViewAnchor: setViewAnchor }), viewMode === 'details' && _jsx(DetailsView, { items: filteredFileItems, selectedFiles: selectedFiles, searchText: searchText, focusedFile: focusedFile, handleSelectedFiles: handleSelectedFiles, handleFocusedFile: handleFocusedFile, onDoubleClickHandler: onDoubleClickHandler }), viewAnchor && _jsx(ContextMenu, { id: 'fileViewContextMenuMobile', dataSource: fileContextMenuItems, target: viewAnchor, onHiding: closeViewContextMenu })] })] })] }) })] });
 };
 export default TMFileManager;
 const highlightText = (text, searchText, isSelected) => {

package/lib/components/base/TMPanel.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
-import { ITMRightSidebarProps } from './TMRightSidebar';
-export interface ITMPanelProps extends ITMRightSidebarProps {
+export interface ITMPanelProps {
     allowMaximize?: boolean;
     color?: string;
     backgroundColor?: string;
@@ -12,6 +11,7 @@ export interface ITMPanelProps extends ITMRightSidebarProps {
     totalItems?: number;
     toolbar?: any;
     padding?: string;
+    keepActiveState?: boolean;
     onBack?: () => void;
     onClose?: () => void;
     onHeaderDoubleClick?: () => void;

package/lib/components/base/TMPanel.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useLayoutEffect, useRef, useState } from 'react';
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
-import TMRightSidebar from './TMRightSidebar';
 import { IconArrowLeft, IconClearButton, IconWindowMaximize, IconWindowMinimize, isPositiveNumber, SDKUI_Localizator } from '../../helper';
 import TMButton from './TMButton';
 const StyledPanelContainer = styled.div `
@@ -63,17 +62,24 @@ const StyledPanelContent = styled.div `
         outline: none;
     }
 `;
-const StyledInnerPanelDiv = styled.div `
-    outline: none;
-    &:focus {
-        outline: none;
-    }
-`;
-const TMPanel = ({ allowMaximize = true, items = [], onItemClick, selectedItem, showPanel, color, backgroundColor, backgroundColorContainer, children, showHeader = true, title, totalItems, displayedItemsCount, toolbar, padding = '5px', onBack, onClose, onHeaderDoubleClick, onMaximize }) => {
+const TMPanel = ({ allowMaximize = true, color, backgroundColor, backgroundColorContainer, children, showHeader = true, title, totalItems, displayedItemsCount, toolbar, padding = '5px', keepActiveState = false, onBack, onClose, onHeaderDoubleClick, onMaximize }) => {
     const [isActive, setIsActive] = useState(false);
     const [isMaximized, setIsMaximized] = useState(false);
     const [minWidth, setMinWidth] = useState(undefined);
     const titleRowRef = useRef(null);
+    // If keepActiveState is true, always force isActive to true
+    useEffect(() => {
+        if (keepActiveState)
+            setIsActive(true);
+    }, [keepActiveState]);
+    const handleFocus = () => {
+        if (!keepActiveState)
+            setIsActive(true);
+    };
+    const handleBlur = () => {
+        if (!keepActiveState)
+            setIsActive(false);
+    };
     useLayoutEffect(() => {
         if (titleRowRef.current) {
             setMinWidth(titleRowRef.current.offsetWidth);
@@ -91,7 +97,7 @@ const TMPanel = ({ allowMaximize = true, items = [], onItemClick, selectedItem,
     };
     return (_jsxs(StyledPanelContainer, { "$isMaximized": onMaximize ? false : isMaximized, style: minWidth ? { minWidth } : undefined, children: [showHeader &&
                 _jsx(StyledPanelHeader, { "$backgroundColor": backgroundColor, "$color": color, "$isActive": isActive, onDoubleClick: () => { if (onHeaderDoubleClick)
-                        onHeaderDoubleClick(); }, tabIndex: -1, onFocus: () => setIsActive(true), onBlur: () => setIsActive(false), onClick: () => setIsActive(true), children: _jsxs("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', width: '100%' }, children: [_jsxs("div", { ref: titleRowRef, style: { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: '8px' }, children: [onBack &&
+                        onHeaderDoubleClick(); }, tabIndex: -1, onFocus: handleFocus, onBlur: handleBlur, onClick: handleFocus, children: _jsxs("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', width: '100%' }, children: [_jsxs("div", { ref: titleRowRef, style: { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: '8px' }, children: [onBack &&
                                         _jsx(TMButton, { btnStyle: 'icon', icon: _jsx(IconArrowLeft, {}), caption: SDKUI_Localizator.Back, onClick: onBack }), _jsx("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center' }, children: _jsxs("p", { style: {
                                                 whiteSpace: 'nowrap',
                                                 overflow: 'hidden',
@@ -103,7 +109,6 @@ const TMPanel = ({ allowMaximize = true, items = [], onItemClick, selectedItem,
                                                         ? ` (${totalItems})`
                                                         : ''] }) })] }), _jsxs("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: '5px' }, children: [toolbar, allowMaximize && _jsx(TMButton, { color: 'primaryOutline', caption: isMaximized ? SDKUI_Localizator.Minimize : SDKUI_Localizator.Maximize, icon: isMaximized
                                             ? _jsx(IconWindowMinimize, { fontSize: 16 })
-                                            : _jsx(IconWindowMaximize, { fontSize: 16 }), btnStyle: 'icon', onClick: handleMaximize }), onClose && _jsx(TMButton, { color: 'primaryOutline', caption: SDKUI_Localizator.Close, icon: _jsx(IconClearButton, {}), btnStyle: 'icon', onClick: () => { setIsMaximized(false); onClose?.(); } })] })] }) }), _jsxs(StyledPanelContent, { "$height": showHeader ? "calc(100% - 40px)" : "100%", "$padding": padding, "$backgroundColor": backgroundColorContainer ?? `#FFFFFF`, tabIndex: -1, onFocus: () => setIsActive(true), onBlur: () => setIsActive(false), onClick: () => setIsActive(true), children: [_jsx(StyledInnerPanelDiv, { style: { width: items.length > 0 ? 'calc(100% - 30px)' : '100%' }, tabIndex: -1, onFocus: () => setIsActive(true), onBlur: () => setIsActive(false), onClick: () => setIsActive(true), children: children }), items.length > 0 &&
-                        _jsx(TMRightSidebar, { items: items, onItemClick: onItemClick, selectedItem: selectedItem, showPanel: showPanel })] })] }));
+                                            : _jsx(IconWindowMaximize, { fontSize: 16 }), btnStyle: 'icon', onClick: handleMaximize }), onClose && _jsx(TMButton, { color: 'primaryOutline', caption: SDKUI_Localizator.Close, icon: _jsx(IconClearButton, {}), btnStyle: 'icon', onClick: () => { setIsMaximized(false); onClose?.(); } })] })] }) }), _jsx(StyledPanelContent, { "$height": showHeader ? "calc(100% - 40px)" : "100%", "$padding": padding, "$backgroundColor": backgroundColorContainer ?? `#FFFFFF`, tabIndex: -1, onFocus: handleFocus, onBlur: handleBlur, onClick: handleFocus, children: children })] }));
 };
 export default TMPanel;

package/lib/components/base/TMPanelManagerMatrix.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect, useMemo, useState } from 'react';
-import { SDKUI_Globals, SDKUI_Localizator, IconWindowMinimize, IconWindowMaximize, IconInfo } from '../../helper';
-import TMButton from './TMButton';
+import { SDKUI_Globals, SDKUI_Localizator, IconInfo } from '../../helper';
 import { useDeviceType, DeviceType } from './TMDeviceProvider';
 import TMPanel from './TMPanel';
 import { calculatePanelSizes, DesktopToolbar, getDynamicColumnWidth, getInitialMobilePanelID, MobileToolbar } from './TMPanelManagerMatrixUtils';
@@ -15,7 +14,29 @@ const TMPanelManagerMatrix = (props) => {
     // State for toolbar items
     const [toolbarState, setToolbarState] = useState(toolbar);
     // State to track which panel IDs are currently hidden
-    const [hiddenPanelIds, setHiddenPanelIds] = useState(new Set());
+    const [hiddenPanelIds, setHiddenPanelIds] = useState(() => {
+        const initialHidden = new Set();
+        if (isMobile) {
+            // Mobile: mostra solo il primo pannello
+            let firstMobilePanelID = initialMobilePanelID ?? getInitialMobilePanelID(panelMatrixMap);
+            panelMatrixMap.forEach(col => {
+                col.rows.forEach(row => {
+                    if (row.id !== firstMobilePanelID)
+                        initialHidden.add(row.id);
+                });
+            });
+        }
+        else {
+            // Desktop: nascondi quelli con hidden true
+            panelMatrixMap.forEach(col => {
+                col.rows.forEach(row => {
+                    if (row.hidden)
+                        initialHidden.add(row.id);
+                });
+            });
+        }
+        return initialHidden;
+    });
     // State to store the current widths of all column, represented as a Map
     const [columnWidths, setColumnWidths] = useState(new Map());
     // State to store the current heights of all panels, represented as a Map
@@ -131,7 +152,7 @@ const TMPanelManagerMatrix = (props) => {
                 else {
                     // If the panel is maximized, call maximizeMinimizePanelCallback to minimize it
                     if (maximizedPanelId === toolbarItem.panelManagerMatrixRowId) {
-                        maximizeMinimizePanelCallback(true, toolbarItem.panelManagerMatrixRowId);
+                        toogleMaximizeMinimizePanelCallback(toolbarItem.panelManagerMatrixRowId);
                     }
                     newHidden.add(toolbarItem.panelManagerMatrixRowId);
                 }
@@ -140,20 +161,23 @@ const TMPanelManagerMatrix = (props) => {
             return newHidden;
         });
     };
-    const maximizeMinimizePanelCallback = (isMaximized, id) => {
-        const maximized = isMaximized ? null : id;
-        setMaximizedPanelId(maximized);
+    const toogleMaximizeMinimizePanelCallback = (id) => {
+        setMaximizedPanelId(prevId => (prevId === id ? null : id));
     };
     return (_jsx("div", { style: { width: '100%', height: '100%' }, children: _jsxs("div", { style: {
                 display: isMobile ? 'block' : 'flex',
                 flexDirection: 'row',
                 width: "100%",
-                height: '100%'
+                height: '100%',
+                overflow: 'hidden',
+                position: 'relative',
             }, children: [_jsx("div", { style: {
                         display: 'flex',
                         flexDirection: 'row',
                         width: (toolbarState && toolbarState.items.length > 0) ? `calc(100% - ${isMobile ? "0px" : "60px"})` : '100%',
                         height: `calc(100% - ${isMobile ? "60px" : "0px"})`,
+                        overflow: 'hidden',
+                        // transition: 'width 0.3s',
                     }, children: visibleColumns.length > 0 ? visibleColumns.map((column, colIndex) => {
                         // Retrieve the column data from the panelMatrixMap using the current column key
                         const col = panelMatrixMap.get(column);
@@ -165,7 +189,7 @@ const TMPanelManagerMatrix = (props) => {
                             display: 'flex',
                             flexDirection: 'column',
                             height: '100%',
-                            transition: isMobile ? 'none' : 'width 0.3s',
+                            // transition: isMobile ? 'none' : 'width 0.3s', 
                             paddingRight: (!maximizedPanelId && !isLastColumn) ? `${gutters}px` : '0px'
                         };
                         // Declare a variable to hold the final computed style for the column
@@ -187,7 +211,7 @@ const TMPanelManagerMatrix = (props) => {
                                     const baseStyle = {
                                         borderRadius: '8px',
                                         display: 'block',
-                                        transition: isMobile ? 'none' : 'all 0.3s ease',
+                                        // transition: isMobile ? 'none' : 'all 0.3s ease',
                                         paddingBottom: (isHiddenPanel || isLastVisible || isMaximized) ? '0px' : `${gutters}px`,
                                     };
                                     const hiddenStyle = {
@@ -212,8 +236,8 @@ const TMPanelManagerMatrix = (props) => {
                                         opacity: isHiddenPanel ? 0 : 1,
                                     };
                                     const panelStyle = maximizedPanelId ? (isMaximized ? { ...baseStyle, ...maximizedStyle } : hiddenStyle) : { ...baseStyle, ...defaultStyle };
-                                    return _jsx("div", { style: panelStyle, children: row.panel ? _jsx(TMPanel, { title: row.panel.title, totalItems: row.panel.totalItems ?? undefined, displayedItemsCount: row.panel.displayedItemsCount ?? undefined, onHeaderDoubleClick: () => maximizeMinimizePanelCallback(isMaximized, row.id), onClose: (!isMobile && toolbarState) ? () => togglePanelVisibility(toolbarState.items.find(item => item.panelManagerMatrixRowId === row.id)) : undefined, allowMaximize: false, toolbar: _jsx("div", { style: { width: '100%', display: 'flex', alignItems: 'center', gap: '10px' }, children: ((row.panel?.showCustomMaximizeMinimizeButton ?? true) && !isMobile && totalVisiblePanels > 1) && _jsx(TMButton, { caption: isMaximized ? SDKUI_Localizator.Minimize : SDKUI_Localizator.Maximize, icon: isMaximized ? _jsx(IconWindowMinimize, {}) : _jsx(IconWindowMaximize, {}), btnStyle: 'icon', onClick: () => maximizeMinimizePanelCallback(isMaximized, row.id) }) }), children: _jsx("div", { style: { width: '100%', height: '100%' }, children: typeof row.content === "function" ? row.content(togglePanelVisibility, toggleToolbarItemDisabled, toggleToolbarItemVisibility) : row.content }) })
-                                            : _jsx("div", { style: { width: '100%', height: '100%' }, children: typeof row.content === "function" ? row.content(togglePanelVisibility, toggleToolbarItemDisabled, toggleToolbarItemVisibility) : row.content }) }, "TMPanelManagerMatrix-r-" + row.id);
+                                    return _jsx("div", { style: panelStyle, children: row.panel ? _jsx(TMPanel, { title: row.panel.title, totalItems: row.panel.totalItems ?? undefined, displayedItemsCount: row.panel.displayedItemsCount ?? undefined, onClose: (!isMobile && toolbarState) ? () => togglePanelVisibility(toolbarState.items.find(item => item.panelManagerMatrixRowId === row.id)) : undefined, onMaximize: () => toogleMaximizeMinimizePanelCallback(row.id), onHeaderDoubleClick: () => toogleMaximizeMinimizePanelCallback(row.id), allowMaximize: !isMobile, children: _jsx("div", { style: { width: '100%', height: '100%' }, children: typeof row.content === "function" ? row.content(togglePanelVisibility, toogleMaximizeMinimizePanelCallback, toggleToolbarItemDisabled, toggleToolbarItemVisibility) : row.content }) })
+                                            : _jsx("div", { style: { width: '100%', height: '100%' }, children: typeof row.content === "function" ? row.content(togglePanelVisibility, toogleMaximizeMinimizePanelCallback, toggleToolbarItemDisabled, toggleToolbarItemVisibility) : row.content }) }, "TMPanelManagerMatrix-r-" + row.id);
                                 }) }) }, "TMPanelManagerMatrix-c-" + column));
                     }) : _jsxs("div", { style: {
                             width: '100%',

package/lib/components/base/TMPanelManagerMatrixUtils.d.ts

@@ -25,7 +25,7 @@ export interface ExtendedTMPanelProps extends ITMPanelProps {
 export interface TMPanelManagerMatrixRow {
     id: string;
     hidden: boolean;
-    content: JSX.Element | ((togglePanelVisibility: (toolbarItem: TMPanelManagerToolbarItem | undefined) => void, toggleToolbarItemDisabled: (toolbarItem: TMPanelManagerToolbarItem | undefined) => void, toggleToolbarItemVisibility: (toolbarItem: TMPanelManagerToolbarItem | undefined) => void) => JSX.Element);
+    content: JSX.Element | ((togglePanelVisibility: (toolbarItem: TMPanelManagerToolbarItem | undefined) => void, toogleMaximizeMinimizePanelCallback: (id: string) => void, toggleToolbarItemDisabled: (toolbarItem: TMPanelManagerToolbarItem | undefined) => void, toggleToolbarItemVisibility: (toolbarItem: TMPanelManagerToolbarItem | undefined) => void) => JSX.Element);
     height?: string;
     width?: string;
     panel?: ExtendedTMPanelProps;

package/lib/components/features/archive/TMArchive.js

@@ -10,6 +10,7 @@ import TMDcmtForm from '../documents/TMDcmtForm';
 import { StyledToppyTextContainer, StyledToppyText } from '../search/TMSearchQueryPanel';
 import TMTreeSelector from '../search/TMTreeSelector';
 import TMPanel from '../../base/TMPanel';
+import TMToolbarCard from '../../base/TMToolbarCard';
 const TMArchive = ({ inputTID }) => {
     const TIDs = SDKUI_Globals.userSettings.archivingSettings.mruTIDs;
     const [currentTID, setCurrentTID] = useState(0);
@@ -52,6 +53,6 @@ const TMArchive = ({ inputTID }) => {
                                     } }) }) }) : _jsx(_Fragment, {}), _jsx(TMLayoutItem, { children: currentTID ?
                                 _jsx(TMDcmtForm, { TID: currentTID, DID: undefined, layoutMode: LayoutModes.Ark, customRightSidebarItems: customSidebarItems, showPreview: deviceType !== DeviceType.MOBILE, onClose: deviceType === DeviceType.MOBILE ? () => setCurrentTID(undefined) : undefined, onSaveRecents: (TIDs) => setMruTIDs(TIDs) })
                                 :
-                                    _jsx(TMPanel, { items: customSidebarItems, title: 'Archiviazione', children: _jsxs(TMLayoutContainer, { gap: 30, alignItems: 'center', justifyContent: 'center', children: [_jsxs(TMLayoutItem, { width: 'max-content', height: 'max-content', children: [" ", _jsxs(StyledToppyTextContainer, { children: [" ", _jsxs(StyledToppyText, { children: [" ", 'Selezionare un tipo documento', " "] }), " "] }), " "] }), _jsxs(TMLayoutItem, { width: 'max-content', height: 'max-content', children: [" ", _jsx("img", { src: Logo, width: 120, alt: '' }), " "] })] }) }) })] }) })] }));
+                                    _jsx(TMToolbarCard, { items: customSidebarItems, title: 'Archiviazione', children: _jsxs(TMLayoutContainer, { gap: 30, alignItems: 'center', justifyContent: 'center', children: [_jsxs(TMLayoutItem, { width: 'max-content', height: 'max-content', children: [" ", _jsxs(StyledToppyTextContainer, { children: [" ", _jsxs(StyledToppyText, { children: [" ", 'Selezionare un tipo documento', " "] }), " "] }), " "] }), _jsxs(TMLayoutItem, { width: 'max-content', height: 'max-content', children: [" ", _jsx("img", { src: Logo, width: 120, alt: '' }), " "] })] }) }) })] }) })] }));
 };
 export default TMArchive;

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

@@ -16,20 +16,20 @@ const StyledSqdItem = styled.div `
     flex-direction: column;
     align-items: stretch;
     min-width: 0;
-    padding: 10px 10px 0px 10px;
+    padding: 10px;
     position: relative;
     white-space: nowrap;
     text-overflow: ellipsis;
+    border-bottom: 1px solid #00A99D; // separator line
 
     &:hover {
         cursor: pointer;
     }
-`;
-const StyledPipe = styled.div `
-    width: 90%;
-    height: 1px;
-    background: #00A99D;
-    margin: 4px auto;
+
+    &:last-child {
+        border-bottom: none; // remove border for last item
+        margin-bottom: 0;
+    }
 `;
 const getSharingModeColor = (sharingMode) => {
     switch (sharingMode) {
@@ -157,7 +157,7 @@ const TMSavedQuerySelector = React.memo(({ items, selectedId, allowShowSearch =
                                     justifyContent: 'center',
                                     fontSize: '1rem',
                                     fontWeight: 'bold'
-                                }, children: _jsx(IconApply, { fontSize: 24, color: 'green' }) }), _jsx(StyledPipe, {}), _jsx(SavedQueryContexMenu, { sqd: sqd, manageDefault: manageDefault, setDefaultAsync: () => setDefaultSQDAsync(sqd), deleteAsync: () => deleteSQDAsync(sqd), favManageAsync: () => favManageSQDAsync(sqd) })] }, sqd.id))) }), dataSource.length > initialSQDsMaxItems && searchText.length <= 0 &&
+                                }, children: _jsx(IconApply, { fontSize: 24, color: 'green' }) }), _jsx(SavedQueryContexMenu, { sqd: sqd, manageDefault: manageDefault, setDefaultAsync: () => setDefaultSQDAsync(sqd), deleteAsync: () => deleteSQDAsync(sqd), favManageAsync: () => favManageSQDAsync(sqd) })] }, sqd.id))) }), dataSource.length > initialSQDsMaxItems && searchText.length <= 0 &&
                 _jsx(TMButton, { elementStyle: { display: 'flex', justifyContent: 'flex-end', padding: '10px' }, btnStyle: 'icon', caption: showAllRoot ? "Mostra meno" : `Mostra tutte le ricerche (+${dataSource.length - initialSQDsMaxItems})`, icon: showAllRoot ?
                         _jsx("div", { style: { backgroundColor: TMColors.primaryColor, minWidth: '30px', minHeight: '30px', borderRadius: '10px', display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: _jsx("p", { style: { color: 'white' }, children: `-${dataSource.length - initialSQDsMaxItems}` }) }) :
                         _jsx("div", { style: { backgroundColor: TMColors.primaryColor, minWidth: '30px', minHeight: '30px', borderRadius: '10px', display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: _jsx("p", { style: { color: 'white' }, children: `+${dataSource.length - initialSQDsMaxItems}` }) }), onClick: () => setShowAllRoot(!showAllRoot) })] }));

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

@@ -166,7 +166,6 @@ const TMSearch = ({ inputTID, inputSqdID, isExpertMode = SDKUI_Globals.userSetti
                 icon: _jsx(IconSavedQuery, {}),
                 tooltipName: 'savedQuery',
                 panelManagerMatrixRowId: 'savedQuery',
-                // alternativePanelManagerMatrixRowId: ['distinctValues']
             }
         ]
     };

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

@@ -1,14 +1,11 @@
 import React from 'react';
 import { DcmtTypeDescriptor, QueryDescriptor, SavedQueryDescriptor, SearchResultDescriptor } from '@topconsultnpm/sdk-ts-beta';
 import { TID_MID } from '../../../ts';
-import { ITMRightSidebarItem } from '../../base/TMRightSidebar';
 interface ITMSearchQueryPanelProps {
     fromDTD?: DcmtTypeDescriptor;
     SQD?: SavedQueryDescriptor;
-    rightSidebarItems?: ITMRightSidebarItem[];
     isExpertMode?: boolean;
     onBack?: () => void;
-    onRightSidebarItemClick?: (item: string) => void;
     onSqdSaved?: (newSqd: SavedQueryDescriptor) => void;
     onFocusedMetadataChanged?: (tid_mid: TID_MID | undefined) => void;
     onSearchCompleted?: (searchResult: SearchResultDescriptor[], qd: QueryDescriptor | undefined) => void;

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

@@ -22,7 +22,7 @@ import { TMMetadataChooserForm } from '../../choosers/TMMetadataChooser';
 import TMQueryEditor from '../../query/TMQueryEditor';
 import TMSavedQueryForm from './TMSavedQueryForm';
 import { AdvancedMenuButtons } from '../../editors/TMMetadataValues';
-const TMSearchQueryPanel = ({ fromDTD, rightSidebarItems, isExpertMode = SDKUI_Globals.userSettings.advancedSettings.expertMode === 1, SQD, onRightSidebarItemClick, onSearchCompleted, onFocusedMetadataChanged, onSqdSaved, onBack }) => {
+const TMSearchQueryPanel = ({ fromDTD, isExpertMode = SDKUI_Globals.userSettings.advancedSettings.expertMode === 1, SQD, onSearchCompleted, onFocusedMetadataChanged, onSqdSaved, onBack }) => {
     const [confirmQueryParams, ConfirmQueryParamsDialog] = useQueryParametersDialog();
     const [qd, setQd] = useState();
     const [lastQdParams, setLastQdParams] = useState([]);
@@ -36,6 +36,7 @@ const TMSearchQueryPanel = ({ fromDTD, rightSidebarItems, isExpertMode = SDKUI_G
     const [showOrderByConfig, setShowOrderByConfig] = useState(false);
     const [showDistinctValuesPanel, setShowDistinctValuesPanel] = useState(false);
     const [focusedTidMid, setFocusedTidMid] = useState();
+    const [keepStatePanelIsActive, setKeepStatePanelIsActive] = useState(false);
     const deviceType = useDeviceType();
     let initialMaxItems = deviceType === DeviceType.MOBILE ? 8 : 12;
     useEffect(() => {
@@ -100,7 +101,7 @@ const TMSearchQueryPanel = ({ fromDTD, rightSidebarItems, isExpertMode = SDKUI_G
             }
         }
     };
-    return (_jsxs(_Fragment, { children: [_jsxs(TMPanel, { title: fromDTD?.nameLoc ?? SDKUI_Localizator.Search_Metadata, items: rightSidebarItems, onItemClick: onRightSidebarItemClick, onBack: onBack, toolbar: _jsx(_Fragment, { children: (SQD && !showSqdForm) ?
+    return (_jsxs(_Fragment, { children: [_jsxs(TMPanel, { title: fromDTD?.nameLoc ?? SDKUI_Localizator.Search_Metadata, onBack: onBack, keepActiveState: keepStatePanelIsActive, toolbar: _jsx(_Fragment, { children: (SQD && !showSqdForm) ?
                         _jsx(TMDropDownMenu, { backgroundColor: 'white', borderRadius: '3px', content: _jsx(TMButton, { btnStyle: 'icon', caption: 'Altro', icon: _jsx(IconMenuVertical, { color: 'white' }), showTooltip: false }), items: [
                                 { icon: _jsx(IconAddCircleOutline, {}), text: SDKUI_Localizator.SavedQueryNew, onClick: () => { openSqdForm(FormModes.Create); } },
                                 { icon: _jsx(IconEdit, {}), text: SDKUI_Localizator.SavedQueryUpdate, disabled: (SQD && SQD.id == 1), onClick: () => { openSqdForm(FormModes.Update); } },

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { AccessLevels, AccessLevelsEx, AppModules, FileFormats, LayoutModes, SDK_Globals } from '@topconsultnpm/sdk-ts-beta';
-import { IconActivity, IconArchiveDoc, IconBatchUpdate, IconCheckFile, IconCloseCircle, IconConvertFilePdf, IconDelete, IconDotsVerticalCircleOutline, IconDownload, IconExportTo, IconFileDots, IconHide, IconInfo, IconPreview, IconRelation, IconSearch, IconShow, IconSignature, IconStar, IconSubstFile, IconUndo, SDKUI_Localizator, svgToString } from '../../../helper';
+import { IconActivity, IconArchiveDoc, IconBatchUpdate, IconCheckFile, IconCloseCircle, IconConvertFilePdf, IconDelete, IconDotsVerticalCircleOutline, IconDownload, IconExportTo, IconFileDots, IconHide, IconInfo, IconPlatform, IconPreview, IconRelation, IconSearch, IconShow, IconSignature, IconStar, IconSubstFile, IconUndo, SDKUI_Localizator, svgToString } from '../../../helper';
 import ShowAlert from '../../base/TMAlert';
 import { TMMessageBoxManager, ButtonNames, TMExceptionBoxManager } from '../../base/TMPopUp';
 import TMSpinner from '../../base/TMSpinner';
@@ -25,6 +25,7 @@ export const getSelectedDcmtsOrFocused = (selectedItems, focusedItem, fileFormat
     return [];
 };
 export const getCommandsMenuItems = (dtd, selectedItems, focusedItem, context, showFloatingBar, setShowFloatingBar, openFormHandler, downloadDcmtsAsync, runOperationAsync, onRefreshSearchAsync, onRefreshDataRowsAsync, onRefreshAfterAddDcmtToFavs, confirmFormat, confirmAttachments, openTaskFormHandler, openDetailDcmtsFormHandler, openMasterDcmtsFormHandler, openBatchUpdateFormHandler) => {
+    // let ftExplanations = focusedItem?.FTExplanations;
     return [
         {
             icon: svgToString(_jsx(IconFileDots, {})),
@@ -328,7 +329,17 @@ export const getCommandsMenuItems = (dtd, selectedItems, focusedItem, context, s
                     operationType: 'multiRow',
                     disabled: disabledForMultiRow(selectedItems, focusedItem),
                     onClick: async () => { await runOperationAsync(getSelectedDcmtsOrFocused(selectedItems, focusedItem), DcmtOperationTypes.FreeSearchPurge); }
-                }
+                },
+                ...(focusedItem?.FTExplanations !== undefined
+                    ? [{
+                            icon: svgToString(_jsx(IconPlatform, {})),
+                            text: "Dettagli del risultato",
+                            operationType: 'singleRow',
+                            disabled: disabledForSingleRow(selectedItems, focusedItem),
+                            onClick: () => {
+                                TMMessageBoxManager.show({ buttons: [ButtonNames.OK], message: focusedItem?.FTExplanations, title: "Dettagli del risultato" });
+                            }
+                        }] : []),
             ]
         },
         {

package/lib/components/grids/TMRecentsManager.js

@@ -14,31 +14,31 @@ const StyledRecentTidItem = styled.div `
     flex-direction: column;
     align-items: stretch;
     min-width: 0;
-    padding: 10px 10px 0px 10px;
+    padding: 10px;
     position: relative;
+    border-bottom: 1px solid #00A99D; // separator line
 
     &:hover {
         cursor: pointer;
     }
-`;
-const StyledPipe = styled.div `
-    width: 90%;
-    height: 1px;
-    background: #00A99D;
-    margin: 4px auto;
+
+    &:last-child {
+        border-bottom: none; // remove border for last item
+        margin-bottom: 0;
+    }
 `;
 const iconDelete = () => ReactDOMServer.renderToString(_jsx(IconDelete, {}));
 const TMRecentsManager = ({ deviceType, mruTIDs, currentMruTID, onSelectedTID, onDeletedTID }) => {
     const [showDcmtTypeChooser, setShowDcmtTypeChooser] = useState(false);
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { style: { overflowY: deviceType === DeviceType.MOBILE ? 'auto' : undefined, display: 'flex', flexDirection: 'column', padding: '5px' }, children: [_jsxs(StyledRecentTidItem, { id: `tid-${0}`, onClick: () => { setShowDcmtTypeChooser(true); }, children: [_jsx("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', width: '100%' }, children: _jsx("p", { style: {
-                                        color: TMColors.primaryColor,
-                                        fontSize: '1rem',
-                                        fontWeight: 600,
-                                        whiteSpace: 'nowrap',
-                                        overflow: 'hidden',
-                                        textOverflow: 'ellipsis'
-                                    }, children: `${SDKUI_Localizator.AllDcmtTypes} (${DcmtTypeListCacheService.CacheCount(true)})` }) }), _jsx(StyledPipe, {})] }, 0), mruTIDs.map((tid) => {
-                        return (_jsxs(StyledRecentTidItem, { id: `tid-${tid}`, onClick: () => { onSelectedTID?.(tid); }, children: [_jsx("div", { style: { display: 'flex', justifyContent: 'center', width: '100%' }, children: _jsx(TMTidViewer, { tid: tid, color: TMColors.primaryColor, showIcon: false }) }), _jsx(StyledPipe, {}), _jsx(ContextMenu, { dataSource: [{ text: SDKUI_Localizator.Remove, icon: iconDelete(), }], target: `#tid-${tid}`, onItemClick: () => { onDeletedTID?.(tid); } }), currentMruTID == tid &&
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { style: { overflowY: deviceType === DeviceType.MOBILE ? 'auto' : undefined, display: 'flex', flexDirection: 'column', padding: '5px' }, children: [_jsx(StyledRecentTidItem, { id: `tid-${0}`, onClick: () => { setShowDcmtTypeChooser(true); }, children: _jsx("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', width: '100%' }, children: _jsx("p", { style: {
+                                    color: TMColors.primaryColor,
+                                    fontSize: '1rem',
+                                    fontWeight: 600,
+                                    whiteSpace: 'nowrap',
+                                    overflow: 'hidden',
+                                    textOverflow: 'ellipsis'
+                                }, children: `${SDKUI_Localizator.AllDcmtTypes} (${DcmtTypeListCacheService.CacheCount(true)})` }) }) }, 0), mruTIDs.map((tid) => {
+                        return (_jsxs(StyledRecentTidItem, { id: `tid-${tid}`, onClick: () => { onSelectedTID?.(tid); }, children: [_jsx("div", { style: { display: 'flex', justifyContent: 'center', width: '100%' }, children: _jsx(TMTidViewer, { tid: tid, color: TMColors.primaryColor, showIcon: false }) }), _jsx(ContextMenu, { dataSource: [{ text: SDKUI_Localizator.Remove, icon: iconDelete(), }], target: `#tid-${tid}`, onItemClick: () => { onDeletedTID?.(tid); } }), currentMruTID == tid &&
                                     _jsx("div", { style: {
                                             width: '24px',
                                             height: '24px',

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@topconsultnpm/sdkui-react-beta",
-    "version": "6.13.18",
+    "version": "6.13.20",
     "description": "",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",