@topconsultnpm/sdkui-react-beta 6.14.76 → 6.14.78

package/lib/components/editors/TMMetadataValues.js

@@ -84,7 +84,6 @@ const TMMetadataValues = ({ showCheckBoxes = ShowCheckBoxesMode.Never, checkPerm
             return;
         if (!currentDTD)
             return;
-        console.log('TMMetadataValues: metadataValues', metadataValues);
         //if no dynamic data list has changed we do not call APIs
         if (deepCompare(metadataValues.filter(o => o.md?.dataDomain === MetadataDataDomains.DynamicDataList), prevMetadataValues.filter(o => o.md?.dataDomain === MetadataDataDomains.DynamicDataList)))
             return;

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

@@ -80,7 +80,7 @@ const TMDcmtForm = ({ showHeader = true, onSaveRecents, layoutMode = LayoutModes
             setFetchError(null); // reset errore prima del fetch
             if (!TID)
                 return;
-            if (!DID)
+            if (!DID && layoutMode === LayoutModes.Update)
                 return;
             TMSpinner.show({ description: 'Loading Metadata...' });
             let getMetadataResult;

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

@@ -3,7 +3,7 @@ import { useCallback, useEffect, useState } from 'react';
 import { PlatformObjectValidator, WhereItem, SDK_Localizator, OrderByItem, SelectItem, SelectItemVisibilities, SDK_Globals, SavedQueryCacheService, SearchEngine, QueryOperators } from '@topconsultnpm/sdk-ts-beta';
 import styled from 'styled-components';
 import TMSearchQueryEditor from './TMSearchQueryEditor';
-import Logo from '../../../assets/Toppy-generico.png';
+import Toppy from '../../../assets/Toppy-generico.png';
 import { getDcmtTypesByQdAsync, SDKUI_Localizator, getQD, IconMenuVertical, IconAddCircleOutline, IconEdit, IconEasy, IconAdvanced, deepCompare, IconSearch, IconClear, getDefaultOperator, prepareQdForSearchAsync, IsParametricQuery, SDKUI_Globals, IconArrowRight } from '../../../helper';
 import { useQueryParametersDialog } from '../../../hooks/useQueryParametersDialog';
 import { FormModes } from '../../../ts';
@@ -13,7 +13,7 @@ import ShowAlert from '../../base/TMAlert';
 import TMButton from '../../base/TMButton';
 import { useDeviceType, DeviceType } from '../../base/TMDeviceProvider';
 import TMDropDownMenu from '../../base/TMDropDownMenu';
-import TMLayoutContainer, { TMLayoutItem } from '../../base/TMLayout';
+import TMLayoutContainer from '../../base/TMLayout';
 import { TMExceptionBoxManager } from '../../base/TMPopUp';
 import TMSpinner from '../../base/TMSpinner';
 import TMPanel from '../../base/TMPanel';
@@ -248,7 +248,7 @@ const TMSearchQueryPanel = ({ fromDTD, showBackToResultButton, isExpertMode = SD
                                     _jsx(TMMetadataChooserForm, { allowMultipleSelection: true, height: '500px', width: '600px', allowSysMetadata: true, qd: qd, selectedIDs: qd?.select?.map((item) => ({ tid: item.tid, mid: item.mid })), onClose: handleCloseOutputConfig, onChoose: handleChooseOutput }), showOrderByConfig &&
                                     _jsx(TMMetadataChooserForm, { allowMultipleSelection: true, height: '500px', width: '600px', allowSysMetadata: true, qd: qd, selectedIDs: qd?.orderBy?.map((item) => ({ tid: item.tid, mid: item.mid })), onClose: handleCloseOrderByConfig, onChoose: handleChooseOrderBy })] })
                         :
-                            _jsxs(TMLayoutContainer, { gap: 30, alignItems: 'center', justifyContent: 'center', children: [_jsxs(TMLayoutItem, { width: 'max-content', height: 'max-content', children: [" ", _jsxs(StyledToppyTextContainer, { children: [" ", _jsxs(StyledToppyText, { children: [" ", SDKUI_Localizator.DcmtTypeSelectOrQuickSearch, " "] }), " "] }), " "] }), _jsxs(TMLayoutItem, { width: 'max-content', height: 'max-content', children: [" ", _jsx("img", { src: Logo, width: 120, alt: '' }), " "] })] }), showSqdForm &&
+                            _jsxs(TMLayoutContainer, { gap: 30, alignItems: 'center', justifyContent: 'center', children: [_jsx(StyledToppyTextContainer, { children: _jsx(StyledToppyText, { children: SDKUI_Localizator.DcmtTypeSelectOrQuickSearch }) }), _jsx("img", { src: Toppy, width: 120, alt: '' })] }), showSqdForm &&
                         _jsx(StyledModalContainer, { style: { backgroundColor: `${TMColors.backgroundColorHeader}12` }, children: _jsx(TMSavedQueryForm, { height: '50%', width: '50%', id: formModeSqdForm === FormModes.Create ? -1 : SQD?.id, title: 'Ricerca rapida', formMode: formModeSqdForm, showBackButton: true, qd: qd, isAdvancedSearch: showAdvancedSearch, isModal: false, onClose: () => { setShowSqdForm(false); }, onSaved: onSqdSaved }) })] }), showDistinctValuesPanel &&
                 _jsx(TMDistinctValues, { isModal: true, tid: focusedTidMid?.tid, mid: focusedTidMid?.mid, separator: ',', onClosePanelCallback: () => setShowDistinctValuesPanel(false), onSelectionChanged: (e) => {
                         if (!e)
@@ -328,13 +328,20 @@ export const refreshLastSearch = async (qd) => {
     return searchResults;
 };
 export const StyledToppyTextContainer = styled.div ` 
-    padding: 30px 50px; 
-    max-width: 345px; 
+    padding: 30px 5vw;
+    width: 100%;
+    max-width: 345px;
     border: 1px solid #2559A5; 
     border-radius: 30px; 
     display: flex; 
     align-items: center; 
     justify-content: center; 
+    box-sizing: border-box;
+
+    @media (max-width: 400px) {
+        padding: 20px 10px;
+        max-width: 98vw;
+    }
 `;
 export const StyledToppyText = styled.p ` 
     text-align: center; 

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

@@ -1,27 +1,32 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useState } from 'react';
-import { LayoutModes, SDK_Localizator, TreeCacheService, TreeItemTypes } from '@topconsultnpm/sdk-ts-beta';
+import { DcmtTypeListCacheService, LayoutModes, SDK_Localizator, TreeCacheService, TreeItemTypes } from '@topconsultnpm/sdk-ts-beta';
 import { TreeList, Column, Scrolling, Selection } from 'devextreme-react/tree-list';
 import { DropDownBox } from 'devextreme-react';
-import { IconStarRemove, IconStar, SDKUI_Localizator, SDKUI_Globals, IconFolder } from '../../../helper';
-import { StyledDivHorizontal } from '../../base/Styled';
+import { IconStarRemove, IconStar, SDKUI_Localizator, SDKUI_Globals, IconFolder, IconInfo, IconCloseOutline } from '../../../helper';
+import { StyledDivHorizontal, StyledOffCanvasPanel } from '../../base/Styled';
 import TMButton from '../../base/TMButton';
 import TMDataGrid from '../../base/TMDataGrid';
-import TMLayoutContainer, { TMLayoutItem } from '../../base/TMLayout';
 import TMPanel from '../../base/TMPanel';
-import TMTidViewer from '../../viewers/TMTidViewer';
+import TMTidViewer, { renderDTDTooltipContent, TMDcmtTypeTooltip } from '../../viewers/TMTidViewer';
 import { TMColors } from '../../../utils/theme';
 import styled from 'styled-components';
+import { useOutsideClick } from '../../../hooks/useOutsideClick';
+import { DeviceType, useDeviceType } from '../../base/TMDeviceProvider';
 const TMTreeSelector = ({ layoutMode = LayoutModes.Update, isVisible, onSelectedTIDChanged, onClosePanel, allowMaximize = true, onMaximizePanel }) => {
     const [trees, setTrees] = useState([]);
     const [treeItems, setTreeItems] = useState([]);
     const [selectedTreeId, setSelectedTreeId] = useState(0);
+    const [infoDTD, setInfoDTD] = useState();
     // State to store selected row keys
     const [selectedRowKeys, setSelectedRowKeys] = useState([]);
     // State hook to store the currently focused row key, initially set to undefined
     const [focusedRowKey, setFocusedRowKey] = useState(undefined);
     const [isGridBoxOpened, setIsGridBoxOpened] = useState(false);
     const [defaultTreeId, setDefaultTreeId] = useState(-1);
+    const deviceType = useDeviceType();
+    const isMobile = deviceType === DeviceType.MOBILE;
+    const panelRef = useOutsideClick(() => setInfoDTD(undefined));
     useEffect(() => {
         if (treeItems.length > 0 && treeItems[0].id) {
             setSelectedRowKeys([treeItems[0].id]);
@@ -59,10 +64,56 @@ const TMTreeSelector = ({ layoutMode = LayoutModes.Update, isVisible, onSelected
         setTreeItems(newTreeItems);
     }, [selectedTreeId]);
     const renderCell = (data) => {
-        let treeItem = data.data;
-        if (treeItem.type == TreeItemTypes.DcmtType)
-            return (_jsx(TMTidViewer, { tid: treeItem.tid, color: TMColors.primaryColor, showIcon: false }));
-        return (_jsxs(StyledDivHorizontal, { style: { gap: 5 }, children: [_jsx(IconFolder, { fontSize: 24, color: TMColors.iconLight }), _jsx("p", { style: { color: TMColors.primaryColor }, children: treeItem.nameLoc })] }));
+        const treeItem = data.data;
+        const [showInfo, setShowInfo] = useState(false);
+        // Documento (DcmtType)
+        if (treeItem.type === TreeItemTypes.DcmtType) {
+            return (_jsxs(StyledDivHorizontal, { style: {
+                    alignItems: 'center',
+                    minWidth: 0,
+                    width: '100%',
+                    gap: 6,
+                    position: 'relative'
+                }, onMouseEnter: async () => {
+                    if (!isMobile) {
+                        setShowInfo(true);
+                        let dtd = await DcmtTypeListCacheService.GetAsync(treeItem.tid);
+                        setInfoDTD(dtd);
+                    }
+                }, onMouseLeave: () => {
+                    if (!isMobile) {
+                        setShowInfo(false);
+                        setInfoDTD(undefined);
+                    }
+                }, children: [!isMobile && (_jsx("span", { style: {
+                            opacity: showInfo ? 1 : 0,
+                            transition: 'opacity 0.2s',
+                            pointerEvents: showInfo ? 'auto' : 'none',
+                            cursor: 'pointer',
+                            marginRight: 4,
+                            display: 'flex',
+                            alignItems: 'center',
+                            position: 'relative',
+                            left: 0,
+                            zIndex: 2
+                        }, children: _jsx(TMDcmtTypeTooltip, { dtd: infoDTD, children: _jsx(IconInfo, { color: TMColors.info }) }) })), _jsx("span", { style: { cursor: 'pointer', flex: 1, minWidth: 0 }, children: _jsx(TMTidViewer, { tid: treeItem.tid, color: TMColors.primaryColor, showIcon: false }) })] }));
+        }
+        // Folder (altri tipi)
+        return (_jsxs(StyledDivHorizontal, { style: { gap: 5, alignItems: 'center', minWidth: 0 }, children: [_jsx("span", { style: {
+                        flex: '0 0 auto',
+                        width: 24,
+                        height: 24,
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center'
+                    }, children: _jsx(IconFolder, { fontSize: 24, color: TMColors.iconLight }) }), _jsx("span", { style: {
+                        color: TMColors.primaryColor,
+                        minWidth: 0,
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        whiteSpace: 'nowrap',
+                        flex: 1,
+                    }, children: treeItem.nameLoc })] }));
     };
     // Handles selection change in the data grid
     const onSelectionChanged = useCallback((e) => {
@@ -102,23 +153,89 @@ const TMTreeSelector = ({ layoutMode = LayoutModes.Update, isVisible, onSelected
                 }
             } }), children: trees.length > 0
             ?
-                _jsx("div", { style: { display: 'flex', flexDirection: 'column', height: '100%', width: '100%', padding: '10px 5px' }, children: _jsxs(TMLayoutContainer, { gap: 10, children: [_jsx(TMLayoutItem, { height: '30px', children: _jsx(DropDownBox, { dropDownOptions: {
-                                        resizeEnabled: true,
-                                        minWidth: "100%",
-                                        height: trees.length <= 10 ? 300 : 500,
-                                        maxWidth: "100%"
-                                    }, value: selectedTreeId, opened: isGridBoxOpened, valueExpr: "id", displayExpr: "nameLoc", deferRendering: false, dataSource: trees, onValueChanged: syncDataGridSelection, onOptionChanged: onGridBoxOpened, children: _jsx(TMDataGrid, { height: "100%", width: "100%", dataSource: trees, dataColumns: [
-                                            { dataField: 'nameLoc', caption: SDKUI_Localizator.Name, width: 'auto' },
-                                            { dataField: 'description', caption: SDKUI_Localizator.Description, width: 'auto' },
-                                        ], selection: { mode: 'single', showCheckBoxesMode: "none" }, showHeaderFilter: false, selectedRowKeys: selectedRowKeys, onSelectionChanged: onSelectionChanged, focusedRowKey: focusedRowKey, onFocusedRowChanged: onFocusedRowChanged }) }) }), _jsx(TMLayoutItem, { height: 'calc(100% - 50px)', children: _jsx(StyledTreeListWrapper, { style: { width: "100%", height: "100%" }, children: _jsxs(TreeList, { height: "100%", dataSource: treeItems, showRowLines: false, showColumnLines: false, showBorders: false, columnAutoWidth: false, keyExpr: "id", parentIdExpr: "parentID", dataStructure: "plain", showColumnHeaders: false, onContentReady: (e) => e.component.clearSelection(), onSelectionChanged: (e) => {
-                                            if (e.selectedRowsData[0] && e.selectedRowsData[0].type == TreeItemTypes.DcmtType) {
-                                                onSelectedTIDChanged?.(e.selectedRowsData[0].tid, selectedTreeId);
-                                            }
-                                        }, children: [_jsx(Column, { dataField: "nameLoc", caption: SDKUI_Localizator.Name, cellRender: renderCell, width: "100%" }), _jsx(Scrolling, { mode: "virtual", useNative: Number(SDKUI_Globals.userSettings?.themeSettings.gridSettings.useNativeScrollbar) === 1 }), _jsx(Selection, { mode: "single" })] }) }) })] }) })
+                _jsxs("div", { style: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        height: '100%',
+                        width: '100%',
+                        boxSizing: 'border-box',
+                        minHeight: 0,
+                    }, children: [_jsx("div", { style: { padding: '10px' }, children: _jsx(DropDownBox, { dropDownOptions: {
+                                    resizeEnabled: true,
+                                    minWidth: "100%",
+                                    height: trees.length <= 10 ? 300 : 500,
+                                    maxWidth: "100%"
+                                }, value: selectedTreeId, opened: isGridBoxOpened, valueExpr: "id", displayExpr: "nameLoc", deferRendering: false, dataSource: trees, onValueChanged: syncDataGridSelection, onOptionChanged: onGridBoxOpened, style: { height: 30, padding: '5px' }, children: _jsx(TMDataGrid, { height: "100%", width: "100%", dataSource: trees, dataColumns: [
+                                        { dataField: 'nameLoc', caption: SDKUI_Localizator.Name, width: 'auto' },
+                                        { dataField: 'description', caption: SDKUI_Localizator.Description, width: 'auto' },
+                                    ], selection: { mode: 'single', showCheckBoxesMode: "none" }, showHeaderFilter: false, selectedRowKeys: selectedRowKeys, onSelectionChanged: onSelectionChanged, focusedRowKey: focusedRowKey, onFocusedRowChanged: onFocusedRowChanged }) }) }), _jsxs(StyledTreeListWrapper, { children: [_jsxs(TreeList, { height: "100%", dataSource: treeItems, showRowLines: false, showColumnLines: false, showBorders: false, columnAutoWidth: false, keyExpr: "id", parentIdExpr: "parentID", dataStructure: "plain", showColumnHeaders: false, onContentReady: (e) => e.component.clearSelection(), onSelectionChanged: (e) => {
+                                        if (e.selectedRowsData[0] && e.selectedRowsData[0].type == TreeItemTypes.DcmtType) {
+                                            onSelectedTIDChanged?.(e.selectedRowsData[0].tid, selectedTreeId);
+                                        }
+                                    }, children: [_jsx(Column, { dataField: "nameLoc", caption: SDKUI_Localizator.Name, cellRender: renderCell, width: "100%" }), _jsx(Scrolling, { mode: "virtual", useNative: Number(SDKUI_Globals.userSettings?.themeSettings.gridSettings.useNativeScrollbar) === 1 }), _jsx(Selection, { mode: "single" })] }), _jsxs(StyledOffCanvasPanel, { ref: panelRef, "$isOpen": isMobile && infoDTD !== undefined, children: [_jsxs(StyledDivHorizontal, { style: { gap: 10, padding: '10px 8px', width: '100%', alignItems: 'center' }, children: [_jsx("p", { style: { fontSize: '1.1rem', fontWeight: 'bold' }, children: `${SDKUI_Localizator.DcmtType} - ${SDKUI_Localizator.About}` }), _jsx(IconCloseOutline, { style: { marginLeft: 'auto', cursor: 'pointer' }, onClick: () => setInfoDTD(undefined) })] }), renderDTDTooltipContent(infoDTD)] })] })] })
             : _jsx("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', width: '100%', fontSize: '1.5rem' }, children: SDKUI_Localizator.TreesNoAvailable }) }));
 };
 export default TMTreeSelector;
+const StyledTidItem = styled.div `
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    min-width: 0;
+    /* padding: 10px; */
+    position: relative;
+
+    &:hover {
+        cursor: pointer;
+    }
+
+    .info-icon {
+        position: absolute;
+        left: -7px;
+        top: calc(50% - 5px);
+        transform: translateY(-50%);
+        opacity: 0;
+        transition: opacity 0.2s;
+        pointer-events: none;
+        // On mobile, never show
+        ${({ $isMobile }) => $isMobile && `
+            display: none !important;
+        `}
+    }
+
+    &:hover .info-icon {
+        opacity: 1;
+        pointer-events: auto;
+    }
+`;
 const StyledTreeListWrapper = styled.div `
+    width: 100%;
+    height: 100%;
+    min-height: 0;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+
+    .dx-treelist,
+    .dx-treelist-rowsview,
+    .dx-scrollable,
+    .dx-scrollable-wrapper,
+    .dx-scrollable-container,
+    .dx-scrollable-content {
+        height: 100% !important;
+        min-height: 0 !important;
+        max-height: 100% !important;
+        box-sizing: border-box;
+    }
+
+    .dx-scrollable-scrollbar.dx-scrollbar-vertical {
+        /* Mostra solo quando serve */
+        opacity: 1 !important;
+    }
+
+    .dx-scrollable-scrollbar.dx-scrollbar-horizontal {
+        display: none !important;
+    }
+
 	.dx-treelist-container>.dx-treelist-headers,
 	.dx-treelist-container>.dx-treelist-rowsview {
 		background-color: transparent;
@@ -132,7 +249,7 @@ const StyledTreeListWrapper = styled.div `
 	}
 
 	.dx-row > td {
-		padding: 10px 15px;
+		padding: 10px;
 		font-size: 1rem;
         white-space: nowrap;
 		overflow: hidden;

package/lib/components/grids/TMBlogs.d.ts

@@ -10,8 +10,6 @@ interface TMBlogsProps {
     allData: Array<BlogPost | HomeBlogPost>;
     /** Optional flag to show extended attachments */
     showExtendedAttachments?: boolean;
-    /** Optional view mode for displaying blog posts ('thumbnails' or 'details') */
-    viewMode?: 'thumbnails' | 'details';
     /** Optional flag to automatically scroll to the bottom of the list */
     scrollToBottom?: boolean;
     /** Optional height of the component (CSS value) */

package/lib/components/grids/TMBlogs.js

@@ -3,7 +3,6 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { DcmtTypeListCacheService, LayoutModes, ResultTypes, SDK_Globals, WorkingGroupEngine } from "@topconsultnpm/sdk-ts-beta";
 import { ContextMenu, ScrollView } from 'devextreme-react';
 import { SDKUI_Localizator, IconAttachment, getExceptionMessage, Globalization, IconBoard } from '../../helper';
-import TMDataGrid from '../base/TMDataGrid';
 import { useDeviceType, DeviceType } from '../base/TMDeviceProvider';
 import { TMMessageBoxManager, ButtonNames } from '../base/TMPopUp';
 import TMTooltip from '../base/TMTooltip';
@@ -20,7 +19,7 @@ import TMDcmtForm from '../features/documents/TMDcmtForm';
 import { TMColors } from '../../utils/theme';
 let localAbortController = new AbortController();
 const TMBlogs = (props) => {
-    const { id, allData, showExtendedAttachments = true, treeFs, draftLatestInfoMap, archivedDocumentMap, updateVisualizedBlogCallback, height, width, scrollToBottom = true, viewMode = 'thumbnails', header, showIconHeader = true, color = colors.PRIMARY_BLUE, handleNavigateToWGs, showId, setShowId, contextMenuParams = {
+    const { id, allData, showExtendedAttachments = true, treeFs, draftLatestInfoMap, archivedDocumentMap, updateVisualizedBlogCallback, height, width, scrollToBottom = true, header, showIconHeader = true, color = colors.PRIMARY_BLUE, handleNavigateToWGs, showId, setShowId, contextMenuParams = {
         isShowHideFilterEnabled: true,
         isShowHideIDEnaled: true,
         isCommentEnabled: false,
@@ -37,8 +36,6 @@ const TMBlogs = (props) => {
     const { abortController, showWaitPanel, waitPanelTitle, showPrimary, waitPanelTextPrimary, waitPanelValuePrimary, waitPanelMaxValuePrimary, showSecondary, waitPanelTextSecondary, waitPanelValueSecondary, waitPanelMaxValueSecondary, downloadDcmtsAsync } = useDcmtOperations();
     // This avoids unnecessary re-renders by only recalculating when deviceType changes.
     let isMobile = useMemo(() => { return deviceType === DeviceType.MOBILE; }, [deviceType]);
-    // State to manage the current rendering mode of the component (either 'thumbnails' or 'details')
-    const [renderMode, setRenderMode] = useState('thumbnails');
     // State to store an array of blog posts, which can be either BlogPost or HomeBlogPost type
     const [blogPosts, setBlogPosts] = useState([]);
     // State to manage the data source for a tree component
@@ -414,10 +411,6 @@ const TMBlogs = (props) => {
         if (focusedBlog && focusedBlog.id && filteredBlogs.find(filteredBlog => focusedBlog.id === filteredBlog.id) === undefined)
             handleFocusedBlog(undefined);
     }, [allData, appliedGlobalFilters, searchText, postsToShow, currentHeader]);
-    useEffect(() => {
-        if (viewMode)
-            setRenderMode(viewMode);
-    }, [viewMode]);
     // Scroll the focused blog post into view
     useEffect(() => {
         if (focusedBlog && focusedBlog.id && containerRef.current) {
@@ -441,7 +434,7 @@ const TMBlogs = (props) => {
                     scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
                 }
             }
-        }, [blogPosts, viewMode, focusedBlog]);
+        }, [blogPosts, focusedBlog]);
         const attachmentDetails = (attachments, isSelected) => {
             return _jsx("div", { style: { marginTop: "10px", overflow: "hidden" }, children: attachments.map(attachment => {
                     return AttachmentElement(attachment, treeFs, draftLatestInfoMap, archivedDocumentMap, dcmtTypeDescriptors, isSelected, searchText, color, downloadDcmtsAsync, handleFocusedAttachment, setAnchorEl, contextMenuRef);
@@ -567,100 +560,6 @@ const TMBlogs = (props) => {
                                             }, children: renderBlogPostContent(blogPost, index, isOwnComment) }) }, 'blogPostChat-' + id + "-" + blogPost.id)] }, "blog-post-wrapper-" + id + "-" + blogPost.id));
                     }) }) });
     };
-    const DataGridView = () => {
-        const gridRef = useRef(null);
-        const { abortController, showWaitPanel, waitPanelTitle, showPrimary, waitPanelTextPrimary, waitPanelValuePrimary, waitPanelMaxValuePrimary, showSecondary, waitPanelTextSecondary, waitPanelValueSecondary, waitPanelMaxValueSecondary, downloadDcmtsAsync } = useDcmtOperations();
-        useEffect(() => {
-            if (gridRef.current && renderMode === 'details') {
-                const dataGrid = gridRef.current.instance();
-                dataGrid.repaint(); // Repaint the grid first
-            }
-            if (scrollToBottom && gridRef.current) {
-                const dataGrid = gridRef.current.instance();
-                const scrollable = dataGrid.getScrollable();
-                if (scrollable && scrollable.scrollHeight()) {
-                    // Wait for repaint to finish (if repaint causes a reflow/re-rendering of the grid)
-                    setTimeout(() => {
-                        scrollable.scrollTo({ y: scrollable.scrollHeight() });
-                    }, 0); // Use setTimeout with 0 delay to defer scrolling until after repaint
-                }
-            }
-        }, [renderMode, scrollToBottom]); // Ensure to include scrollToBottom in the dependency array
-        const cellDefaultRender = useCallback((cellData) => {
-            const blogPost = cellData.data;
-            const { isDel, isSys } = blogPost;
-            return _jsx("div", { style: { color: isSys ? colors.RED : colors.BLACK, textDecoration: isDel ? 'line-through' : 'none' }, children: highlightText(cellData.value, searchText, false) });
-        }, [searchText]);
-        const cellOwnerRender = useCallback((cellData) => {
-            const blogPost = cellData.data;
-            const { isDel, isSys } = blogPost;
-            return _jsxs("span", { style: { display: 'inline-flex', alignItems: 'center', }, children: [OwnerInitialsBadge(blogPost), _jsx("span", { style: { color: isSys ? colors.RED : colors.BLACK, textDecoration: isDel ? 'line-through' : 'none', display: 'inline-block' }, children: highlightText(cellData.value, searchText, false) })] });
-        }, [searchText]);
-        const cellDescriptionRender = useCallback((cellData) => {
-            const blogPost = cellData.data;
-            const { isDel, isSys } = blogPost;
-            return _jsx("span", { style: { color: isSys ? colors.RED : colors.BLACK, textDecoration: isDel ? 'line-through' : 'none' }, children: _jsx(TMHtmlContentDisplay, { markup: blogPost.description ?? '-', searchText: searchText, isSelected: false }) });
-        }, [searchText]);
-        const cellClassIdRender = useCallback((cellData) => {
-            const blogPost = cellData.data;
-            let textColor = blogPost.isSys ? colors.RED : colors.BLACK;
-            let iconColor = textColor;
-            const classID = blogPost.classID;
-            if (classID) {
-                if (classID === 'DS')
-                    iconColor = colors.PRIMARY_ORANGE;
-                if (classID === 'WG')
-                    iconColor = colors.PRIMARY_GREEN;
-            }
-            const headerClickCallback = () => {
-                const id = blogPost.id;
-                if (handleNavigateToWGs && id && classID === 'WG')
-                    handleNavigateToWGs(id);
-            };
-            return IconAndHeaderElement(blogPost, iconColor, false, headerClickCallback, searchText);
-        }, []);
-        const cellAttachmentsRender = useCallback((cellData) => {
-            const data = cellData.data;
-            const { attachments } = data;
-            return _jsx("div", { style: { marginTop: "10px", overflow: "hidden" }, children: (attachments && attachments.length > 0) ? attachments.map(attachment => {
-                    return AttachmentElement(attachment, treeFs, draftLatestInfoMap, archivedDocumentMap, dcmtTypeDescriptors, false, searchText, color, downloadDcmtsAsync, handleFocusedAttachment, setAnchorEl, contextMenuRef);
-                }) : '' });
-        }, [treeFs, draftLatestInfoMap, dcmtTypeDescriptors, color, searchText]);
-        const cellDatetimeRender = useCallback((cellData) => {
-            const data = cellData.data;
-            const { value } = cellData;
-            const { isDel, isSys } = data;
-            const formattedDate = value ? new Date(value).toLocaleString('en-GB', { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' }) : '';
-            return _jsx("div", { style: { color: isSys ? colors.RED : colors.BLACK, textDecoration: isDel ? 'line-through' : 'none' }, children: formattedDate });
-        }, []);
-        // Handles focus change in the data grid
-        const onFocusedRowChanged = useCallback((e) => {
-            if (e.row)
-                handleFocusedBlog(e.row.data);
-        }, []);
-        const onContextMenuPreparing = (e) => {
-            if (e === undefined)
-                return;
-            if (e.target === 'content') {
-                e.items = e.items || [];
-                e.items = contextMenuItems;
-            }
-        };
-        const dataColumns = useMemo(() => {
-            return [
-                { dataField: "id", caption: "ID", dataType: 'string', visible: localShowId, cellRender: cellDefaultRender },
-                { dataField: "ownerName", caption: SDKUI_Localizator.Author, dataType: 'string', visible: true, cellRender: cellOwnerRender },
-                { dataField: "classID", caption: SDKUI_Localizator.Type, dataType: 'string', visible: showIconHeader, cellRender: cellClassIdRender },
-                { dataField: "description", caption: SDKUI_Localizator.Description, dataType: 'string', visible: true, cellRender: cellDescriptionRender },
-                { dataField: "creationTime", caption: SDKUI_Localizator.CreationTime, dataType: 'datetime', visible: true, format: 'dd/MM/yyyy HH:mm', cellRender: cellDatetimeRender },
-                { dataField: "attachments", caption: SDKUI_Localizator.RefersTo, dataType: 'string', visible: true, cellRender: cellAttachmentsRender },
-            ];
-        }, [localShowId, showIconHeader, searchText]);
-        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(TMDataGrid, { ref: gridRef, showSearchPanel: false, dataSource: blogPosts ?? [], dataColumns: dataColumns, selection: { mode: 'none' }, focusedRowKey: focusedBlog?.id, onFocusedRowChanged: onFocusedRowChanged, onContextMenuPreparing: onContextMenuPreparing }) });
-    };
-    const toggleViewMode = () => {
-        setRenderMode((prevViewMode) => (prevViewMode === 'details' ? 'thumbnails' : 'details'));
-    };
     // Function to handle changes in the search text
     const handleSearchChange = (value) => {
         handleFocusedBlog(undefined);
@@ -709,7 +608,7 @@ const TMBlogs = (props) => {
                                         minWidth: isMobile ? '90px' : '120px',
                                         width: isMobile ? '90px' : '150px',
                                         height: '29px',
-                                    } }))] }) }) })), _jsxs("div", { style: { height: `calc(100% - ${currentHeader && !isHeaderHidden ? '50px' : '0px'})`, width: "100%", overflow: 'auto', display: 'block' }, onContextMenu: onContextMenu, children: [_jsx("div", { style: { display: renderMode === 'thumbnails' ? 'block' : 'none', width: "100%", height: "100%" }, children: ThumbnailView() }), _jsx("div", { style: { display: renderMode === 'details' ? 'block' : 'none', width: "100%", height: "100%" }, children: DataGridView() }), anchorEl && _jsx(ContextMenu, { ref: contextMenuRef, dataSource: contextMenuItems, target: anchorEl, onHiding: closeContextMenu })] }), (showDcmtForm && focusedAttachment && focusedAttachment.TID && focusedAttachment.DID) && _jsx(TMDcmtForm, { TID: Number(focusedAttachment.TID), DID: Number(focusedAttachment.DID), layoutMode: LayoutModes.Update, onClose: onCloseDcmtForm, isClosable: true, titleModal: SDKUI_Localizator.Attachment + ": " + focusedAttachment.fileName, isModal: true, widthModal: "95%", heightModal: "95%" }), (showFloatingCommentButton && showCommentFormCallback) && _jsx("button", { style: {
+                                    } }))] }) }) })), _jsxs("div", { style: { height: `calc(100% - ${currentHeader && !isHeaderHidden ? '50px' : '0px'})`, width: "100%", overflow: 'auto', display: 'block' }, onContextMenu: onContextMenu, children: [_jsx("div", { style: { width: "100%", height: "100%" }, children: ThumbnailView() }), anchorEl && _jsx(ContextMenu, { ref: contextMenuRef, dataSource: contextMenuItems, target: anchorEl, onHiding: closeContextMenu })] }), (showDcmtForm && focusedAttachment && focusedAttachment.TID && focusedAttachment.DID) && _jsx(TMDcmtForm, { TID: Number(focusedAttachment.TID), DID: Number(focusedAttachment.DID), layoutMode: LayoutModes.Update, onClose: onCloseDcmtForm, isClosable: true, titleModal: SDKUI_Localizator.Attachment + ": " + focusedAttachment.fileName, isModal: true, widthModal: "95%", heightModal: "95%" }), (showFloatingCommentButton && showCommentFormCallback) && _jsx("button", { style: {
                         position: 'absolute',
                         bottom: '20px',
                         right: '20px',
@@ -726,14 +625,17 @@ const TMBlogs = (props) => {
                         display: 'flex',
                         justifyContent: 'center',
                         alignItems: 'center',
+                        opacity: 0.3,
                     }, onMouseEnter: (e) => {
                         e.currentTarget.style.backgroundColor = '#D94A9F';
                         e.currentTarget.style.transform = 'scale(1.1)';
                         e.currentTarget.style.boxShadow = '0 4px 12px rgba(37, 89, 165, 0.6)';
+                        e.currentTarget.style.opacity = '1';
                     }, onMouseLeave: (e) => {
                         e.currentTarget.style.backgroundColor = "#C2388B";
                         e.currentTarget.style.transform = 'scale(1)';
                         e.currentTarget.style.boxShadow = '0 2px 6px rgba(0,0,0,0.2)';
+                        e.currentTarget.style.opacity = '0.3';
                     }, onClick: () => { showCommentFormCallback(); }, children: _jsx(TMTooltip, { content: SDKUI_Localizator.AddNewComment, children: _jsx("i", { className: "dx-icon-chat", style: { fontSize: !isMobile ? '30px' : '25px' } }) }) })] }) });
 };
 export default TMBlogs;

package/lib/components/grids/TMRecentsManager.js

@@ -18,26 +18,26 @@ const StyledRecentTidItem = styled.div `
     min-width: 0;
     padding: 10px;
     position: relative;
-    /* border-bottom: 1px solid #00A99D; // separator line */
+    gap: 0;
 
     &:hover {
         cursor: pointer;
     }
 
     .info-icon {
-        position: absolute;
-        left: -7px;
-        top: calc(50% - 5px);
-        transform: translateY(-50%);
         opacity: 0;
-        transition: opacity 0.2s;
         pointer-events: none;
-        // On mobile, never show
+        transition: opacity 0.2s;
         ${({ $isMobile }) => $isMobile && `
             display: none !important;
         `}
     }
 
+    &:hover .info-icon {
+        opacity: 1;
+        pointer-events: auto;
+    }
+
     &::after {
         content: '';
         display: block;
@@ -47,13 +47,8 @@ const StyledRecentTidItem = styled.div `
         margin-top: 8px;
     }
 
-    &:hover .info-icon {
-        opacity: 1;
-        pointer-events: auto;
-    }
-
     &:last-child {
-        border-bottom: none; // remove border for last item
+        border-bottom: none;
         margin-bottom: 0;
     }
 `;
@@ -82,7 +77,28 @@ const TMRecentsManager = ({ deviceType, mruTIDs, currentMruTID, onSelectedTID, o
                                     overflow: 'hidden',
                                     textOverflow: 'ellipsis'
                                 }, children: `${SDKUI_Localizator.AllDcmtTypes} (${DcmtTypeListCacheService.CacheCount(true)})` }) }) }, 0), recentDcmtTypes.map((dtd) => {
-                        return (_jsxs(StyledRecentTidItem, { id: `tid-${dtd.id}`, "$isMobile": isMobile, onClick: () => { onSelectedTID?.(dtd.id ?? 0); }, children: [_jsx("span", { className: "info-icon", children: _jsx(TMDcmtTypeTooltip, { dtd: dtd, children: _jsx(IconInfo, { color: TMColors.info }) }) }), _jsx("div", { style: { display: 'flex', justifyContent: 'center', width: '100%' }, children: _jsx(TMTidViewer, { tid: dtd.id, color: TMColors.primaryColor, showIcon: false }) }), _jsx(ContextMenu, { dataSource: [
+                        const isCurrent = currentMruTID == dtd.id;
+                        return (_jsxs(StyledRecentTidItem, { id: `tid-${dtd.id}`, "$isMobile": isMobile, onClick: () => { onSelectedTID?.(dtd.id ?? 0); }, children: [_jsxs(StyledDivHorizontal, { style: { alignItems: 'center', gap: 8, width: '100%' }, children: [!isMobile && (_jsx("span", { className: "info-icon", style: {
+                                                marginRight: 4,
+                                                display: 'flex',
+                                                alignItems: 'center'
+                                            }, children: _jsx(TMDcmtTypeTooltip, { dtd: dtd, children: _jsx(IconInfo, { color: TMColors.info }) }) })), _jsx("div", { style: {
+                                                flex: 1,
+                                                display: 'flex',
+                                                alignItems: 'center',
+                                                justifyContent: 'center',
+                                                minWidth: 0
+                                            }, children: _jsx(TMTidViewer, { tid: dtd.id, color: TMColors.primaryColor, showIcon: false }) }), isCurrent && (_jsx("span", { style: {
+                                                width: 24,
+                                                height: 24,
+                                                borderRadius: 24,
+                                                display: 'flex',
+                                                alignItems: 'center',
+                                                justifyContent: 'center',
+                                                fontSize: '1rem',
+                                                fontWeight: 'bold',
+                                                marginLeft: 8
+                                            }, children: _jsx(IconApply, { fontSize: 24, color: 'green' }) }))] }), _jsx(ContextMenu, { dataSource: [
                                         {
                                             text: SDKUI_Localizator.Remove,
                                             icon: iconDelete(),
@@ -95,20 +111,7 @@ const TMRecentsManager = ({ deviceType, mruTIDs, currentMruTID, onSelectedTID, o
                                                 onClick: () => { setInfoDTD(dtd); }
                                             }
                                         ] : [])
-                                    ], target: `#tid-${dtd.id}` }), currentMruTID == dtd.id &&
-                                    _jsx("div", { style: {
-                                            width: '24px',
-                                            height: '24px',
-                                            borderRadius: '24px',
-                                            position: 'absolute',
-                                            top: '5px',
-                                            right: '0px',
-                                            display: 'flex',
-                                            alignItems: 'center',
-                                            justifyContent: 'center',
-                                            fontSize: '1rem',
-                                            fontWeight: 'bold'
-                                        }, children: _jsx(IconApply, { fontSize: 24, color: 'green' }) })] }, dtd.id));
+                                    ], target: `#tid-${dtd.id}` })] }, dtd.id));
                     })] }), showDcmtTypeChooser && _jsx(TMDcmtTypeChooserForm, { onClose: () => setShowDcmtTypeChooser(false), onChoose: (tids) => { onSelectedTID?.(tids?.[0] ?? 0); } }), _jsxs(StyledOffCanvasPanel, { ref: panelRef, "$isOpen": isMobile && infoDTD !== undefined, children: [_jsxs(StyledDivHorizontal, { style: { gap: 10, padding: '10px 8px', width: '100%', alignItems: 'center' }, children: [_jsx("p", { style: { fontSize: '1.1rem', fontWeight: 'bold' }, children: `${SDKUI_Localizator.DcmtType} - ${SDKUI_Localizator.About}` }), _jsx(IconCloseOutline, { style: { marginLeft: 'auto', cursor: 'pointer' }, onClick: () => setInfoDTD(undefined) })] }), renderDTDTooltipContent(infoDTD)] })] }));
 };
 export default TMRecentsManager;

package/package.json

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