@topconsultnpm/sdkui-react 6.22.0-t1 → 6.22.0-t2

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

@@ -26,6 +26,7 @@ export interface FileItem {
     version?: number;
     isSigned?: number;
 }
+export declare const resolveFileItemUserNames: (item: FileItem, users: Array<UserDescriptor>) => FileItem;
 export interface TMFileManagerTreeViewDirectory {
     id: number;
     text: string;
@@ -47,15 +48,14 @@ export declare const colors: {
     LIGHT_YELLOW: string;
     MEDIUM_GREEN: string;
 };
-export declare const TMFileItemContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$backgroundColor" | "$textColor" | "$bgHoverColor"> & {
+export declare const TMFileItemContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: React.CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, {
     $backgroundColor?: string;
     $textColor?: string;
     $bgHoverColor?: string;
-}, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$backgroundColor" | "$textColor" | "$bgHoverColor"> & {
-    $backgroundColor?: string;
-    $textColor?: string;
-    $bgHoverColor?: string;
-}, never>>> & string;
+}>> & string;
+export declare const getFileItemLinkUrl: (fileItem: FileItem | undefined) => string | undefined;
 export declare const findFileItems: (items: Array<FileItem>, id: number) => FileItem | undefined;
 export declare const setFolderTreeViewItems: (items: Array<FileItem>) => Array<TMFileManagerTreeViewDirectory>;
 export declare const buildFolderHierarchy: (fileSystemTree: WGTreeDescriptor | undefined, draftsFile: SearchResultDescriptor | undefined, archivedDocuments: Array<SearchResultDescriptor> | undefined, participants: Array<UserDescriptor> | undefined) => {

package/lib/components/base/TMFileManagerUtils.js

@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import { associateColumnsToRows, SIGNATURE_EXTENSIONS } from "../../helper";
+import { associateColumnsToRows, SIGNATURE_EXTENSIONS, WHATS_NEWS_FILE_NAME, WHATS_NEWS_LINK_URL } from "../../helper";
 /**
  * Verifica se un'estensione indica che il file è firmato digitalmente.
  * Controlla se l'estensione (es. "pdf.p7m", ".p7m", "p7m") contiene
@@ -12,6 +12,22 @@ export const isSigned = (ext) => {
     const parts = normalized.split('.');
     return parts.some(part => SIGNATURE_EXTENSIONS.has(part));
 };
+// Completa i nomi utente (autore e utente di check-out) di un FileItem quando mancano, risolvendoli dagli ID.
+export const resolveFileItemUserNames = (item, users) => {
+    if (!users || users.length === 0)
+        return item;
+    const isValidUserID = (id) => id !== undefined && Number.isFinite(id) && id > 0;
+    const needsUpdaterName = !item.updaterName && isValidUserID(item.updaterID);
+    const needsCheckOutUserName = !item.checkOutUserName && isValidUserID(item.checkOutUserID);
+    if (!needsUpdaterName && !needsCheckOutUserName)
+        return item;
+    const resolved = { ...item };
+    if (needsUpdaterName)
+        resolved.updaterName = users.find(user => user.id === item.updaterID)?.name ?? item.updaterName;
+    if (needsCheckOutUserName)
+        resolved.checkOutUserName = users.find(user => user.id === item.checkOutUserID)?.name ?? item.checkOutUserName;
+    return resolved;
+};
 export var TMFileManagerPageSize;
 (function (TMFileManagerPageSize) {
     TMFileManagerPageSize[TMFileManagerPageSize["Small"] = 30] = "Small";
@@ -47,6 +63,26 @@ export const TMFileItemContainer = styled.div `
         outline: none;
     }
 `;
+// Confronto case-insensitive con il nome del file
+const isWhatsNewsFileName = (name) => (name ?? '').toLowerCase() === WHATS_NEWS_FILE_NAME;
+// Ritorna l'url del link associato al file: un file il cui metadato "description" contiene un url http/https
+// e' un link, quindi non ha un file/documento da scaricare o da aprire nella form: si apre direttamente l'url
+export const getFileItemLinkUrl = (fileItem) => {
+    if (!fileItem || fileItem.isDirectory)
+        return undefined;
+    if (isWhatsNewsFileName(fileItem.name))
+        return WHATS_NEWS_LINK_URL;
+    const value = fileItem.description?.trim();
+    if (!value)
+        return undefined;
+    try {
+        const url = new URL(value);
+        return (url.protocol === 'http:' || url.protocol === 'https:') ? url.href : undefined;
+    }
+    catch {
+        return undefined;
+    }
+};
 // Function to find a specific file or folder based on its ID (used for finding nested items)
 export const findFileItems = (items, id) => {
     for (let item of items) {

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

@@ -14,6 +14,17 @@ interface ITMModal {
     askClosingConfirm?: boolean;
     showCloseButton?: boolean;
     showHeader?: boolean;
+    /** Se true, ricentra il popup ogni volta che cambiano width/height, annullando lo spostamento manuale */
+    recenterOnResize?: boolean;
+    /** Contenuto aggiuntivo nella barra del titolo, prima del pulsante di chiusura (es. un menu di opzioni) */
+    titleActions?: React.ReactNode;
+    /** Dimensioni in px al termine di un ridimensionamento manuale */
+    onResized?: (size: {
+        width: number;
+        height: number;
+    }) => void;
+    /** A ogni cambio di valore le dimensioni tornano a `width`/`height`, anche se invariate */
+    sizeResetToken?: number | string;
 }
 declare const TMModal: React.FC<ITMModal>;
 export default TMModal;

package/lib/components/base/TMModal.js

@@ -1,10 +1,13 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect, useRef } from 'react';
 import { Popup } from 'devextreme-react';
+import { ToolbarItem } from 'devextreme-react/popup';
 import styled from 'styled-components';
 import { TMCard } from './TMLayout';
 import { FontSize, TMColors } from '../../utils/theme';
 import { IconWindowMaximize, IconWindowMinimize, svgToString } from '../../helper';
+/** Valori di `height` con cui il popup si dimensiona sul contenuto (vedi applyContentFillLayout) */
+const CONTENT_DRIVEN_HEIGHTS = ['auto', 'max-content', 'min-content', 'fit-content'];
 const StyledModal = styled.div `
     width: ${props => props.$width};
     height: ${props => props.$height};
@@ -39,10 +42,13 @@ const StyledModalContext = styled.div `
     overflow: auto;
     height: 100%;
 `;
-const TMModal = ({ resizable = true, expandable = false, isModal = true, title = '', toolbar, onClose, children, width = '100%', height = '100%', fontSize = FontSize.defaultFontSize, hidePopup = true, askClosingConfirm = false, showCloseButton = true, showHeader = true }) => {
+const TMModal = ({ resizable = true, expandable = false, isModal = true, title = '', toolbar, onClose, children, width = '100%', height = '100%', fontSize = FontSize.defaultFontSize, hidePopup = true, askClosingConfirm = false, showCloseButton = true, showHeader = true, recenterOnResize = false, titleActions, onResized, sizeResetToken }) => {
     const popupRef = useRef(null);
     const [initialWidth, setInitialWidth] = useState(width);
     const [initialHeight, setInitialHeight] = useState(height);
+    // Posizione controllata: un nuovo riferimento oggetto forza DevExtreme a riposizionare (ricentrare).
+    // Lasciata invariata durante il drag, così lo spostamento manuale viene preservato
+    const [position, setPosition] = useState(undefined);
     const [showPopup, setShowPopup] = useState(false);
     const [isResizing, setIsResizing] = useState(false);
     const [isFullScreen, setIsFullScreen] = useState(false);
@@ -51,6 +57,26 @@ const TMModal = ({ resizable = true, expandable = false, isModal = true, title =
     const DEFAULT_MIN_HEIGHT = 400;
     const [minWidth, setMinWidth] = useState(0);
     const [minHeight, setMinHeight] = useState(0);
+    /**
+     * DevExtreme fissa in px l'altezza del contenuto del popup: se le dimensioni cambiano a popup
+     * già aperto (es. cambio step) resta quella del passo precedente e sotto rimane spazio vuoto.
+     * Come figlio flex il contenuto riempie il popup senza dipendere da quel calcolo.
+     * Non si applica alle altezze dimensionate sul contenuto (`auto`, `max-content`, ...):
+     * lì è il contenuto a dare l'altezza al popup e non c'è spazio da riempire.
+     */
+    const applyContentFillLayout = () => {
+        const content = popupRef.current?.instance()?.content();
+        const overlayContent = content?.parentElement;
+        if (!content || !overlayContent)
+            return;
+        const fill = !CONTENT_DRIVEN_HEIGHTS.some(value => initialHeight.trim().startsWith(value));
+        overlayContent.style.display = fill ? 'flex' : '';
+        overlayContent.style.flexDirection = fill ? 'column' : '';
+        content.style.flex = fill ? '1 1 auto' : '';
+        // Testata e toolbar inferiore restano alla loro altezza naturale
+        overlayContent.querySelectorAll(':scope > .dx-popup-title, :scope > .dx-popup-bottom')
+            .forEach(el => { el.style.flexShrink = fill ? '0' : ''; });
+    };
     /**
      * Gestore chiamato quando il popup viene mostrato.
      * Calcola e imposta le dimensioni minime del popup in base allo spazio disponibile.
@@ -59,6 +85,7 @@ const TMModal = ({ resizable = true, expandable = false, isModal = true, title =
     const handleShown = () => {
         // Usa requestAnimationFrame per attendere il completamento del rendering
         requestAnimationFrame(() => {
+            applyContentFillLayout();
             if (popupRef.current && popupRef.current.instance) {
                 const instance = popupRef.current.instance();
                 if (instance) {
@@ -85,14 +112,27 @@ const TMModal = ({ resizable = true, expandable = false, isModal = true, title =
     useEffect(() => {
         setInitialWidth(width);
         setInitialHeight(height);
-    }, [width, height]);
+        // Al cambio di dimensioni (es. cambio step) ricentra il popup con un nuovo riferimento oggetto,
+        // annullando l'eventuale spostamento manuale precedente
+        if (recenterOnResize)
+            setPosition({ my: 'center', at: 'center', of: window });
+        // Il token annulla un ridimensionamento manuale, che non cambia width/height
+    }, [width, height, recenterOnResize, sizeResetToken]);
+    // Dimensioni, testata e schermo pieno fanno rigenerare geometria ed elementi del popup:
+    // il layout flex del contenuto va riapplicato dopo il ridisegno (vedi applyContentFillLayout)
+    useEffect(() => {
+        const rafId = requestAnimationFrame(() => applyContentFillLayout());
+        return () => cancelAnimationFrame(rafId);
+    }, [initialWidth, initialHeight, title, isFullScreen, showPopup]);
     const handleResizeStart = () => {
         setIsResizing(true);
     };
     const handleResizeEnd = (e) => {
         setIsResizing(false);
-        setInitialWidth(e.width.toString());
-        setInitialHeight(e.height.toString());
+        // Le dimensioni arrivano in px: senza unità non sarebbero un valore CSS valido
+        setInitialWidth(`${e.width}px`);
+        setInitialHeight(`${e.height}px`);
+        onResized?.({ width: e.width, height: e.height });
     };
     const onHiding = (e) => {
         if (askClosingConfirm)
@@ -101,15 +141,9 @@ const TMModal = ({ resizable = true, expandable = false, isModal = true, title =
             setShowPopup(false);
         onClose && onClose();
     };
-    return (_jsx(_Fragment, { children: isModal ? (_jsx(Popup, { ref: popupRef, showCloseButton: showHeader ? showCloseButton : false, showTitle: showHeader, animation: undefined, minWidth: minWidth, minHeight: minHeight, maxHeight: '95%', maxWidth: '95%', dragEnabled: !isResizing && !isFullScreen, resizeEnabled: resizable && !isFullScreen, position: expandable && isFullScreen ? { my: 'center', at: 'center', of: window } : undefined, width: expandable && isFullScreen ? '95%' : initialWidth, height: expandable && isFullScreen ? '95%' : initialHeight, title: title, visible: showPopup, onShown: handleShown, onResizeStart: handleResizeStart, onResizeEnd: handleResizeEnd, onHiding: onHiding, toolbarItems: showHeader && expandable ? [
-                {
-                    widget: 'dxButton',
-                    location: 'after',
-                    options: {
+    return (_jsx(_Fragment, { children: isModal ? (_jsxs(Popup, { ref: popupRef, showCloseButton: showHeader ? showCloseButton : false, showTitle: showHeader, animation: undefined, minWidth: minWidth, minHeight: minHeight, maxHeight: '95%', maxWidth: '95%', dragEnabled: !isResizing && !isFullScreen, resizeEnabled: resizable && !isFullScreen, position: expandable && isFullScreen ? { my: 'center', at: 'center', of: window } : position, width: expandable && isFullScreen ? '95%' : initialWidth, height: expandable && isFullScreen ? '95%' : initialHeight, title: title, visible: showPopup, onShown: handleShown, onResizeStart: handleResizeStart, onResizeEnd: handleResizeEnd, onHiding: onHiding, children: [showHeader && titleActions && (_jsx(ToolbarItem, { toolbar: 'top', location: 'after', render: () => _jsx(_Fragment, { children: titleActions }) })), showHeader && expandable && (_jsx(ToolbarItem, { toolbar: 'top', location: 'after', widget: 'dxButton', options: {
                         icon: isFullScreen ? svgToString(_jsx(IconWindowMinimize, {})) : svgToString(_jsx(IconWindowMaximize, {})),
                         onClick: () => setIsFullScreen(!isFullScreen)
-                    }
-                }
-            ] : undefined, children: _jsxs("div", { style: { display: 'flex', flexDirection: 'column', height: '100%', width: '100%' }, children: [toolbar && (_jsx(StyledModalToolbar, { children: toolbar })), _jsx("div", { style: { flex: 1, overflow: 'hidden', minHeight: 0 }, children: _jsx(TMCard, { showBorder: false, padding: false, scrollY: true, children: children }) })] }) })) : (_jsxs(StyledModal, { "$isModal": isModal, className: "temp-modal", "$fontSize": fontSize, "$width": initialWidth, "$height": initialHeight, children: [toolbar ? _jsx(StyledModalToolbar, { children: toolbar }) : _jsx(_Fragment, {}), _jsx(StyledModalContext, { children: children })] })) }));
+                    } })), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', height: '100%', width: '100%' }, children: [toolbar && (_jsx(StyledModalToolbar, { children: toolbar })), _jsx("div", { style: { flex: 1, overflow: 'hidden', minHeight: 0 }, children: _jsx(TMCard, { showBorder: false, padding: false, scrollY: true, children: children }) })] })] })) : (_jsxs(StyledModal, { "$isModal": isModal, className: "temp-modal", "$fontSize": fontSize, "$width": initialWidth, "$height": initialHeight, children: [toolbar ? _jsx(StyledModalToolbar, { children: toolbar }) : _jsx(_Fragment, {}), _jsx(StyledModalContext, { children: children })] })) }));
 };
 export default TMModal;

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

@@ -10,6 +10,7 @@ export interface ITMPanelProps {
     children?: React.ReactNode;
     showHeader?: boolean;
     title?: React.ReactNode;
+    enableTitleMarquee?: boolean;
     displayedItemsCount?: number;
     totalItems?: number;
     toolbar?: any;
@@ -17,9 +18,14 @@ export interface ITMPanelProps {
     isVisible?: boolean;
     panelID?: string;
     isActive?: boolean;
+    /** Se fornita, in testata compare il bottone di ricarica: finché la Promise è pendente il pannello mostra il loader */
+    onRefresh?: () => void | Promise<void>;
+    /** Mostra il loader sul contenuto anche per caricamenti non avviati dal bottone di ricarica */
+    isRefreshing?: boolean;
     onActivate?: (panelID: string) => void;
     onActiveChanged?: (isActive: boolean) => void;
     onBack?: () => void;
+    backCaption?: string;
     onClose?: () => void;
     onHeaderDoubleClick?: () => void;
     onMaximize?: (isMaximized: boolean) => void;

package/lib/components/base/TMPanel.js

@@ -1,9 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useRef, useState, forwardRef, useImperativeHandle } from 'react';
-import styled from 'styled-components';
-import { getAppModuleGradient, IconArrowLeft, IconClearButton, IconWindowMaximize, IconWindowMinimize, isPositiveNumber, SDKUI_Localizator } from '../../helper';
+import styled, { css, keyframes } from 'styled-components';
+import { getAppModuleGradient, IconArrowLeft, IconClearButton, IconRefresh, IconWindowMaximize, IconWindowMinimize, isPositiveNumber, SDKUI_Localizator } from '../../helper';
 import TMButton from './TMButton';
-import { Gutters } from '../../utils/theme';
+import { LoadIndicator } from 'devextreme-react/load-indicator';
+import { TMExceptionBoxManager } from './TMPopUp';
+import { Gutters, TMColors } from '../../utils/theme';
 const StyledBackButton = styled.button `
     display: flex;
     align-items: center;
@@ -96,6 +98,110 @@ const StyledPanelContent = styled.div `
         outline: none;
     }
 `;
+// Allineata al TABLET_BREAKPOINT (768) di TMDeviceProvider
+const MOBILE_MEDIA_QUERY = '(max-width: 767.98px)';
+// L'eccedenza da scorrere è "larghezza viewport - larghezza testo", ma nessuna delle due
+// è nota al CSS. La si ottiene componendo due percentuali che si risolvono su box diversi:
+// la track (larga quanto il viewport) va a +100% della PROPRIA larghezza, il testo a -100%
+// della SUA. Le due animazioni hanno stessa durata ed easing, quindi lo scostamento netto
+// in ogni istante è esattamente e(t) * (viewport - testo).
+const panelTitleTrackMarquee = keyframes `
+    0%, 15% { transform: translateX(0); }
+    45%, 55% { transform: translateX(100%); }
+    85%, 100% { transform: translateX(0); }
+`;
+const panelTitleTextMarquee = keyframes `
+    0%, 15% { transform: translateX(0); }
+    45%, 55% { transform: translateX(-100%); }
+    85%, 100% { transform: translateX(0); }
+`;
+// Ritaglia il testo in eccesso: è l'unico box con overflow hidden, la track ci scorre dentro
+const StyledPanelTitleViewport = styled.div `
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    min-width: 0;
+    overflow: hidden;
+    padding: 0 8px;
+`;
+// Larga quanto il viewport: è il metro con cui il -100% del testo viene compensato.
+const StyledPanelTitleTrack = styled.div `
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    align-items: center;
+
+    ${({ $marquee }) => $marquee && css `
+        @media ${MOBILE_MEDIA_QUERY} {
+            animation: ${panelTitleTrackMarquee} 10s ease-in-out infinite;
+
+            @media (prefers-reduced-motion: reduce) {
+                animation: none;
+            }
+        }
+    `}
+`;
+// Senza $marquee resta il troncamento con i puntini di sempre
+const StyledPanelTitle = styled.div `
+    margin: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    ${({ $marquee }) => $marquee && css `
+        @media ${MOBILE_MEDIA_QUERY} {
+            flex: 0 0 auto;
+            width: max-content;
+            min-width: 100%;
+            max-width: none;
+            overflow: visible;
+            text-overflow: clip;
+            animation: ${panelTitleTextMarquee} 10s ease-in-out infinite;
+
+            @media (prefers-reduced-motion: reduce) {
+                animation: none;
+                width: auto;
+                min-width: 0;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+        }
+    `}
+`;
+const refreshSpin = keyframes `
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+`;
+// Fa girare l'icona per tutta la durata del ricaricamento
+const StyledRefreshIcon = styled.span `
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    ${({ $isSpinning }) => $isSpinning && css `
+        animation: ${refreshSpin} 1s linear infinite;
+
+        @media (prefers-reduced-motion: reduce) {
+            animation: none;
+        }
+    `}
+`;
+// Copre il solo contenuto del pannello (StyledPanelContent è position: relative con overflow hidden)
+const StyledPanelLoaderOverlay = styled.div `
+    position: absolute;
+    inset: 0;
+    z-index: 10;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    background: rgba(255, 255, 255, 0.65);
+    border-bottom-right-radius: 10px;
+    border-bottom-left-radius: 10px;
+    color: ${TMColors.primaryColor};
+`;
 /**
  * TMPanel - Pannello con supporto Controlled/Uncontrolled
  *
@@ -103,9 +209,27 @@ const StyledPanelContent = styled.div `
  *   - Se NON passata → Uncontrolled: gestione interna dello stato attivo (plug-and-play)
  *   - Se passata → Controlled: il parent gestisce lo stato tramite onActivate
  */
-const TMPanel = forwardRef(({ allowMaximize = true, color, backgroundColor, backgroundColorContainer, children, showHeader = true, title, totalItems, displayedItemsCount, toolbar, padding = '5px', isVisible = true, panelID = 'tmpanel', isActive, // Questa prop determinerà la modalità
-onActivate, onBack, onClose, onHeaderDoubleClick, onMaximize, onActiveChanged }, ref) => {
+const TMPanel = forwardRef(({ allowMaximize = true, color, backgroundColor, backgroundColorContainer, children, showHeader = true, title, enableTitleMarquee = false, totalItems, displayedItemsCount, toolbar, padding = '5px', isVisible = true, panelID = 'tmpanel', isActive, // Questa prop determinerà la modalità
+onRefresh, isRefreshing, onActivate, onBack, backCaption = SDKUI_Localizator.Back, onClose, onHeaderDoubleClick, onMaximize, onActiveChanged }, ref) => {
     const [isMaximized, setIsMaximized] = useState(false);
+    const [isRefreshingInternal, setIsRefreshingInternal] = useState(false);
+    // Il loader compare sia per il refresh dalla testata sia per i caricamenti segnalati dal contenuto
+    const isBusy = isRefreshing || isRefreshingInternal;
+    const handleRefresh = useCallback(async () => {
+        if (isRefreshingInternal)
+            return;
+        setIsRefreshingInternal(true);
+        // Il finally garantisce che loader e rotellina si fermino anche se il ricaricamento fallisce
+        try {
+            await onRefresh?.();
+        }
+        catch (ex) {
+            TMExceptionBoxManager.show({ exception: ex });
+        }
+        finally {
+            setIsRefreshingInternal(false);
+        }
+    }, [isRefreshingInternal, onRefresh]);
     // Detect device type (e.g., mobile or desktop)
     const deviceType = useDeviceType();
     const isMobile = deviceType === DeviceType.MOBILE;
@@ -157,6 +281,7 @@ onActivate, onBack, onClose, onHeaderDoubleClick, onMaximize, onActiveChanged },
             handleFocusUncontrolled();
         }
     };
+    const titleMarqueeKey = enableTitleMarquee && (typeof title === 'string' || typeof title === 'number') ? String(title) : undefined;
     // handler for external maximize management
     const handleMaximize = () => {
         setIsMaximized(prevState => {
@@ -188,31 +313,19 @@ onActivate, onBack, onClose, onHeaderDoubleClick, onMaximize, onActiveChanged },
                                     flexDirection: 'row',
                                     alignItems: 'center',
                                     flexShrink: 0
-                                }, children: _jsxs(StyledBackButton, { "$isActive": currentIsActive, onClick: () => onBack ? onBack() : null, title: SDKUI_Localizator.Back, children: [_jsx(IconArrowLeft, {}), !isMobile && _jsx("span", { children: SDKUI_Localizator.Back })] }) }), _jsx("div", { style: {
-                                    flex: 1,
-                                    display: 'flex',
-                                    alignItems: 'center',
-                                    justifyContent: 'flex-start',
-                                    minWidth: 0,
-                                    overflow: 'hidden',
-                                    padding: '0 8px'
-                                }, children: _jsxs("div", { style: {
-                                        whiteSpace: 'nowrap',
-                                        overflow: 'hidden',
-                                        textOverflow: 'ellipsis',
-                                        margin: 0
-                                    }, children: [title, isPositiveNumber(displayedItemsCount) && isPositiveNumber(totalItems)
-                                            ? ` (${displayedItemsCount} / ${totalItems})`
-                                            : isPositiveNumber(totalItems)
-                                                ? ` (${totalItems})`
-                                                : ''] }) }), _jsxs("div", { style: {
+                                }, children: _jsxs(StyledBackButton, { "$isActive": currentIsActive, onClick: () => onBack ? onBack() : null, title: backCaption, children: [_jsx(IconArrowLeft, {}), !isMobile && _jsx("span", { children: backCaption })] }) }), _jsx(StyledPanelTitleViewport, { children: _jsx(StyledPanelTitleTrack, { "$marquee": enableTitleMarquee, children: _jsxs(StyledPanelTitle, { "$marquee": enableTitleMarquee, children: [title, isPositiveNumber(displayedItemsCount) && isPositiveNumber(totalItems)
+                                                ? ` (${displayedItemsCount} / ${totalItems})`
+                                                : isPositiveNumber(totalItems)
+                                                    ? ` (${totalItems})`
+                                                    : ''] }) }, titleMarqueeKey) }), _jsxs("div", { style: {
                                     display: 'flex',
                                     flexDirection: 'row',
                                     alignItems: 'center',
                                     gap: '5px',
                                     flexShrink: 0
-                                }, children: [toolbar, allowMaximize && _jsx(TMButton, { color: 'primaryOutline', caption: isMaximized ? SDKUI_Localizator.Minimize : SDKUI_Localizator.Maximize, icon: isMaximized
+                                }, children: [toolbar, onRefresh && _jsx(TMButton, { color: 'primaryOutline', caption: SDKUI_Localizator.Refresh, disabled: isBusy, icon: _jsx(StyledRefreshIcon, { "$isSpinning": isBusy, children: _jsx(IconRefresh, {}) }), btnStyle: 'icon', onClick: handleRefresh }), allowMaximize && _jsx(TMButton, { color: 'primaryOutline', caption: isMaximized ? SDKUI_Localizator.Minimize : SDKUI_Localizator.Maximize, icon: isMaximized
                                             ? _jsx(IconWindowMinimize, { fontSize: 16 })
-                                            : _jsx(IconWindowMaximize, { fontSize: 16 }), btnStyle: 'icon', onClick: handleMaximize }), onClose && _jsx(TMButton, { color: 'primaryOutline', caption: SDKUI_Localizator.Close, icon: _jsx(IconClearButton, {}), btnStyle: 'icon', onClick: () => { setIsMaximized(false); onClose?.(); } })] })] }) }), _jsx(StyledPanelContent, { "$height": showHeader ? "calc(100% - 40px)" : "100%", "$padding": padding, "$backgroundColor": backgroundColorContainer ?? `#FFFFFF`, children: children })] }));
+                                            : _jsx(IconWindowMaximize, { fontSize: 16 }), btnStyle: 'icon', onClick: handleMaximize }), onClose && _jsx(TMButton, { color: 'primaryOutline', caption: SDKUI_Localizator.Close, icon: _jsx(IconClearButton, {}), btnStyle: 'icon', onClick: () => { setIsMaximized(false); onClose?.(); } })] })] }) }), _jsxs(StyledPanelContent, { "$height": showHeader ? "calc(100% - 40px)" : "100%", "$padding": padding, "$backgroundColor": backgroundColorContainer ?? `#FFFFFF`, children: [children, isBusy &&
+                        _jsxs(StyledPanelLoaderOverlay, { children: [_jsx(LoadIndicator, { height: 40, width: 40 }), _jsx("div", { children: SDKUI_Localizator.Loading })] })] })] }));
 });
 export default TMPanel;

package/lib/components/base/TMPopUp.js

@@ -60,6 +60,9 @@ export const sanitizeException = (exception) => {
     catch {
         return exception;
     }
+    if (plain && typeof plain === 'object' && !Array.isArray(plain) && plain.message === undefined && typeof exception.message === 'string') {
+        plain.message = exception.message;
+    }
     return redactSensitiveValue(plain);
 };
 const StyledExeptionToolbar = styled.div `

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

@@ -9,6 +9,7 @@ interface ITMTooltipProps extends ITooltipOptions {
     hideAfterDelay?: boolean;
     parentStyle?: React.CSSProperties;
     childStyle?: React.CSSProperties;
+    allowContentInteraction?: boolean;
 }
-declare const TMTooltip: ({ children, position, content, hideAfterDelay, parentStyle, childStyle }: ITMTooltipProps) => React.JSX.Element;
+declare const TMTooltip: ({ children, position, content, hideAfterDelay, parentStyle, childStyle, allowContentInteraction }: ITMTooltipProps) => React.JSX.Element;
 export default TMTooltip;

package/lib/components/base/TMTooltip.js

@@ -1,20 +1,36 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { Tooltip } from 'devextreme-react/tooltip';
 import { genUniqueId } from '../../helper';
 import { DeviceType, useDeviceType } from './TMDeviceProvider';
-const TMTooltip = ({ children, position, content, hideAfterDelay, parentStyle, childStyle }) => {
+/** Tempo per spostare il mouse dall'elemento al contenuto del tooltip, quando è interattivo */
+const HIDE_DELAY_MS = 400;
+const TMTooltip = ({ children, position, content, hideAfterDelay, parentStyle, childStyle, allowContentInteraction = false }) => {
     const [showTooltip, setShowTooltip] = useState(false);
-    const [id, setID] = useState('');
-    useEffect(() => { setID(genUniqueId()); }, [children]);
+    const [id] = useState(() => genUniqueId());
+    const hideTimerRef = useRef();
     useEffect(() => {
-        window.addEventListener('click', () => setShowTooltip(false));
-        return () => window.removeEventListener('click', () => setShowTooltip(false));
+        const hide = () => setShowTooltip(false);
+        window.addEventListener('click', hide);
+        return () => window.removeEventListener('click', hide);
     }, []);
+    useEffect(() => { return () => clearTimeout(hideTimerRef.current); }, []);
     const deviceType = useDeviceType();
-    return (_jsxs("div", { style: parentStyle, children: [_jsx("div", { id: `idContainerTooltip${id}`, style: { display: 'flex', alignItems: 'center', height: 'max-content', width: 'max-content', ...childStyle }, onMouseEnter: () => { setShowTooltip(true); }, onMouseLeave: () => { setShowTooltip(false); }, onTouchStart: () => { setShowTooltip(true); }, onClick: () => { if (deviceType === DeviceType.DESKTOP || !hideAfterDelay)
+    const cancelHide = () => clearTimeout(hideTimerRef.current);
+    const show = () => { cancelHide(); setShowTooltip(true); };
+    const hide = () => {
+        cancelHide();
+        if (!allowContentInteraction) {
+            setShowTooltip(false);
+            return;
+        }
+        hideTimerRef.current = setTimeout(() => setShowTooltip(false), HIDE_DELAY_MS);
+    };
+    return (_jsxs("div", { style: parentStyle, children: [_jsx("div", { id: `idContainerTooltip${id}`, style: { display: 'flex', alignItems: 'center', height: 'max-content', width: 'max-content', ...childStyle }, onMouseEnter: show, onMouseLeave: hide, onTouchStart: show, onClick: () => { if (deviceType === DeviceType.DESKTOP || !hideAfterDelay)
                     return; setTimeout(() => { setShowTooltip(false); }, 1500); }, onTouchEnd: () => { if (deviceType === DeviceType.DESKTOP || !hideAfterDelay)
                     return; setTimeout(() => { setShowTooltip(false); }, 1500); }, children: children }), content &&
-                _jsx(Tooltip, { target: `#idContainerTooltip${id}`, hideOnOutsideClick: true, visible: showTooltip, position: position ?? 'bottom', onHidden: () => setShowTooltip(false), children: content })] }));
+                _jsx(Tooltip, { target: `#idContainerTooltip${id}`, hideOnOutsideClick: true, visible: showTooltip, position: position ?? 'bottom', onHidden: () => setShowTooltip(false), children: allowContentInteraction
+                        ? _jsx("div", { style: { pointerEvents: 'all' }, onMouseEnter: cancelHide, onMouseLeave: hide, children: content })
+                        : content })] }));
 };
 export default TMTooltip;

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

@@ -31,11 +31,17 @@ interface ITMTreeViewProps {
 }
 declare const TMTreeView: ({ dataSource, focusedItem, selectedItems, allowMultipleSelection, onDataChanged, calculateItemsForNode, itemRender, onNodeUpdate, onFocusedItemChanged, onSelectionChanged, shouldDelayFocusOnEvent, onItemContextMenu, autoSelectChildren, itemsPerPage, showLoadMoreButton, enableVirtualization }: ITMTreeViewProps) => React.JSX.Element;
 export default TMTreeView;
-export declare const StyledTreeContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-export declare const StyledItemContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-export declare const StyledTreeNode: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$isSelected"> & {
+export declare const StyledTreeContainer: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: React.CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const StyledItemContent: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: React.CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const StyledTreeNode: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: React.CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, {
     $isSelected?: boolean;
-}, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$isSelected"> & {
-    $isSelected?: boolean;
-}, never>>> & string;
-export declare const StyledStickyPaginator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+}>> & string;
+export declare const StyledStickyPaginator: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: React.CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;