@topconsultnpm/sdkui-react 6.21.0-t2 → 6.21.0-t3

package/lib/components/base/TMModal.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useState, useEffect, useRef } from 'react';
 import { Popup } from 'devextreme-react';
 import styled from 'styled-components';
-import TMLayoutContainer, { TMCard, TMLayoutItem } from './TMLayout';
+import { TMCard } from './TMLayout';
 import { FontSize, TMColors } from '../../utils/theme';
 import { IconWindowMaximize, IconWindowMinimize, svgToString } from '../../helper';
 const StyledModal = styled.div `
@@ -110,6 +110,6 @@ const TMModal = ({ resizable = true, expandable = false, isModal = true, title =
                         onClick: () => setIsFullScreen(!isFullScreen)
                     }
                 }
-            ] : undefined, children: _jsxs(TMLayoutContainer, { children: [toolbar && (_jsx(TMLayoutItem, { height: "40px", children: _jsx(StyledModalToolbar, { children: toolbar }) })), _jsx(TMLayoutItem, { height: toolbar ? 'calc(100% - 40px)' : '100%', 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 })] })) }));
+            ] : 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 })] })) }));
 };
 export default TMModal;

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

@@ -24,6 +24,7 @@ interface ITMExceptionBox extends ITMPopup {
     exception?: any;
     onClose?: () => void;
 }
+export declare const sanitizeException: (exception: any) => any;
 declare class TMExceptionBoxManager {
     static show({ title, exception, onClose }: ITMExceptionBox): void;
 }

package/lib/components/base/TMPopUp.js

@@ -23,6 +23,45 @@ export var ButtonNames;
 // Dimensioni minime di default per i popup
 const DEFAULT_MIN_WIDTH = 500;
 const DEFAULT_MIN_HEIGHT = 400;
+// filtr password from all errors.
+const SENSITIVE_KEY = 'password';
+const redactSensitiveJsonString = (value) => {
+    const trimmed = value.trim();
+    const looksLikeJson = (trimmed.startsWith('{') && trimmed.endsWith('}')) || (trimmed.startsWith('[') && trimmed.endsWith(']'));
+    if (!looksLikeJson)
+        return value;
+    try {
+        return JSON.stringify(redactSensitiveValue(JSON.parse(value)));
+    }
+    catch {
+        return value;
+    }
+};
+const redactSensitiveValue = (value) => {
+    if (Array.isArray(value))
+        return value.map(redactSensitiveValue);
+    if (typeof value === 'string')
+        return redactSensitiveJsonString(value);
+    if (!value || typeof value !== 'object')
+        return value;
+    const result = {};
+    for (const key of Object.keys(value)) {
+        result[key] = key.toLowerCase() === SENSITIVE_KEY ? '***' : redactSensitiveValue(value[key]);
+    }
+    return result;
+};
+export const sanitizeException = (exception) => {
+    if (exception === null || exception === undefined)
+        return exception;
+    let plain;
+    try {
+        plain = JSON.parse(JSON.stringify(exception));
+    }
+    catch {
+        return exception;
+    }
+    return redactSensitiveValue(plain);
+};
 const StyledExeptionToolbar = styled.div `
     display: flex;
     flex-direction: row;
@@ -273,6 +312,7 @@ const TMExceptionBox = ({ resizable = false, exception, title = `${SDK_Globals.a
     let dateString = d.getDate() + '/' + d.getMonth() + 1 + '/' + d.getFullYear();
     let timeString = d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds() + ':' + d.getMilliseconds();
     let message = getExceptionMessage(exception);
+    const safeException = useMemo(() => sanitizeException(exception), [exception]);
     let deviceType = useDeviceType();
     /**
      * Gestore chiamato quando il popup viene mostrato.
@@ -304,17 +344,34 @@ const TMExceptionBox = ({ resizable = false, exception, title = `${SDK_Globals.a
     };
     const getFullMessage = () => {
         let fullMessage = '';
-        fullMessage += `${d}\n${'-' + JSON.stringify(exception)}\n` + `-${SDK_Globals.appModule}: ${SDK_Globals.appVersion}\n` + `-SDKUI: ${SDK_Globals.sdkuiVersion}\n` + `-SDK: ${SDK_Globals.sdkVersion}\n`;
+        fullMessage += `${d}\n${'-' + JSON.stringify(safeException)}\n` + `-${SDK_Globals.appModule}: ${SDK_Globals.appVersion}\n` + `-SDKUI: ${SDK_Globals.sdkuiVersion}\n` + `-SDK: ${SDK_Globals.sdkVersion}\n`;
         return fullMessage.replaceAll('{', '').replaceAll('}', '').replaceAll(`":`, '=').replaceAll(`,"`, '\n').replaceAll(`"`, '');
     };
     const copyToClipBoard = (e) => {
         navigator.clipboard.writeText(e);
         ShowAlert({ mode: 'success', duration: 3000, message: SDKUI_Localizator.CopiedSuccessfully, title: 'Success' });
     };
+    const handleClose = useCallback(() => {
+        onClose?.();
+        setIsVisible(false);
+    }, [onClose]);
+    const handleKeyDown = useCallback((e) => {
+        if (e.key === 'Enter' || e.key === 'Escape') {
+            e.preventDefault();
+            e.stopPropagation();
+            handleClose();
+        }
+    }, [handleClose]);
+    useEffect(() => {
+        if (!isVisible)
+            return;
+        window.addEventListener('keydown', handleKeyDown, true);
+        return () => window.removeEventListener('keydown', handleKeyDown, true);
+    }, [isVisible, handleKeyDown]);
     const ExceptionToolbar = () => {
         return (_jsxs(StyledExeptionToolbar, { children: [_jsx(TMButton, { color: 'primaryOutline', btnStyle: 'text', onClick: () => copyToClipBoard(getFullMessage()), caption: SDKUI_Localizator.CopyToClipboard, showTooltip: false }), _jsx(TMButton, { btnStyle: 'text', onClick: () => { onClose?.(); setIsVisible(false); }, caption: SDKUI_Localizator.Close, showTooltip: false, color: 'error' })] }));
     };
-    return (_jsx(Popup, { ref: popupRef, resizeEnabled: resizable, visible: isVisible, onHidden: () => { onClose?.(); setIsVisible(false); }, onShown: handleShown, showCloseButton: true, width: calcResponsiveSizes(deviceType, '600px', '400px', '350px'), height: '350px', minWidth: minWidth, minHeight: minHeight, maxHeight: '95%', maxWidth: '95%', title: title, children: _jsxs(TMLayoutContainer, { children: [_jsx(TMLayoutItem, { height: 'calc(100% - 50px)', children: _jsxs(TMTabGroup, { validationItems: [], children: [_jsxs(TMTab, { label: SDKUI_Localizator.Error, children: [_jsxs(TabContextContainer, { style: { height: 'calc(100% - 68px )', paddingRight: '40px' }, children: [_jsxs("p", { children: [" ", _jsx("span", { style: { color: TMColors.primary }, children: "Messaggio: " }), " ", message] }), _jsx("div", { style: { display: 'flex', flexDirection: 'column', justifyContent: 'flex-start', alignItems: 'flex-start', gap: '5px', marginTop: '5px' }, children: _jsxs("div", { children: [_jsxs("span", { style: { color: TMColors.primary }, children: [SDKUI_Localizator.Date, "  ", SDKUI_Localizator.Time.toLowerCase(), ": "] }), d.toString()] }) })] }), _jsxs(StyledCopyInclipBoardButtonContainer, { children: [" ", _jsx(TMButton, { color: 'primaryOutline', onClick: () => copyToClipBoard(`Date: ${dateString}\nTime: ${timeString}\nMessage: ${message}`), btnStyle: 'toolbar', icon: _jsx(IconCopy, { fontSize: 18 }), caption: SDKUI_Localizator.CopyToClipboard }), " "] })] }), _jsxs(TMTab, { label: SDKUI_Localizator.CompleteError, children: [_jsx(TabContextContainer, { style: { paddingRight: '40px' }, children: JSON.stringify(exception).replaceAll('{', '').replaceAll('}', '').split(`,"`).map((t, index) => (_jsxs("div", { style: { padding: '5px', borderBottom: '1px solid rgb(180,180,180)' }, children: ["\u261B", ' ' + (t.toLowerCase().includes('detail') ? (t.replaceAll(`"`, '').replaceAll(`:`, ': ').replaceAll(String.fromCharCode(92), '')) : (t.replaceAll(`"`, '').replaceAll(`:`, ': ')))] }, index))) }), _jsxs(StyledCopyInclipBoardButtonContainer, { children: [" ", _jsx(TMButton, { color: 'primaryOutline', onClick: () => copyToClipBoard(JSON.stringify(exception).replaceAll('{', '').replaceAll('}', '').replaceAll(',', '\n')), btnStyle: 'toolbar', icon: _jsx(IconCopy, { fontSize: 18 }), caption: SDKUI_Localizator.CopyToClipboard }), " "] })] }), _jsxs(TMTab, { label: SDKUI_Localizator.Details, children: [_jsxs(TabContextContainer, { children: [_jsxs(StyledAppVersionText, { "$color": TMColors.primary, children: [SDK_Globals.appModule, " ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDK_Globals.appVersion })] }), _jsxs(StyledAppVersionText, { "$color": TMColors.tertiary, children: ["SDKUI: ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDK_Globals.sdkuiVersion })] }), _jsxs(StyledAppVersionText, { "$color": TMColors.success, children: ["SDK : ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDK_Globals.sdkVersion })] })] }), _jsxs(StyledCopyInclipBoardButtonContainer, { children: [" ", _jsx(TMButton, { color: 'primaryOutline', onClick: () => copyToClipBoard(`-${SDK_Globals.appModule}: ${SDK_Globals.appVersion}\n` + `-SDKUI: ${SDK_Globals.sdkuiVersion}\n` + `-SDK: ${SDK_Globals.sdkVersion}\n`), btnStyle: 'toolbar', icon: _jsx(IconCopy, { fontSize: 18 }), caption: SDKUI_Localizator.CopyToClipboard }), " "] })] })] }) }), _jsx(TMLayoutItem, { height: '40px', children: _jsx(ExceptionToolbar, {}) })] }) }));
+    return (_jsx(Popup, { ref: popupRef, resizeEnabled: resizable, visible: isVisible, onHidden: () => { onClose?.(); setIsVisible(false); }, onShown: handleShown, showCloseButton: true, width: calcResponsiveSizes(deviceType, '600px', '400px', '350px'), height: '350px', minWidth: minWidth, minHeight: minHeight, maxHeight: '95%', maxWidth: '95%', title: title, children: _jsxs(TMLayoutContainer, { children: [_jsx(TMLayoutItem, { height: 'calc(100% - 50px)', children: _jsxs(TMTabGroup, { validationItems: [], children: [_jsxs(TMTab, { label: SDKUI_Localizator.Error, children: [_jsxs(TabContextContainer, { style: { height: 'calc(100% - 68px )', paddingRight: '40px' }, children: [_jsxs("p", { children: [" ", _jsx("span", { style: { color: TMColors.primary }, children: "Messaggio: " }), " ", message] }), _jsx("div", { style: { display: 'flex', flexDirection: 'column', justifyContent: 'flex-start', alignItems: 'flex-start', gap: '5px', marginTop: '5px' }, children: _jsxs("div", { children: [_jsxs("span", { style: { color: TMColors.primary }, children: [SDKUI_Localizator.Date, "  ", SDKUI_Localizator.Time.toLowerCase(), ": "] }), d.toString()] }) })] }), _jsxs(StyledCopyInclipBoardButtonContainer, { children: [" ", _jsx(TMButton, { color: 'primaryOutline', onClick: () => copyToClipBoard(`Date: ${dateString}\nTime: ${timeString}\nMessage: ${message}`), btnStyle: 'toolbar', icon: _jsx(IconCopy, { fontSize: 18 }), caption: SDKUI_Localizator.CopyToClipboard }), " "] })] }), _jsxs(TMTab, { label: SDKUI_Localizator.CompleteError, children: [_jsx(TabContextContainer, { style: { paddingRight: '40px' }, children: JSON.stringify(safeException).replaceAll('{', '').replaceAll('}', '').split(`,"`).map((t, index) => (_jsxs("div", { style: { padding: '5px', borderBottom: '1px solid rgb(180,180,180)' }, children: ["\u261B", ' ' + (t.toLowerCase().includes('detail') ? (t.replaceAll(`"`, '').replaceAll(`:`, ': ').replaceAll(String.fromCharCode(92), '')) : (t.replaceAll(`"`, '').replaceAll(`:`, ': ')))] }, index))) }), _jsxs(StyledCopyInclipBoardButtonContainer, { children: [" ", _jsx(TMButton, { color: 'primaryOutline', onClick: () => copyToClipBoard(JSON.stringify(safeException).replaceAll('{', '').replaceAll('}', '').replaceAll(',', '\n')), btnStyle: 'toolbar', icon: _jsx(IconCopy, { fontSize: 18 }), caption: SDKUI_Localizator.CopyToClipboard }), " "] })] }), _jsxs(TMTab, { label: SDKUI_Localizator.Details, children: [_jsxs(TabContextContainer, { children: [_jsxs(StyledAppVersionText, { "$color": TMColors.primary, children: [SDK_Globals.appModule, " ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDK_Globals.appVersion })] }), _jsxs(StyledAppVersionText, { "$color": TMColors.tertiary, children: ["SDKUI: ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDK_Globals.sdkuiVersion })] }), _jsxs(StyledAppVersionText, { "$color": TMColors.success, children: ["SDK : ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDK_Globals.sdkVersion })] })] }), _jsxs(StyledCopyInclipBoardButtonContainer, { children: [" ", _jsx(TMButton, { color: 'primaryOutline', onClick: () => copyToClipBoard(`-${SDK_Globals.appModule}: ${SDK_Globals.appVersion}\n` + `-SDKUI: ${SDK_Globals.sdkuiVersion}\n` + `-SDK: ${SDK_Globals.sdkVersion}\n`), btnStyle: 'toolbar', icon: _jsx(IconCopy, { fontSize: 18 }), caption: SDKUI_Localizator.CopyToClipboard }), " "] })] })] }) }), _jsx(TMLayoutItem, { height: '40px', children: _jsx(ExceptionToolbar, {}) })] }) }));
 };
 class TMExceptionBoxManager {
     static show({ title, exception, onClose }) {

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

@@ -1,13 +1,16 @@
+import React from 'react';
 interface ITMSpinner {
     backgroundColor?: string;
     fontSize?: string;
     description?: string;
     width?: string;
     flat?: boolean;
+    onCancel?: () => void;
+    cancelText?: string;
 }
-declare const Spinner: ({ backgroundColor, description, fontSize, width, flat }: ITMSpinner) => import("react/jsx-runtime").JSX.Element;
+declare const Spinner: ({ backgroundColor, description, fontSize, width, flat, onCancel, cancelText }: ITMSpinner) => React.JSX.Element;
 declare class TMSpinner {
-    static show({ description, backgroundColor, fontSize, flat }?: ITMSpinner): void;
+    static show({ description, backgroundColor, fontSize, flat, onCancel, cancelText }?: ITMSpinner): void;
     static hide(): void;
 }
 export { Spinner };

package/lib/components/base/TMSpinner.js

@@ -32,7 +32,7 @@ const StyledSpinnerWrapper = styled.div `
     width: ${props => props.$width || 'fit-content'};
     height: fit-content;
     max-width: 250px;
-    max-height: 200px;
+    max-height: ${props => props.$hasCancel ? '280px' : '200px'};
     padding: 10px;
     border-radius: 5px;
     background-color: ${props => props.$flat ? 'transparent' : '#fcfcfc'};
@@ -134,22 +134,49 @@ const StyledSpinnerAnimation = styled.div `
 const StyledSpinnerDescription = styled.div `
     font-size: ${props => props.$fontSize || FontSize.defaultFontSize};
     text-align: center;
+    white-space: pre-line;
 `;
-const Spinner = ({ backgroundColor = 'transparent', description = '', fontSize = FontSize.defaultFontSize, width = 'fit-content', flat = false }) => {
-    return (_jsx(StyledSpinnerContainer, { "$backgroundColor": backgroundColor, children: _jsxs(StyledSpinnerWrapper, { "$width": width, "$flat": flat, children: [_jsxs("div", { style: { position: 'relative', width: '80px', height: '80px' }, children: [_jsx("img", { style: {
+// Pulsante Annulla sotto lo spinner
+const StyledCancelButton = styled.button `
+    margin-top: 15px;
+    padding: 8px 20px;
+    font-size: 14px;
+    font-weight: 500;
+    color: #fff;
+    background-color: #d12a1c;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.2s ease, transform 0.1s ease;
+
+    &:hover {
+        background-color: #b8241a;
+    }
+
+    &:active {
+        transform: scale(0.98);
+    }
+`;
+const Spinner = ({ backgroundColor = 'transparent', description = '', fontSize = FontSize.defaultFontSize, width = 'fit-content', flat = false, onCancel, cancelText = 'Annulla' }) => {
+    return (_jsx(StyledSpinnerContainer, { "$backgroundColor": backgroundColor, children: _jsxs(StyledSpinnerWrapper, { "$width": width, "$flat": flat, "$hasCancel": !!onCancel, children: [_jsxs("div", { style: { position: 'relative', width: '80px', height: '80px' }, children: [_jsx("img", { style: {
                                 position: 'absolute',
                                 top: '50%',
                                 left: '50%',
                                 transform: 'translate(-54%, -54%)'
-                            }, src: six, width: 35, alt: "" }), _jsxs(StyledSpinnerAnimation, { children: [_jsx("div", {}), _jsx("div", {}), _jsx("div", {}), _jsx("div", {}), _jsx("div", {}), _jsx("div", {}), _jsx("div", {}), _jsx("div", {})] })] }), _jsx(StyledSpinnerDescription, { "$fontSize": fontSize, children: description })] }) }));
+                            }, src: six, width: 35, alt: "" }), _jsxs(StyledSpinnerAnimation, { children: [_jsx("div", {}), _jsx("div", {}), _jsx("div", {}), _jsx("div", {}), _jsx("div", {}), _jsx("div", {}), _jsx("div", {}), _jsx("div", {})] })] }), _jsx(StyledSpinnerDescription, { "$fontSize": fontSize, children: description }), onCancel && (_jsx(StyledCancelButton, { onClick: onCancel, children: cancelText }))] }) }));
 };
 class TMSpinner {
-    static show({ description, backgroundColor, fontSize, flat } = { backgroundColor: 'transparent', description: '', fontSize: FontSize.defaultFontSize, flat: false }) {
+    static show({ description, backgroundColor, fontSize, flat, onCancel, cancelText } = {
+        backgroundColor: 'transparent',
+        description: '',
+        fontSize: FontSize.defaultFontSize,
+        flat: false
+    }) {
         let container = document.createElement('div');
         container.setAttribute("id", 'tm-spinner-temporary-container');
         document.body.appendChild(container);
         const root = ReactDOM.createRoot(container);
-        root.render(_jsx(React.StrictMode, { children: _jsx(Spinner, { backgroundColor: backgroundColor, fontSize: fontSize, description: description, flat: flat }) }));
+        root.render(_jsx(React.StrictMode, { children: _jsx(Spinner, { backgroundColor: backgroundColor, fontSize: fontSize, description: description, flat: flat, onCancel: onCancel, cancelText: cancelText }) }));
     }
     static hide() {
         let container = document.getElementById('tm-spinner-temporary-container');

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

@@ -1,3 +1,4 @@
+import React from 'react';
 import { ValidationItem } from '@topconsultnpm/sdk-ts';
 export interface ITMTabProps {
     title: string;
@@ -7,14 +8,14 @@ export declare const TMTab: ({ label, propsToBeValidated, children }: {
     label?: string;
     propsToBeValidated?: string[] | undefined;
     children?: any;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => React.JSX.Element;
 export declare const TMTabItemBadge: ({ vil }: {
     vil: ValidationItem[];
-}) => import("react/jsx-runtime").JSX.Element;
+}) => React.JSX.Element;
 declare const TMTabGroup: ({ children, fontSize, validationItems, onTabIndexChanged }: {
     onTabIndexChanged?: (e: number) => void;
     children: any;
     fontSize?: string;
     validationItems?: ValidationItem[];
-}) => import("react/jsx-runtime").JSX.Element;
+}) => React.JSX.Element;
 export default TMTabGroup;

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

@@ -10,5 +10,5 @@ interface ITMTooltipProps extends ITooltipOptions {
     parentStyle?: React.CSSProperties;
     childStyle?: React.CSSProperties;
 }
-declare const TMTooltip: ({ children, position, content, hideAfterDelay, parentStyle, childStyle }: ITMTooltipProps) => import("react/jsx-runtime").JSX.Element;
+declare const TMTooltip: ({ children, position, content, hideAfterDelay, parentStyle, childStyle }: ITMTooltipProps) => React.JSX.Element;
 export default TMTooltip;

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

@@ -28,7 +28,7 @@ interface ITMTreeViewProps<T extends ITMTreeItem> {
     itemsPerPage?: number;
     showLoadMoreButton?: boolean;
 }
-declare const TMTreeView: <T extends ITMTreeItem>({ dataSource, focusedItem, selectedItems, allowMultipleSelection, onDataChanged, calculateItemsForNode, itemRender, onNodeUpdate, onFocusedItemChanged, onSelectionChanged, shouldDelayFocusOnEvent, onItemContextMenu, autoSelectChildren, itemsPerPage, showLoadMoreButton }: ITMTreeViewProps<T>) => import("react/jsx-runtime").JSX.Element;
+declare const TMTreeView: <T extends ITMTreeItem>({ dataSource, focusedItem, selectedItems, allowMultipleSelection, onDataChanged, calculateItemsForNode, itemRender, onNodeUpdate, onFocusedItemChanged, onSelectionChanged, shouldDelayFocusOnEvent, onItemContextMenu, autoSelectChildren, itemsPerPage, showLoadMoreButton }: ITMTreeViewProps<T>) => React.JSX.Element;
 export default TMTreeView;
 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"> & {
     $isSelected?: boolean;

package/lib/components/base/TMTreeView.js

@@ -138,22 +138,19 @@ const TMTreeView = ({ dataSource = [], focusedItem, selectedItems = [], allowMul
         }
         if (delayFocus) {
             // Logica per il ritardo del focus (es. click singolo su icona desktop, gestito dal padre)
-            if (clickTimeoutRef.current) {
-                // Questo è il secondo click di un potenziale doppio click.
-                // Annulla l'azione di focus dal click singolo precedente.
-                clearTimeout(clickTimeoutRef.current);
-                clickTimeoutRef.current = null;
-                lastClickedNodeKeyRef.current = undefined;
-                return; // Non attivare onFocusedItemChanged per il doppio click
+            // Il focus viene ritardato per permettere al doppio click di registrarsi sull'icona,
+            // ma il focus avviene comunque (sia con click singolo che doppio)
+            if (!clickTimeoutRef.current) {
+                // Primo click: imposta il timer per il focus
+                lastClickedNodeKeyRef.current = node.key;
+                clickTimeoutRef.current = setTimeout(() => {
+                    onFocusedItemChanged?.(node);
+                    clickTimeoutRef.current = null;
+                    lastClickedNodeKeyRef.current = undefined;
+                }, 200);
             }
-            // Primo click di un potenziale doppio click o un click singolo che necessita di ritardo
-            lastClickedNodeKeyRef.current = node.key;
-            clickTimeoutRef.current = setTimeout(() => {
-                // Se il timer scade, significa che è stato solo un click singolo.
-                onFocusedItemChanged?.(node);
-                clickTimeoutRef.current = null;
-                lastClickedNodeKeyRef.current = undefined;
-            }, 200);
+            // Se c'è già un timer attivo (secondo click di doppio click), non fare nulla
+            // Il focus avverrà comunque quando scade il timer del primo click
         }
         else {
             // Logica per il focus immediato (per tutti gli altri click, o se shouldDelayFocusOnEvent è false)

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

@@ -1,8 +1,9 @@
+import React from 'react';
 interface TMUserAvatarProps {
     displayName: string;
     nameForColorCalculation: string;
     tooltipName?: string;
     returnType?: 'jsx' | 'svg';
 }
-declare const TMUserAvatar: (props: TMUserAvatarProps) => string | import("react/jsx-runtime").JSX.Element;
+declare const TMUserAvatar: (props: TMUserAvatarProps) => string | React.JSX.Element;
 export default TMUserAvatar;

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

@@ -1,5 +1,6 @@
+import React from 'react';
 import { ValidationItem } from '@topconsultnpm/sdk-ts';
 declare const TMVilViewer: ({ vil }: {
     vil?: ValidationItem[];
-}) => import("react/jsx-runtime").JSX.Element | null;
+}) => React.JSX.Element | null;
 export default TMVilViewer;

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

@@ -1,3 +1,4 @@
+import React from 'react';
 import { ITMLayoutContainerProps } from './TMLayout';
 interface ITMWaitPanelProps {
     title?: string;
@@ -12,8 +13,9 @@ interface ITMWaitPanelProps {
     isCancelable?: boolean;
     abortController?: AbortController;
     onAbortClick?: (abortController: AbortController | undefined) => void;
+    useHighZIndex?: boolean;
 }
-export declare const TMWaitPanel: (props: ITMWaitPanelProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TMWaitPanel: (props: ITMWaitPanelProps) => React.JSX.Element;
 interface ITMLayoutWaitingContainerProps extends ITMLayoutContainerProps {
     showWaitPanel?: boolean;
     waitPanelTitle?: string;
@@ -27,6 +29,7 @@ interface ITMLayoutWaitingContainerProps extends ITMLayoutContainerProps {
     waitPanelMaxValueSecondary?: number;
     isCancelable?: boolean;
     abortController?: AbortController;
+    usePortal?: boolean;
 }
-export declare const TMLayoutWaitingContainer: ({ showWaitPanel, showWaitPanelPrimary, showWaitPanelSecondary, waitPanelTitle, waitPanelTextSecondary, waitPanelValueSecondary, waitPanelMaxValueSecondary, waitPanelTextPrimary, waitPanelValuePrimary, waitPanelMaxValuePrimary, isCancelable, abortController, gap, onClick, justifyContent, alignItems, children, direction }: ITMLayoutWaitingContainerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TMLayoutWaitingContainer: ({ showWaitPanel, showWaitPanelPrimary, showWaitPanelSecondary, waitPanelTitle, waitPanelTextSecondary, waitPanelValueSecondary, waitPanelMaxValueSecondary, waitPanelTextPrimary, waitPanelValuePrimary, waitPanelMaxValuePrimary, isCancelable, abortController, usePortal, gap, onClick, justifyContent, alignItems, children, direction }: ITMLayoutWaitingContainerProps) => React.JSX.Element;
 export {};

package/lib/components/base/TMWaitPanel.js

@@ -1,4 +1,5 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { createPortal } from 'react-dom';
 import styled from 'styled-components';
 import TMLayoutContainer from './TMLayout';
 import { SDKUI_Localizator } from '../../helper';
@@ -8,7 +9,7 @@ const StyledWaitPanelOverlay = styled.div `
     position: fixed;
     top: 0;
     left: 0;
-    z-index: 1501;
+    z-index: ${props => props.$useHighZIndex ? 2000000001 : 1501};
     transition: all; 
     overflow: visible; 
     background-color: rgba(0, 0, 0, 0.4);
@@ -36,7 +37,7 @@ const StyledProgressText = styled.p ` font-weight: bold; color: #333; margin: 0;
 const StyledMessage = styled.p ` color: #666; font-size: 0.9em; margin-top: 10px; `;
 const StyledAbortButton = styled.button ` background: #ff4d4d; color: white; border: none; border-radius: 5px; padding: 10px 20px; font-size: 1em; cursor: pointer; margin-top: 20px; &:hover { background: #ff6666; } `;
 export const TMWaitPanel = (props) => {
-    const { title, showPrimary, textPrimary, valuePrimary, maxValuePrimary, showSecondary, textSecondary, valueSecondary, maxValueSecondary, isCancelable, abortController, onAbortClick } = props;
+    const { title, showPrimary, textPrimary, valuePrimary, maxValuePrimary, showSecondary, textSecondary, valueSecondary, maxValueSecondary, isCancelable, abortController, onAbortClick, useHighZIndex } = props;
     const calculateProgress = (value = 0, maxValue = 0) => {
         if (maxValue === 0)
             return 0;
@@ -45,10 +46,11 @@ export const TMWaitPanel = (props) => {
     };
     let progressValue1 = calculateProgress(valuePrimary, maxValuePrimary);
     let progressValue2 = calculateProgress(valueSecondary, maxValueSecondary);
-    return (_jsx(StyledWaitPanelOverlay, { children: _jsxs(StyledWaitPanel, { children: [_jsx(StyledTitle, { children: title }), showPrimary &&
+    return (_jsx(StyledWaitPanelOverlay, { "$useHighZIndex": useHighZIndex, children: _jsxs(StyledWaitPanel, { children: [_jsx(StyledTitle, { children: title }), showPrimary &&
                     _jsxs("div", { style: { width: '100%', height: '100px' }, children: [_jsx(StyledProgressBarContainer, { children: _jsx(StyledProgressBar, { style: { width: `${progressValue1.toFixed(2)}%` } }) }), _jsxs(StyledProgressText, { children: [progressValue1.toFixed(2), "%"] }), _jsx(StyledMessage, { children: textPrimary })] }), showSecondary &&
                     _jsxs("div", { style: { width: '100%', height: '100px' }, children: [_jsx(StyledProgressBarContainer, { children: _jsx(StyledProgressBar, { style: { width: `${progressValue2.toFixed(2)}%` } }) }), _jsxs(StyledProgressText, { children: [progressValue2.toFixed(2), "%"] }), _jsx(StyledMessage, { children: textSecondary })] }), isCancelable && _jsx(StyledAbortButton, { onClick: () => onAbortClick?.(abortController), children: SDKUI_Localizator.Abort })] }) }));
 };
-export const TMLayoutWaitingContainer = ({ showWaitPanel, showWaitPanelPrimary, showWaitPanelSecondary, waitPanelTitle, waitPanelTextSecondary, waitPanelValueSecondary, waitPanelMaxValueSecondary, waitPanelTextPrimary, waitPanelValuePrimary, waitPanelMaxValuePrimary, isCancelable, abortController, gap = 3, onClick, justifyContent = 'flex-start', alignItems = 'flex-start', children, direction = 'vertical' }) => {
-    return (_jsxs(TMLayoutContainer, { gap: gap, justifyContent: justifyContent, alignItems: alignItems, direction: direction, children: [children, showWaitPanel && (_jsx(TMWaitPanel, { title: waitPanelTitle, showPrimary: showWaitPanelPrimary, textPrimary: waitPanelTextPrimary, valuePrimary: waitPanelValuePrimary, maxValuePrimary: waitPanelMaxValuePrimary, showSecondary: showWaitPanelSecondary, textSecondary: waitPanelTextSecondary, valueSecondary: waitPanelValueSecondary, maxValueSecondary: waitPanelMaxValueSecondary, isCancelable: isCancelable, abortController: abortController, onAbortClick: (abortController) => { setTimeout(() => { abortController?.abort(); }, 1000); } }))] }));
+export const TMLayoutWaitingContainer = ({ showWaitPanel, showWaitPanelPrimary, showWaitPanelSecondary, waitPanelTitle, waitPanelTextSecondary, waitPanelValueSecondary, waitPanelMaxValueSecondary, waitPanelTextPrimary, waitPanelValuePrimary, waitPanelMaxValuePrimary, isCancelable, abortController, usePortal = false, gap = 3, onClick, justifyContent = 'flex-start', alignItems = 'flex-start', children, direction = 'vertical' }) => {
+    const waitPanelElement = showWaitPanel ? (_jsx(TMWaitPanel, { title: waitPanelTitle, showPrimary: showWaitPanelPrimary, textPrimary: waitPanelTextPrimary, valuePrimary: waitPanelValuePrimary, maxValuePrimary: waitPanelMaxValuePrimary, showSecondary: showWaitPanelSecondary, textSecondary: waitPanelTextSecondary, valueSecondary: waitPanelValueSecondary, maxValueSecondary: waitPanelMaxValueSecondary, isCancelable: isCancelable, abortController: abortController, onAbortClick: (abortController) => { setTimeout(() => { abortController?.abort(); }, 1000); }, useHighZIndex: usePortal })) : null;
+    return (_jsxs(_Fragment, { children: [usePortal && waitPanelElement && createPortal(waitPanelElement, document.body), _jsxs(TMLayoutContainer, { gap: gap, justifyContent: justifyContent, alignItems: alignItems, direction: direction, children: [children, !usePortal && waitPanelElement] })] }));
 };

package/lib/components/choosers/TMDynDataListItemChooser.d.ts

@@ -39,4 +39,4 @@ interface ITMDynDataListItemChooserFormProps extends ITMChooserFormProps<DataLis
     dynDL?: DynamicDataListDescriptor;
     searchResult?: SearchResultDescriptor;
 }
-export declare const TMDynDataListItemChooserForm: (props: ITMDynDataListItemChooserFormProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TMDynDataListItemChooserForm: (props: ITMDynDataListItemChooserFormProps) => React.JSX.Element;

package/lib/components/choosers/TMDynDataListItemChooser.js

@@ -84,10 +84,15 @@ const TMDynDataListItemChooser = ({ tid, md, width = '100%', titleForm, openChoo
             _jsx(TMTooltip, { content: SDKUI_Localizator.ValueNotPresent, children: _jsx(IconWarning, { color: TMColors.warning }) });
     };
     const renderTemplate = () => {
+        const isPlaceholder = values?.[0] === placeHolder;
+        // Selezione singola: mostra direttamente il primo valore
+        if (!allowMultipleSelection) {
+            const singleDescription = getValueDescription(values?.[0]);
+            return (_jsx(StyledDivHorizontal, { style: { width: '100%', color: isPlaceholder ? '#a9a9a9' : 'inherit', alignItems: 'center' }, children: dataSource && singleDescription && _jsxs(StyledDivHorizontal, { style: { alignItems: 'center', gap: '8px' }, children: [getIcon(), _jsx("p", { children: singleDescription })] }) }));
+        }
         const MIN_COUNT_FOR_BADGE = 1;
         const MAX_VISIBLE_ITEMS = 3;
         const MAX_TOOLTIP_ITEMS = 50;
-        const isPlaceholder = values?.[0] === placeHolder;
         const descriptions = getDescriptions(MAX_VISIBLE_ITEMS);
         const remainingCount = (values?.length ?? 0) - MAX_VISIBLE_ITEMS;
         const totalCount = values?.length ?? 0;

package/lib/components/choosers/TMGroupChooser.js

@@ -11,7 +11,7 @@ export const TMGroupChooserForm = (props) => {
         TMSpinner.hide();
         return items ?? [];
     };
-    return (_jsx(TMChooserForm, { title: SDK_Localizator.Groups, allowMultipleSelection: props.allowMultipleSelection, width: props.width, height: props.height, manageUseLocalizedName: true, hasShowOnlySelectedItems: true, selectedIDs: props.selectedIDs, startWithShowOnlySelectedItems: false, cellRenderIcon: () => _jsx(IconUserGroup, { color: '#767676' }), dataSource: props.dataSource, getItems: getItems, onClose: props.onClose, onChoose: (IDs) => { props.onChoose?.(IDs); } }));
+    return (_jsx(TMChooserForm, { title: SDK_Localizator.Groups, allowMultipleSelection: props.allowMultipleSelection, width: props.width, height: props.height, manageUseLocalizedName: props.manageUseLocalizedName ?? true, hasShowOnlySelectedItems: true, selectedIDs: props.selectedIDs, startWithShowOnlySelectedItems: false, cellRenderIcon: () => _jsx(IconUserGroup, { color: '#767676' }), dataSource: props.dataSource, getItems: getItems, onClose: props.onClose, onChoose: (IDs) => { props.onChoose?.(IDs); } }));
 };
 export const TMGroupIdViewer = (props) => {
     const [group, setGroup] = useState(null);

package/lib/components/choosers/TMInvoiceRetrieveFormats.d.ts

@@ -1,4 +1,5 @@
+import React from 'react';
 import { InvoiceRetrieveFormats } from '@topconsultnpm/sdk-ts';
 import { ITMEnumDataBinding } from '../../ts';
-declare const TMInvoiceRetrieveFormats: ({ value, valueOrig, onValueChanged, valuesToExclude, label, width }: ITMEnumDataBinding<InvoiceRetrieveFormats>) => import("react/jsx-runtime").JSX.Element;
+declare const TMInvoiceRetrieveFormats: ({ value, valueOrig, onValueChanged, valuesToExclude, label, width }: ITMEnumDataBinding<InvoiceRetrieveFormats>) => React.JSX.Element;
 export default TMInvoiceRetrieveFormats;

package/lib/components/choosers/TMOrderRetrieveFormats.d.ts

@@ -1,4 +1,5 @@
+import React from 'react';
 import { OrderRetrieveFormats } from '@topconsultnpm/sdk-ts';
 import { ITMEnumDataBinding } from '../../ts';
-declare const TMOrderRetrieveFormats: ({ value, valueOrig, onValueChanged, valuesToExclude, label, width }: ITMEnumDataBinding<OrderRetrieveFormats>) => import("react/jsx-runtime").JSX.Element;
+declare const TMOrderRetrieveFormats: ({ value, valueOrig, onValueChanged, valuesToExclude, label, width }: ITMEnumDataBinding<OrderRetrieveFormats>) => React.JSX.Element;
 export default TMOrderRetrieveFormats;

package/lib/components/choosers/TMRelationChooser.d.ts

@@ -19,13 +19,13 @@ export declare const TMRelationIdViewer: ({ relationType, relationId, showIcon,
     relationId?: number;
     showIcon?: boolean;
     noneSelectionText?: string;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => React.JSX.Element;
 export declare const TMRelationIcon: ({ rd, relationType }: {
     rd: RelationDescriptor | undefined;
     relationType?: RelationTypes;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => React.JSX.Element;
 export declare const TMRelationTooltip: ({ rd, relationType, children }: {
     rd?: RelationDescriptor;
     relationType: RelationTypes | undefined;
     children: React.ReactNode;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => React.JSX.Element;

package/lib/components/choosers/TMUserChooser.d.ts

@@ -38,8 +38,8 @@ interface ITMUserChooserFormProps extends ITMChooserFormProps<UserDescriptor> {
 export declare const TMUserChooserForm: React.FunctionComponent<ITMUserChooserFormProps>;
 export declare const TMUserIcon: ({ ud }: {
     ud?: UserDescriptor;
-}) => import("react/jsx-runtime").JSX.Element | null;
+}) => React.JSX.Element | null;
 export declare const TMUserTooltip: ({ ud, children }: {
     ud?: UserDescriptor;
     children: React.ReactNode;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => React.JSX.Element;

package/lib/components/editors/TMEditorStyled.d.ts

@@ -7,7 +7,7 @@ export declare const StyledEditorContainer: import("styled-components/dist/types
 }, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$width"> & {
     $width: string;
 }, never>>> & string;
-export declare const StyledEditor: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "$disabled" | "$isMobile" | "$width" | "$type" | "$borderRadius" | "$fontSize" | "$vil" | "$isModified" | "$maxValue"> & {
+export declare const StyledEditor: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "$width" | "$borderRadius" | "$fontSize" | "$type" | "$disabled" | "$vil" | "$isModified" | "$maxValue" | "$isMobile"> & {
     $vil: ValidationItem[];
     $width: string;
     $type: string;
@@ -17,7 +17,7 @@ export declare const StyledEditor: import("styled-components/dist/types").IStyle
     $disabled: boolean;
     $isMobile?: boolean;
     $borderRadius?: string;
-}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "$disabled" | "$isMobile" | "$width" | "$type" | "$borderRadius" | "$fontSize" | "$vil" | "$isModified" | "$maxValue"> & {
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "$width" | "$borderRadius" | "$fontSize" | "$type" | "$disabled" | "$vil" | "$isModified" | "$maxValue" | "$isMobile"> & {
     $vil: ValidationItem[];
     $width: string;
     $type: string;
@@ -37,20 +37,20 @@ export declare const StyledEditorIcon: import("styled-components/dist/types").IS
     $disabled: boolean;
     $isModified: boolean;
 }, never>>> & string;
-export declare const StyledEditorLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$color" | "$disabled" | "$fontSize" | "$isFocused" | "$labelPosition"> & {
+export declare const StyledEditorLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$color" | "$fontSize" | "$disabled" | "$isFocused" | "$labelPosition"> & {
     $isFocused: boolean;
     $labelPosition: "right" | "left" | "top";
     $disabled: boolean;
     $fontSize?: string;
     $color?: string;
-}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$color" | "$disabled" | "$fontSize" | "$isFocused" | "$labelPosition"> & {
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$color" | "$fontSize" | "$disabled" | "$isFocused" | "$labelPosition"> & {
     $isFocused: boolean;
     $labelPosition: "right" | "left" | "top";
     $disabled: boolean;
     $fontSize?: string;
     $color?: string;
 }, never>>> & string;
-export declare const StyledTextareaEditor: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "$maxHeight" | "$disabled" | "$isMobile" | "$width" | "$borderRadius" | "$fontSize" | "$vil" | "$isModified" | "$resize"> & {
+export declare const StyledTextareaEditor: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "$width" | "$maxHeight" | "$borderRadius" | "$fontSize" | "$disabled" | "$vil" | "$isModified" | "$isMobile" | "$resize"> & {
     $vil: ValidationItem[];
     $width: string;
     $isModified: boolean;
@@ -60,7 +60,7 @@ export declare const StyledTextareaEditor: import("styled-components/dist/types"
     $maxHeight?: string;
     $borderRadius?: string;
     $resize?: boolean;
-}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "$maxHeight" | "$disabled" | "$isMobile" | "$width" | "$borderRadius" | "$fontSize" | "$vil" | "$isModified" | "$resize"> & {
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "$width" | "$maxHeight" | "$borderRadius" | "$fontSize" | "$disabled" | "$vil" | "$isModified" | "$isMobile" | "$resize"> & {
     $vil: ValidationItem[];
     $width: string;
     $isModified: boolean;

package/lib/components/editors/TMFormulaEditor.d.ts

@@ -28,8 +28,9 @@ export declare class FormulaDescriptor {
     metadataDataTypeDest?: MetadataDataTypes;
     tid?: number;
     description?: string;
+    syntax?: string;
 }
-export declare const renderFormulaIcon: (iconType: FormulaIconTypes, tid?: number, md?: MetadataDescriptor) => import("react/jsx-runtime").JSX.Element;
+export declare const renderFormulaIcon: (iconType: FormulaIconTypes, tid?: number, md?: MetadataDescriptor) => React.JSX.Element;
 declare const TMFormulaEditor: React.FunctionComponent<ITMApplyFormProps<FormulaDescriptor>>;
 export default TMFormulaEditor;
 export declare class FormulaHelper {