@topconsultnpm/sdkui-react 6.22.0-dev2.44 → 6.22.0-dev2.46

package/lib/components/base/TMDataGrid.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import styled, { css } from 'styled-components';
+import styled, { createGlobalStyle, css } from 'styled-components';
 import DataGrid, { Column, HeaderFilter, Selection, Scrolling, LoadPanel, SearchPanel, Pager, Sorting, Paging, FilterPanel, ColumnChooser, Grouping, GroupPanel, Summary, Editing, FilterRow, StateStoring, RowDragging, MasterDetail, Position, ColumnChooserSearch, ColumnChooserSelection } from 'devextreme-react/data-grid';
 import DataSource from 'devextreme/data/data_source';
 import { IconAll, IconSelected, IconVisible, SDKUI_Globals, SDKUI_Localizator } from '../../helper';
@@ -382,7 +382,7 @@ const TMDataGrid = React.forwardRef((props, ref) => {
             return pager;
         return { ...pager, displayMode: pager.displayMode ?? 'compact' };
     }, [pager, compactPager]);
-    return _jsxs(StyledDataGridContainer, { "$compactPager": compactPager, style: { width: "100%", height: "100%" }, children: [_jsx("div", { ref: gridContainerRef, style: { width: "100%", height: counterConfig.show ? "calc(100% - 25px)" : "100%" }, children: _jsxs(DataGrid, { ref: internalRef, id: id, className: `tm-datagrid ${hasFilters ? 'has-filters' : ''}`, 
+    return _jsxs(StyledDataGridContainer, { "$compactPager": compactPager, style: { width: "100%", height: "100%" }, children: [_jsx(HeaderFilterMenuGlobalStyle, {}), _jsx("div", { ref: gridContainerRef, style: { width: "100%", height: counterConfig.show ? "calc(100% - 25px)" : "100%" }, children: _jsxs(DataGrid, { ref: internalRef, id: id, className: `tm-datagrid ${hasFilters ? 'has-filters' : ''}`, 
                     // main properties
                     keyExpr: keyExpr, dataSource: dataSource, selectedRowKeys: selectedRowKeys, focusedRowEnabled: focusedRowEnabled, hoverStateEnabled: hoverStateEnabled, 
                     // events and callbacks
@@ -451,6 +451,185 @@ const StyledDataGridContainer = styled.div `
         }
     `}
 `;
+// Stile del pannello del filtro d'intestazione (ricerca, elenco valori, OK/Annulla).
+// Il popup è in portale sul body, fuori da StyledDataGridContainer: le regole sono globali
+// ma tutte sotto .dx-header-filter-menu, classe che DevExtreme applica solo a questo popup.
+const HeaderFilterMenuGlobalStyle = createGlobalStyle `
+    .dx-header-filter-menu {
+
+        &.dx-popup-wrapper > .dx-overlay-content.dx-popup-normal {
+            border: 1px solid #E4E8EE;
+            border-radius: 8px;
+            box-shadow: 0 2px 6px rgba(18, 44, 76, .08), 0 12px 28px rgba(18, 44, 76, .14);
+            overflow: hidden;
+        }
+
+        &.dx-popup-wrapper .dx-popup-content {
+            padding: 10px 10px 4px;
+        }
+
+        /* Campo di ricerca: TextBox mode "search" resa da List o da TreeView (filtri gerarchici) */
+        .dx-searchbox.dx-list-search,
+        .dx-searchbox.dx-treeview-search {
+            margin-bottom: 8px;
+            border-radius: 6px;
+            border: 1px solid #CDD2D8;
+            background-color: #F4F6F9;
+            box-shadow: none;
+            transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
+
+            /* fluent disegna qui la barretta di focus, sostituita da bordo + alone */
+            &::before,
+            &::after {
+                display: none;
+            }
+
+            &.dx-state-hover:not(.dx-state-focused) {
+                border-color: #AEB6C1;
+                background-color: #EEF2F7;
+            }
+
+            &.dx-state-focused {
+                border-color: #2559A5;
+                background-color: #FFFFFF;
+                box-shadow: 0 0 0 2px rgba(37, 89, 165, .16);
+            }
+
+            .dx-icon-search {
+                width: 28px;
+                color: #8A929B;
+                transition: color .15s ease;
+            }
+
+            &.dx-state-focused .dx-icon-search {
+                color: #2559A5;
+            }
+
+            .dx-texteditor-input {
+                min-height: 28px;
+                padding-inline-start: 28px;
+                padding-inline-end: 8px;
+                font-size: 12px;
+                background-color: transparent;
+            }
+
+            .dx-placeholder {
+                color: #9AA3AD;
+                font-size: 12px;
+
+                &::before {
+                    padding-inline-start: 28px;
+                    padding-inline-end: 8px;
+                }
+            }
+
+            .dx-clear-button-area .dx-icon-clear {
+                color: #8A929B;
+                transition: color .15s ease;
+            }
+
+            .dx-clear-button-area:hover .dx-icon-clear {
+                color: #2559A5;
+            }
+        }
+
+        .dx-list-item {
+            border-radius: 4px;
+            transition: background-color .12s ease;
+        }
+
+        .dx-list-item-content {
+            padding: 4px 6px;
+        }
+
+        .dx-list-item.dx-state-hover,
+        .dx-list-item.dx-state-focused {
+            background-color: #F1F6FD;
+            color: #122C4C;
+        }
+
+        .dx-list-select-all {
+            padding: 2px 0 6px;
+            margin-bottom: 4px;
+            border-bottom: 1px solid #ECEFF3;
+        }
+
+        .dx-list-select-all-label {
+            font-weight: 600;
+            color: #122C4C;
+        }
+
+        .dx-checkbox-checked .dx-checkbox-icon,
+        .dx-checkbox-indeterminate .dx-checkbox-icon {
+            border-color: #2559A5;
+            background-color: #2559A5;
+        }
+
+        .dx-checkbox.dx-state-hover:not(.dx-checkbox-checked) .dx-checkbox-icon {
+            border-color: #2559A5;
+        }
+
+        /* il :not() lascia intatto il fade-out nativo della scrollbar */
+        .dx-scrollable-scroll:not(.dx-state-invisible) .dx-scrollable-scroll-content {
+            background-color: rgba(18, 44, 76, .28);
+            border-radius: 3px;
+        }
+
+        &.dx-popup-wrapper .dx-popup-bottom.dx-toolbar {
+            padding: 8px 10px 10px;
+            border-top: 1px solid #ECEFF3;
+        }
+
+        .dx-popup-bottom .dx-button {
+            border-radius: 5px;
+            min-width: 76px;
+            margin: 0;
+        }
+
+        .dx-popup-bottom .dx-toolbar-button + .dx-toolbar-button {
+            margin-inline-start: 6px;
+
+            .dx-button {
+                margin: 0;
+            }
+        }
+
+        /* DevExtreme aggiunge prima OK e poi Annulla: individuarli per posizione li rende indipendenti dalla lingua */
+        .dx-popup-bottom .dx-toolbar-after > .dx-toolbar-button:first-child .dx-button {
+            border-color: transparent;
+            background-color: #2559A5;
+
+            .dx-button-text {
+                color: #FFFFFF;
+            }
+
+            &.dx-state-hover {
+                background-color: #1E4A8C;
+            }
+
+            &.dx-state-active {
+                background-color: #1A3F78;
+            }
+        }
+
+        .dx-popup-bottom .dx-toolbar-after > .dx-toolbar-button + .dx-toolbar-button .dx-button {
+            border-color: transparent;
+            background-color: transparent;
+
+            .dx-button-text {
+                color: #44506B;
+            }
+
+            &.dx-state-hover {
+                background-color: #F0F3F7;
+            }
+
+            &.dx-state-active {
+                background-color: #E6EBF2;
+            }
+        }
+    }
+`;
 const getRecordCount = (dataSource) => {
     if (Array.isArray(dataSource)) {
         return dataSource.length; // For array

package/lib/components/base/TMTooltip.js

@@ -7,9 +7,8 @@ import { DeviceType, useDeviceType } from './TMDeviceProvider';
 const HIDE_DELAY_MS = 400;
 const TMTooltip = ({ children, position, content, hideAfterDelay, parentStyle, childStyle, allowContentInteraction = false }) => {
     const [showTooltip, setShowTooltip] = useState(false);
-    const [id, setID] = useState('');
+    const [id] = useState(() => genUniqueId());
     const hideTimerRef = useRef();
-    useEffect(() => { setID(genUniqueId()); }, [children]);
     useEffect(() => {
         const hide = () => setShowTooltip(false);
         window.addEventListener('click', hide);

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

@@ -13,6 +13,15 @@ import { TMColors } from '../../../utils/theme';
 import styled from 'styled-components';
 import { useOutsideClick } from '../../../hooks/useOutsideClick';
 import { DeviceType, useDeviceType } from '../../base/TMDeviceProvider';
+const TMTreeDcmtTypeCell = ({ tid, isMobile }) => {
+    const [dtd, setDtd] = useState();
+    const loadDTD = useCallback(async () => {
+        if (isMobile || dtd || !tid)
+            return;
+        setDtd(await DcmtTypeListCacheService.GetAsync(tid));
+    }, [isMobile, dtd, tid]);
+    return (_jsxs(StyledTreeDcmtTypeRow, { onMouseEnter: loadDTD, children: [_jsx("span", { style: { cursor: 'pointer', flex: 1, minWidth: 0 }, children: _jsx(TMTidViewer, { tid: tid, showIcon: false }) }), !isMobile && (_jsx("span", { className: 'info-icon', children: _jsx(TMDcmtTypeTooltip, { dtd: dtd, children: _jsx(IconInfo, { color: TMColors.info }) }) }))] }));
+};
 const TMTreeSelector = ({ layoutMode = LayoutModes.Update, isVisible, onSelectedTIDChanged, onClosePanel, allowMaximize = true, onMaximizePanel }) => {
     const [trees, setTrees] = useState([]);
     const [treeItems, setTreeItems] = useState([]);
@@ -66,36 +75,9 @@ const TMTreeSelector = ({ layoutMode = LayoutModes.Update, isVisible, onSelected
     }, [selectedTreeId, trees]);
     const renderCell = useCallback((data) => {
         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: 2,
-                    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: [_jsx("span", { style: { cursor: 'pointer', flex: 1, minWidth: 0 }, children: _jsx(TMTidViewer, { tid: treeItem.tid, showIcon: false }) }), !isMobile && (_jsx("span", { style: {
-                            opacity: showInfo ? 1 : 0,
-                            transition: 'opacity 0.2s',
-                            pointerEvents: showInfo ? 'auto' : 'none',
-                            cursor: 'pointer',
-                            display: 'flex',
-                            alignItems: 'center',
-                            marginLeft: 'auto',
-                            zIndex: 2
-                        }, children: _jsx(TMDcmtTypeTooltip, { dtd: infoDTD, children: _jsx(IconInfo, { color: TMColors.info }) }) }))] }));
+            return _jsx(TMTreeDcmtTypeCell, { tid: treeItem.tid, isMobile: isMobile });
         }
         // Folder (altri tipi)
         return (_jsxs(StyledDivHorizontal, { style: { gap: 5, alignItems: 'center', minWidth: 0 }, children: [_jsx("span", { style: {
@@ -113,7 +95,7 @@ const TMTreeSelector = ({ layoutMode = LayoutModes.Update, isVisible, onSelected
                         whiteSpace: 'nowrap',
                         flex: 1,
                     }, children: treeItem.nameLoc })] }));
-    }, [isMobile, infoDTD, setInfoDTD]);
+    }, [isMobile]);
     // Handles selection change in the data grid
     const onSelectionChanged = useCallback((e) => {
         const selectedKeys = e.component.getSelectedRowKeys() ?? [];
@@ -214,6 +196,29 @@ const TMTreeSelector = ({ layoutMode = LayoutModes.Update, isVisible, onSelected
             : _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 StyledTreeDcmtTypeRow = styled(StyledDivHorizontal) `
+    align-items: center;
+    min-width: 0;
+    width: 100%;
+    gap: 2px;
+    position: relative;
+
+    .info-icon {
+        display: flex;
+        align-items: center;
+        margin-left: auto;
+        z-index: 2;
+        cursor: pointer;
+        opacity: 0;
+        pointer-events: none;
+        transition: opacity 0.2s;
+    }
+
+    &:hover .info-icon {
+        opacity: 1;
+        pointer-events: auto;
+    }
+`;
 const StyledTreeListWrapper = styled.div `
     width: 100%;
     height: 100%;

package/lib/components/sidebar/TMHeader.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useEffect, useRef, useMemo } from 'react';
 import six from '../../assets/six.png';
-import { getAvatarColor, IconCloseOutline, IconCopy, openApps, SDKUI_Localizator } from '../../helper';
+import { getAvatarColor, IconCloseOutline, IconCopy, IconOpenInNew, openApps, SDKUI_Localizator, WHATS_NEWS_LINK_URL } from '../../helper';
 import styled, { keyframes } from 'styled-components';
 import { SDK_Globals, AuthenticationModes, AppModules, UserLevels, CultureIDs } from '@topconsultnpm/sdk-ts';
 import { TMColors } from '../../utils/theme';
@@ -10,6 +10,7 @@ import { DeviceType, useDeviceType } from '../base/TMDeviceProvider';
 import { TMAboutApp } from './TMAboutApp';
 import ShowAlert from '../base/TMAlert';
 import TMResizableMenu from '../base/TMResizableMenu';
+import TMTooltip from '../base/TMTooltip';
 import it from '../../assets/italy.svg';
 import de from '../../assets/german.svg';
 import fr from '../../assets/france.svg';
@@ -253,10 +254,10 @@ const TMHeader = ({ customButtons = _jsx(_Fragment, {}), onMenusOpen, showSettin
                     e.preventDefault();
                     setMenuStatus(prev => !prev);
                 }, children: _jsx(UserAvatar, { "$bgColor": avatarColor, children: userInitials }) }), menuStatus &&
-                _jsx(TMResizableMenu, { ref: menuRef, isVisible: menuStatus, top: 60, right: 10, resizable: false, maxWidth: 300, minWidth: 300, maxHeight: 180, minHeight: 180, padding: 0, children: _jsxs(MenuContainer, { children: [_jsxs(UserProfileSection, { children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 12, height: 'max-content' }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 12, height: 'max-content' }, children: [_jsx(AvatarContainer, { children: _jsx(UserAvatarLarge, { "$bgColor": avatarColor, children: userInitials }) }), _jsxs(UserInfo, { children: [_jsxs(UserNameContainer, { children: [_jsx(UserName, { children: userName }), _jsx(CultureFlag, { src: cultureFlag, alt: cultureName, title: cultureName })] }), domain && _jsx(SessionInfo, { style: { padding: 0, margin: 0 }, children: `(${domain})` })] })] }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'flex-start', justifyContent: 'center', gap: 5 }, children: [_jsx(SessionInfo, { children: endpoint }), _jsx(SessionInfo, { children: archiveId + ' (' + archiveDesc + ')' })] })] }), _jsx(CopyIcon, { onClick: (e) => {
-                                            e.stopPropagation();
-                                            copyUserInfoToClipboard(userName, cultureId, archiveId, archiveDesc, endpoint, domain);
-                                        }, title: SDKUI_Localizator.CopyUserInfo, children: _jsx(IconCopy, { fontSize: 12 }) }), _jsx(LogoutButton, { onClick: () => {
+                _jsx(TMResizableMenu, { ref: menuRef, isVisible: menuStatus, top: 60, right: 10, resizable: false, maxWidth: 300, minWidth: 300, maxHeight: 188, minHeight: 188, padding: 0, children: _jsxs(MenuContainer, { children: [_jsxs(UserProfileSection, { children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 12, height: 'max-content', flex: 1, minWidth: 0 }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 12, height: 'max-content' }, children: [_jsx(AvatarContainer, { children: _jsx(UserAvatarLarge, { "$bgColor": avatarColor, children: userInitials }) }), _jsxs(UserInfo, { children: [_jsxs(UserNameContainer, { children: [_jsx(UserName, { children: userName }), _jsx(CultureFlag, { src: cultureFlag, alt: cultureName, title: cultureName })] }), domain && _jsx(SessionInfo, { style: { padding: 0, margin: 0 }, children: `(${domain})` })] })] }), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 8 }, children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'flex-start', justifyContent: 'center', gap: 5, flex: 1, minWidth: 0 }, children: [_jsx(SessionInfo, { children: endpoint }), _jsx(SessionInfo, { children: archiveId + ' (' + archiveDesc + ')' })] }), _jsxs(HeaderMenuActions, { children: [_jsx(TMTooltip, { content: SDKUI_Localizator.CopyUserInfo, children: _jsx(HeaderMenuActionIcon, { "$color": '#605e5c', onClick: (e) => {
+                                                                        e.stopPropagation();
+                                                                        copyUserInfoToClipboard(userName, cultureId, archiveId, archiveDesc, endpoint, domain);
+                                                                    }, children: _jsx(IconCopy, { fontSize: 14 }) }) }), _jsx(TMTooltip, { content: SDKUI_Localizator.ShowReleaseNotesInfo, children: _jsx(HeaderMenuActionIcon, { as: 'a', "$color": TMColors.primary, href: WHATS_NEWS_LINK_URL, target: '_blank', rel: 'noopener noreferrer', onClick: (e) => e.stopPropagation(), children: _jsx(IconOpenInNew, { fontSize: 14 }) }) })] })] })] }), _jsx(LogoutButton, { onClick: () => {
                                             setMenuStatus(false);
                                             onLogout && onLogout();
                                         }, children: _jsx(LogoutText, { children: SDKUI_Localizator.Logout }) })] }), _jsxs(BottomActionsContainer, { children: [isTopMediaAuth && (_jsx(BottomActionButton, { onClick: () => {
@@ -468,8 +469,9 @@ const MenuContainer = styled.div `
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
 `;
 const UserProfileSection = styled.div `
+    position: relative;
     display: flex;
-    padding: 20px;  
+    padding: 16px 20px;  
     background: linear-gradient(135deg, #f8f9fa 0%, #f1f3f4 100%);
     border-bottom: 1px solid #e1e5e9;
     gap: 12px;
@@ -515,7 +517,7 @@ const CultureFlag = styled.img `
 `;
 const LogoutButton = styled.div `
     position: absolute;
-    top: 20px;
+    top: 16px;
     right: 20px;
     cursor: pointer;
     transition: all 0.2s ease;
@@ -546,29 +548,37 @@ const AvatarContainer = styled.div `
     position: relative;
     flex-shrink: 0;
 `;
-const CopyIcon = styled.div `
-    position: absolute;
-    bottom: 50px;
-    right: 15px;
-    width: 20px;
-    height: 20px;
+const HeaderMenuActions = styled.div `
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    flex-shrink: 0;
+`;
+const HeaderMenuActionIcon = styled.div `
+    width: 22px;
+    height: 22px;
     background: white;
-    border: 1px solid #e1e5e9;
+    border: 1px solid ${props => props.$color}55;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
-    color: #605e5c;
     transition: all 0.2s ease;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    z-index: 10;
-    opacity: 0.6;
+    text-decoration: none;
 
-    &:hover {
-        background: #b7b7b7;
+    /* "&&" alza la specificita': un eventuale "a, a:visited { color: inherit }"
+       dell'app ospite vincerebbe sulla singola classe di styled-components */
+    &&,
+    &&:visited {
+        color: ${props => props.$color};
+    }
+
+    &&:hover {
+        background: ${props => props.$color};
+        border-color: ${props => props.$color};
         color: white;
-        opacity: 1;
     }
 
     &:active {

package/lib/components/viewers/TMTidViewer.js

@@ -6,6 +6,7 @@ import TMSpinner from '../base/TMSpinner';
 import { StyledDivHorizontal, StyledTooltipContainer, StyledTooltipItem, StyledTooltipSeparatorItem } from '../base/Styled';
 import TMTooltip from '../base/TMTooltip';
 import { TMColors } from '../../utils/theme';
+import styled, { keyframes } from 'styled-components';
 export var ImageIDList;
 (function (ImageIDList) {
     ImageIDList["arrow_001"] = "arrow_001";
@@ -261,13 +262,54 @@ export const TMDcmtTypeIcon = ({ dtd }) => {
 export const TMDcmtTypeTooltip = ({ dtd, children }) => {
     return (_jsx("div", { style: { pointerEvents: 'all' }, children: _jsx(TMTooltip, { allowContentInteraction: true, content: renderDTDTooltipContent(dtd), children: children }) }));
 };
+/** Legge il tipo documento dalle cache dell'SDK senza passare dal mutex. Serve perché
+ *  l'espansione di una cartella nell'albero ricrea tutte le celle: senza una lettura sincrona
+ *  ogni riga tornerebbe a mostrare il testo di "nessuna selezione" fino alla fine delle
+ *  richieste (una per TID, serializzate dal mutex).
+ *  GetCache restituisce le mappe vive usate dall'SDK, quindi le invalidazioni
+ *  (RemoveAllWithMetadata, RemoveAllWithoutMetadata, logout) hanno effetto immediato. */
+const getCachedDTD = (tid, tmSession) => {
+    if (!tid || tid <= 0)
+        return undefined;
+    const accessToken = (tmSession ?? SDK_Globals.tmSession)?.SessionDescr?.accessToken;
+    if (!accessToken)
+        return undefined;
+    // La cache senza metadati è popolata dalla login: copre già i tipi documento autorizzati
+    return DcmtTypeListCacheService.GetCache(false).get(accessToken)?.find(o => o.id === tid)
+        ?? DcmtTypeListCacheService.GetCache(true).get(accessToken)?.find(o => o.id === tid);
+};
+const shimmer = keyframes `
+    0% { background-position: 200% 0; }
+    100% { background-position: -200% 0; }
+`;
+/** Segnaposto animato mostrato al posto del nome durante il caricamento.
+ *  Grigio semitrasparente: leggibile sia su sfondo chiaro che scuro. */
+const StyledTidSkeleton = styled.span `
+    display: inline-block;
+    flex: 0 0 auto;
+    width: 90px;
+    height: 0.9em;
+    border-radius: 4px;
+    background-image: linear-gradient(90deg, rgba(127, 127, 127, 0.12) 25%, rgba(127, 127, 127, 0.28) 50%, rgba(127, 127, 127, 0.12) 75%);
+    background-size: 200% 100%;
+    animation: ${shimmer} 1.4s ease-in-out infinite;
+
+    @media (prefers-reduced-motion: reduce) { animation: none; }
+`;
 const TMTidViewer = ({ tmSession, tid, did, showIcon = false, color, showId = false, noneSelectionText = `<${SDKUI_Localizator.NoneSelection}>` }) => {
-    const [dtd, setDtd] = useState();
+    const accessToken = (tmSession ?? SDK_Globals.tmSession)?.SessionDescr?.accessToken;
+    const [dtd, setDtd] = useState(() => getCachedDTD(tid, tmSession));
+    const [isLoading, setIsLoading] = useState(() => !!tid && tid > 0 && !getCachedDTD(tid, tmSession));
     const fetchData = async (tid, did) => {
         if (!tid || tid <= 0) {
             setDtd(undefined);
+            setIsLoading(false);
             return;
         }
+        const cached = getCachedDTD(tid, tmSession);
+        if (cached)
+            setDtd(cached);
+        setIsLoading(!cached);
         let count = DcmtTypeListCacheService.CacheCount(true, 'all', tmSession);
         if (count <= 0)
             TMSpinner.show({ description: `${SDKUI_Localizator.Loading} - ${SDK_Localizator.ListDcmtTypeOrView} ...` });
@@ -281,11 +323,14 @@ const TMTidViewer = ({ tmSession, tid, did, showIcon = false, color, showId = fa
         finally {
             if (count <= 0)
                 TMSpinner.hide();
+            setIsLoading(false);
         }
     };
+    // accessToken e non tmSession: la sessione è un oggetto e un'identità nuova a ogni render
+    // del chiamante rifarebbe la richiesta senza motivo
     useEffect(() => {
         fetchData(tid, did);
-    }, [tid, did]);
+    }, [tid, did, accessToken]);
     const displayName = () => {
         if (!dtd)
             return noneSelectionText;
@@ -295,16 +340,18 @@ const TMTidViewer = ({ tmSession, tid, did, showIcon = false, color, showId = fa
             whiteSpace: 'nowrap',
             overflow: 'hidden',
             textOverflow: 'ellipsis'
-        }, children: [showIcon && dtd && _jsx(TMDcmtTypeIcon, { dtd: dtd }), _jsx("p", { title: displayName(), style: {
-                    textAlign: 'left',
-                    margin: 0,
-                    marginLeft: showIcon ? '5px' : '',
-                    color: dtd?.isView ? 'red' : (color ?? TMColors.primary),
-                    whiteSpace: 'nowrap',
-                    overflow: 'hidden',
-                    textOverflow: 'ellipsis',
-                    // paddingRight: '10px'
-                }, children: displayName() }), showId && _jsx("p", { style: { padding: '0px 3px', margin: 0 }, children: `(TID: ${tid})` })] }));
+        }, children: [showIcon && dtd && _jsx(TMDcmtTypeIcon, { dtd: dtd }), isLoading && !dtd
+                ? _jsx(StyledTidSkeleton, { title: `${SDKUI_Localizator.Loading} ...`, style: { marginLeft: showIcon ? '5px' : undefined } })
+                : _jsx("p", { title: displayName(), style: {
+                        textAlign: 'left',
+                        margin: 0,
+                        marginLeft: showIcon ? '5px' : '',
+                        color: dtd?.isView ? 'red' : (color ?? TMColors.primary),
+                        whiteSpace: 'nowrap',
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        // paddingRight: '10px'
+                    }, children: displayName() }), showId && _jsx("p", { style: { padding: '0px 3px', margin: 0 }, children: `(TID: ${tid})` })] }));
 };
 export default TMTidViewer;
 export const cellRenderTID = (data, noneSelectionText) => {

package/lib/helper/SDKUI_Localizator.d.ts

@@ -808,6 +808,7 @@ export declare class SDKUI_Localizator {
     static get ShowLeftPanel(): "Linkes Panel anzeigen" | "Show left panel" | "Mostrar panel izquierdo" | "Afficher le panneau de gauche" | "Mostrar painel esquerdo" | "Mostra il pannello sinistro";
     static get ShowMasterInfo(): string;
     static get ShowPartialResults(): string;
+    static get ShowReleaseNotesInfo(): string;
     static get ShowSearch(): "Suche anzeigen" | "Show search" | "Mostrar búsqueda" | "Afficher la recherche" | "Mostrar pesquisa" | "Mostra ricerca";
     static get ShowSharedDocuments(): "Gemeinsame Dokumente anzeigen" | "Show shared documents" | "Mostrar documentos compartidos" | "Afficher les documents partagés" | "Mostrar documentos compartilhados" | "Mostra documenti condivisi";
     static get ShowColumnSeparatingLines(): string;

package/lib/helper/SDKUI_Localizator.js

@@ -8060,6 +8060,16 @@ export class SDKUI_Localizator {
             default: return "Mostra risultati parziali";
         }
     }
+    static get ShowReleaseNotesInfo() {
+        switch (this._cultureID) {
+            case CultureIDs.De_DE: return "Informationen zu den Versionshinweisen anzeigen";
+            case CultureIDs.En_US: return "Show release notes information";
+            case CultureIDs.Es_ES: return "Mostrar información sobre las notas de la versión";
+            case CultureIDs.Fr_FR: return "Afficher les informations sur les notes de version";
+            case CultureIDs.Pt_PT: return "Mostrar informações sobre as notas de versão";
+            default: return "Mostra informazioni sulle note di rilascio";
+        }
+    }
     static get ShowSearch() {
         switch (this._cultureID) {
             case CultureIDs.De_DE: return "Suche anzeigen";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@topconsultnpm/sdkui-react",
-    "version": "6.22.0-dev2.44",
+    "version": "6.22.0-dev2.46",
     "description": "",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",