@topconsultnpm/sdkui-react 6.22.0-dev2.45 → 6.22.0-dev2.47

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/grids/TMBlogsPost.d.ts

@@ -86,6 +86,8 @@ interface TMBlogsPostProps {
     addTaskCallback?: (task: TaskDescriptor) => Promise<void>;
     handleNavigateToWGs?: (value: HomeBlogPost | number) => Promise<void>;
     handleNavigateToDossiers?: (value: HomeBlogPost | number) => Promise<void>;
+    /** Apre la pratica CaseFlow di una notizia con `classID === 'CF'` (bacheca Home V6). */
+    handleNavigateToCaseflows?: (value: HomeBlogPost | number) => Promise<void>;
 }
 declare const TMBlogsPost: (props: TMBlogsPostProps) => import("react/jsx-runtime").JSX.Element;
 export default TMBlogsPost;

package/lib/components/grids/TMBlogsPost.js

@@ -5,6 +5,7 @@ import { ContextMenu as TMContextMenu } from "../NewComponents/ContextMenu";
 import { SDKUI_Localizator, Globalization, getExceptionMessage, TMConditionalWrapper, getMoreInfoTasksForDocument, taskModalSizes } from "../../helper";
 import TMToppyMessage from "../../helper/TMToppyMessage";
 import { useDcmtOperations } from "../../hooks/useDcmtOperations";
+import { CaseFlowService } from "../../services/caseflow/CaseFlowService";
 import { DownloadTypes, FormModes } from "../../ts";
 import { TMColors } from "../../utils/theme";
 import ShowAlert from "../base/TMAlert";
@@ -32,7 +33,7 @@ const TMBlogsPost = (props) => {
         isRestoreEnabled: false,
         isRefreshEnabled: false,
         isCreateContextualTask: false,
-    }, showFloatingCommentButton = false, showCommentFormCallback, refreshCallback, showId, setShowId, refreshHomePageNews, markBlogAsRead, externalBlogPost, resetExternalBlogPost, visible = true, allTasks = [], getAllTasks, deleteTaskByIdsCallback, addTaskCallback, editTaskCallback, afterTaskSaved, handleNavigateToWGs, handleNavigateToDossiers, } = props;
+    }, showFloatingCommentButton = false, showCommentFormCallback, refreshCallback, showId, setShowId, refreshHomePageNews, markBlogAsRead, externalBlogPost, resetExternalBlogPost, visible = true, allTasks = [], getAllTasks, deleteTaskByIdsCallback, addTaskCallback, editTaskCallback, afterTaskSaved, handleNavigateToWGs, handleNavigateToDossiers, handleNavigateToCaseflows, } = props;
     const { abortController, showWaitPanel, waitPanelTitle, showPrimary, waitPanelTextPrimary, waitPanelValuePrimary, waitPanelMaxValuePrimary, showSecondary, waitPanelTextSecondary, waitPanelValueSecondary, waitPanelMaxValueSecondary, downloadDcmtsAsync } = useDcmtOperations();
     // Get the current device type (e.g., mobile, tablet, desktop) using a custom hook.
     const deviceType = useDeviceType();
@@ -292,6 +293,8 @@ const TMBlogsPost = (props) => {
             handleNavigateToWGs(blogPost);
         if (handleNavigateToDossiers && id && blogPost.classID === 'DS')
             handleNavigateToDossiers(blogPost);
+        if (handleNavigateToCaseflows && id && blogPost.classID === 'CF')
+            handleNavigateToCaseflows(blogPost);
     };
     const handleKeyDown = (event) => {
         if (!selectedItem.length)
@@ -324,6 +327,9 @@ const TMBlogsPost = (props) => {
                 if (handleNavigateToDossiers && item.id && classItemID === 'DS') {
                     handleNavigateToDossiers(item);
                 }
+                if (handleNavigateToCaseflows && item.id && classItemID === 'CF') {
+                    handleNavigateToCaseflows(item);
+                }
                 break;
             default:
                 break;
@@ -367,6 +373,17 @@ const TMBlogsPost = (props) => {
                             result.push({ rowIndex: currentBlog.id, id1: currentBlog.id, id2: currentBlog.id, resultType: ResultTypes.ERROR, description: getExceptionMessage(err) });
                         });
                         break;
+                    case 'CF':
+                        // La notizia porta il solo CFIID: il template (cftid) che l'API
+                        // richiede lo risolve CaseFlowService.setFollow.
+                        await CaseFlowService.setFollow(currentBlog.id, false).then(async () => {
+                            result.push({ rowIndex: currentBlog.id, id1: currentBlog.id, id2: currentBlog.id, description: SDKUI_Localizator.OperationSuccess, resultType: ResultTypes.SUCCESS });
+                            refreshHomePageNews?.();
+                        })
+                            .catch((err) => {
+                            result.push({ rowIndex: currentBlog.id, id1: currentBlog.id, id2: currentBlog.id, resultType: ResultTypes.ERROR, description: getExceptionMessage(err) });
+                        });
+                        break;
                     default:
                         ShowAlert({ message: 'TODO', mode: 'warning', title: SDKUI_Localizator.Unfollow, duration: 3000 });
                         break;
@@ -570,7 +587,7 @@ const TMBlogsPost = (props) => {
                 beginGroup: true
             });
         }
-        if (targetItem && Boolean(classId && (classId === 'WG' || classId === 'DS'))) {
+        if (targetItem && Boolean(classId && (classId === 'WG' || classId === 'DS' || classId === 'CF'))) {
             menuItems.push({
                 icon: _jsx("span", { className: "dx-icon-eyeclose" }),
                 name: SDKUI_Localizator.Unfollow,
@@ -632,6 +649,12 @@ const TMBlogsPost = (props) => {
                 else
                     console.log("Working Group reference missing objID");
                 break;
+            case ObjectClasses.CaseFlowInstance:
+                if (ref.objID)
+                    handleNavigateToCaseflows?.(ref.objID);
+                else
+                    console.log("CaseFlow instance reference missing objID");
+                break;
             // Handle other object types as needed
             default:
                 console.warn(`Unhandled object type: ${ref.objClass}`);
@@ -687,7 +710,7 @@ const TMBlogsPost = (props) => {
                                                             textDecoration: blogPost.isDel ? 'line-through' : 'none',
                                                             boxShadow: isFocused ? "0 4px 12px rgba(19, 85, 150, 0.6)" : "none",
                                                             cursor: 'pointer',
-                                                        }, children: [_jsx(BlogPostTitle, { displayMode: displayMode, layoutMode: layoutMode, blogPost: blogPost, isSelected: isSelected, isOwnComment: isOwnComment, searchText: searchText, isSys: isSys, isHomeBlogPost: isHomeBlogPost, showId: localShowId, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers }), isNew && _jsx(NewBadge, { layoutMode: layoutMode }), _jsx("div", { style: { fontSize: '1rem', color: "#000", marginTop: "10px", overflow: "hidden" }, children: _jsx(TMHtmlContentDisplay, { markup: blogPost.description ?? '-', searchText: searchText, isSelected: isSelected }) }), showExtendedAttachments && blogPost.attachments && blogPost.attachments.length > 0 && (_jsx(TMBlogAttachments, { attachments: blogPost.attachments, layoutMode: layoutMode, isSelected: isSelected, isLoading: !descriptorsLoaded, searchText: searchText, dcmtTypeDescriptors: dcmtTypeDescriptors, treeFs: treeFs, draftLatestInfoMap: draftLatestInfoMap, archivedDocumentMap: archivedDocumentMap, handleAttachmentFocus: handleFocusedAttachment, openDcmtForm: openDcmtForm }))] }, `${id}-blogpost-${blogPost.id}`) })] }, "blog-post-wrapper-" + id + "-" + blogPost.id);
+                                                        }, children: [_jsx(BlogPostTitle, { displayMode: displayMode, layoutMode: layoutMode, blogPost: blogPost, isSelected: isSelected, isOwnComment: isOwnComment, searchText: searchText, isSys: isSys, isHomeBlogPost: isHomeBlogPost, showId: localShowId, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers, handleNavigateToCaseflows: handleNavigateToCaseflows }), isNew && _jsx(NewBadge, { layoutMode: layoutMode }), _jsx("div", { style: { fontSize: '1rem', color: "#000", marginTop: "10px", overflow: "hidden" }, children: _jsx(TMHtmlContentDisplay, { markup: blogPost.description ?? '-', searchText: searchText, isSelected: isSelected }) }), showExtendedAttachments && blogPost.attachments && blogPost.attachments.length > 0 && (_jsx(TMBlogAttachments, { attachments: blogPost.attachments, layoutMode: layoutMode, isSelected: isSelected, isLoading: !descriptorsLoaded, searchText: searchText, dcmtTypeDescriptors: dcmtTypeDescriptors, treeFs: treeFs, draftLatestInfoMap: draftLatestInfoMap, archivedDocumentMap: archivedDocumentMap, handleAttachmentFocus: handleFocusedAttachment, openDcmtForm: openDcmtForm }))] }, `${id}-blogpost-${blogPost.id}`) })] }, "blog-post-wrapper-" + id + "-" + blogPost.id);
                                     }), _jsx("div", { ref: bottomRef })] }), _jsx(TMContextMenu, { items: menuItems, target: `#${id}-blogs-wrapper`, externalControl: {
                                     visible: menuVisible,
                                     position: menuPosition,

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

@@ -109,6 +109,7 @@ interface BlogPostTitleProps {
     showId: boolean;
     handleNavigateToWGs?: (blogPost: BlogPost | HomeBlogPost) => void;
     handleNavigateToDossiers?: (blogPost: BlogPost | HomeBlogPost) => void;
+    handleNavigateToCaseflows?: (blogPost: BlogPost | HomeBlogPost) => void;
 }
 export declare const BlogPostTitle: (props: BlogPostTitleProps) => import("react/jsx-runtime").JSX.Element;
 export declare const stripHtml: (html: string) => string;

package/lib/components/grids/TMBlogsPostUtils.js

@@ -162,8 +162,16 @@ export const getDcmtTypeDescriptor = async (blogPosts) => {
     return dcmtTypeMap;
 };
 export const BlogPostHomeHeader = (header, classId, isSelected, searchText, headerClickCallback) => {
+    // 'CF' = istanza di CaseFlow (bacheca Home V6). Attenzione: nel mondo dei
+    // task PdGs.CF indica invece la pratica-dossier; qui il dominio e' il
+    // ClassID di HomeBlogPost, dove 'DS' e' la pratica e 'CF' la pratica CaseFlow.
     const isWorkGroup = classId === 'WG';
-    const iconColor = isSelected ? '#ffffff' : isWorkGroup ? PDGS_COLORS.WORKING_GROUP : PDGS_COLORS.DOSSIER;
+    const isCaseFlow = classId === 'CF';
+    const iconColor = isSelected
+        ? '#ffffff'
+        : isWorkGroup ? PDGS_COLORS.WORKING_GROUP
+            : isCaseFlow ? PDGS_COLORS.CASEFLOW
+                : PDGS_COLORS.DOSSIER;
     return (_jsxs("div", { style: {
             display: "flex",
             alignItems: "center",
@@ -171,7 +179,7 @@ export const BlogPostHomeHeader = (header, classId, isSelected, searchText, head
             fontWeight: "bold",
             color: isSelected ? "#fff" : TMColors.primary,
             gap: "4px",
-        }, children: [_jsx(TMTooltip, { content: isWorkGroup ? SDKUI_Localizator.WorkGroup : SDKUI_Localizator.Dossier, children: isWorkGroup ? (_jsx(IconMenuCAWorkingGroups, { color: iconColor, fontSize: 28, onClick: headerClickCallback })) : (_jsx(IconCADossier, { color: iconColor, fontSize: 28, onClick: headerClickCallback })) }), _jsx("div", { onClick: headerClickCallback, style: {
+        }, children: [_jsx(TMTooltip, { content: isWorkGroup ? SDKUI_Localizator.WorkGroup : isCaseFlow ? "CaseFlow" : SDKUI_Localizator.Dossier, children: isWorkGroup ? (_jsx(IconMenuCAWorkingGroups, { color: iconColor, fontSize: 28, onClick: headerClickCallback })) : isCaseFlow ? (_jsx(IconCADossier, { color: iconColor, fontSize: 28, onClick: headerClickCallback })) : (_jsx(IconCADossier, { color: iconColor, fontSize: 28, onClick: headerClickCallback })) }), _jsx("div", { onClick: headerClickCallback, style: {
                     whiteSpace: "nowrap",
                     overflow: "hidden",
                     textOverflow: "ellipsis",
@@ -218,7 +226,7 @@ export const removeFileExtension = (filename) => {
     return filename.includes('.') ? filename.substring(0, filename.lastIndexOf('.')) : filename;
 };
 export const BlogPostTitle = (props) => {
-    const { displayMode, layoutMode, blogPost, isSelected, isOwnComment, searchText, isSys, isHomeBlogPost, showId, handleNavigateToWGs, handleNavigateToDossiers } = props;
+    const { displayMode, layoutMode, blogPost, isSelected, isOwnComment, searchText, isSys, isHomeBlogPost, showId, handleNavigateToWGs, handleNavigateToDossiers, handleNavigateToCaseflows } = props;
     const showOwnerBadge = (displayMode === "stacked" || !isOwnComment) && layoutMode === "extended";
     let subtitle = "";
     if (isHomeBlogPost) {
@@ -239,6 +247,9 @@ export const BlogPostTitle = (props) => {
         if (handleNavigateToDossiers && blogPost.id && blogPost.classID === 'DS') {
             handleNavigateToDossiers(blogPost);
         }
+        if (handleNavigateToCaseflows && blogPost.id && blogPost.classID === 'CF') {
+            handleNavigateToCaseflows(blogPost);
+        }
     };
     return _jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [showOwnerBadge && (_jsx("div", { style: { width: "40px", height: "40px", flexShrink: 0 }, children: OwnerInitialsBadge(blogPost) })), _jsxs("div", { style: {
                     display: "flex",

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/TMAppUpdatedModal.js

@@ -8,110 +8,110 @@ import { SDKUI_Globals } from './SDKUI_Globals';
 import { SDKUI_Localizator } from './SDKUI_Localizator';
 import { IconUpdate, IconOpenInNew } from './TMIcons';
 import { getAppModuleButtonColors } from './TMUtils';
-const Content = styled.div `
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    background-color: #ffffff;
+const Content = styled.div `
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    background-color: #ffffff;
 `;
-const Header = styled.div `
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 14px;
-    padding: 32px 30px 26px 30px;
-    background-color: ${({ $backgroundColor }) => $backgroundColor};
-    color: #ffffff;
-    text-align: center;
+const Header = styled.div `
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 14px;
+    padding: 32px 30px 26px 30px;
+    background-color: ${({ $backgroundColor }) => $backgroundColor};
+    color: #ffffff;
+    text-align: center;
 `;
-const HeaderIcon = styled.div `
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 68px;
-    height: 68px;
-    border-radius: 50%;
-    background-color: rgba(255, 255, 255, 0.18);
-    border: 1px solid rgba(255, 255, 255, 0.35);
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
+const HeaderIcon = styled.div `
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 68px;
+    height: 68px;
+    border-radius: 50%;
+    background-color: rgba(255, 255, 255, 0.18);
+    border: 1px solid rgba(255, 255, 255, 0.35);
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
 `;
-const HeaderTitle = styled.h2 `
-    margin: 0;
-    font-size: 22px;
-    font-weight: 600;
-    letter-spacing: 0.2px;
+const HeaderTitle = styled.h2 `
+    margin: 0;
+    font-size: 22px;
+    font-weight: 600;
+    letter-spacing: 0.2px;
 `;
-const VersionBadge = styled.span `
-    display: inline-block;
-    padding: 4px 12px;
-    border-radius: 999px;
-    background-color: rgba(255, 255, 255, 0.22);
-    border: 1px solid rgba(255, 255, 255, 0.4);
-    font-size: 13px;
-    font-weight: 600;
-    letter-spacing: 0.3px;
+const VersionBadge = styled.span `
+    display: inline-block;
+    padding: 4px 12px;
+    border-radius: 999px;
+    background-color: rgba(255, 255, 255, 0.22);
+    border: 1px solid rgba(255, 255, 255, 0.4);
+    font-size: 13px;
+    font-weight: 600;
+    letter-spacing: 0.3px;
 `;
-const Body = styled.div `
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-    padding: 26px 30px 22px 30px;
-    text-align: center;
+const Body = styled.div `
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    padding: 26px 30px 22px 30px;
+    text-align: center;
 `;
-const Message = styled.p `
-    margin: 0;
-    font-size: 15px;
-    line-height: 1.6;
-    color: #242424;
+const Message = styled.p `
+    margin: 0;
+    font-size: 15px;
+    line-height: 1.6;
+    color: #242424;
 `;
-const SubMessage = styled.p `
-    margin: 0;
-    font-size: 13px;
-    line-height: 1.6;
-    color: #6b6b6b;
+const SubMessage = styled.p `
+    margin: 0;
+    font-size: 13px;
+    line-height: 1.6;
+    color: #6b6b6b;
 `;
-const Footer = styled.div `
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    flex-wrap: wrap;
-    gap: 12px;
-    padding: 0 30px 28px 30px;
+const Footer = styled.div `
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 12px;
+    padding: 0 30px 28px 30px;
 `;
-const BaseButton = styled.button `
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: 8px;
-    min-width: 150px;
-    padding: 10px 18px;
-    border-radius: 8px;
-    font-size: 14px;
-    font-weight: 600;
-    cursor: pointer;
-    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
+const BaseButton = styled.button `
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    min-width: 150px;
+    padding: 10px 18px;
+    border-radius: 8px;
+    font-size: 14px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
 `;
-const PrimaryButton = styled(BaseButton) `
-    border: 1px solid ${({ $base }) => $base};
-    background-color: ${({ $base }) => $base};
-    color: #ffffff;
-
-    &:hover {
-        background-color: ${({ $hover }) => $hover};
-        border-color: ${({ $hover }) => $hover};
-        box-shadow: 0 2px 8px ${({ $shadow }) => $shadow};
-    }
+const PrimaryButton = styled(BaseButton) `
+    border: 1px solid ${({ $base }) => $base};
+    background-color: ${({ $base }) => $base};
+    color: #ffffff;
+
+    &:hover {
+        background-color: ${({ $hover }) => $hover};
+        border-color: ${({ $hover }) => $hover};
+        box-shadow: 0 2px 8px ${({ $shadow }) => $shadow};
+    }
 `;
-const SecondaryButton = styled(BaseButton) `
-    border: 1px solid #d5d5d5;
-    background-color: #ffffff;
-    color: #444444;
-
-    &:hover {
-        background-color: #f3f3f3;
-        border-color: #bdbdbd;
-    }
+const SecondaryButton = styled(BaseButton) `
+    border: 1px solid #d5d5d5;
+    background-color: #ffffff;
+    color: #444444;
+
+    &:hover {
+        background-color: #f3f3f3;
+        border-color: #bdbdbd;
+    }
 `;
 export const TMAppUpdatedModal = () => {
     const deviceType = useDeviceType();

package/lib/helper/TMUtils.d.ts

@@ -53,6 +53,8 @@ export declare const PDGS_COLORS: {
     DOSSIER: string;
     DOCUMENT: string;
     WORKING_GROUP: string;
+    /** Istanza di CaseFlow: viola, per non confonderla ne' con la pratica (arancio) ne' con il gruppo di lavoro (verde). */
+    CASEFLOW: string;
 };
 export declare const getPdgsIconMap: (fontSize?: number) => Map<PdGs, JSX.Element>;
 export declare const convertSearchResultDescriptorToFileItems: (documents: Array<SearchResultDescriptor>) => Array<FileItem>;

package/lib/helper/TMUtils.js

@@ -270,6 +270,8 @@ export const PDGS_COLORS = {
     DOSSIER: '#e65b00',
     DOCUMENT: '#b38600',
     WORKING_GROUP: '#009700',
+    /** Istanza di CaseFlow: viola, per non confonderla ne' con la pratica (arancio) ne' con il gruppo di lavoro (verde). */
+    CASEFLOW: '#6a3fb5',
 };
 export const getPdgsIconMap = (fontSize = 20) => {
     return new Map([

package/package.json

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