@topconsultnpm/sdkui-react 6.22.0-dev3.24 → 6.22.0-dev3.25

package/lib/components/base/TMAlert.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useState, useEffect } from 'react';
 import ReactDOM from 'react-dom/client';
 import { IconCloseCircle, IconInfo, IconSuccess, IconWarning } from '../../helper';
+import { DeviceType, TMDeviceProvider, useDeviceType } from './TMDeviceProvider';
 const TMAlertPosition = {
     TOP_RIGHT: { top: '10px', right: '10px', position: 'absolute' },
     TOP_CENTER: { top: '10px', left: '50%', transform: 'translateX(-50%)', position: 'absolute' },
@@ -45,13 +46,8 @@ const Mode = {
 };
 // const TMAlert = ({ mode, duration = 5000, message, position = 'BOTTOM_CENTER' }: { mode: keyof AlertModes, duration?: number, message: string, position?: keyof typeof TMAlertPosition }) => {
 const TMAlert = ({ mode, duration = 1000, title, message, position = 'BOTTOM_RIGHT' }) => {
-    const [currentWidth, setCurrentWidth] = useState(window.innerWidth);
+    const deviceType = useDeviceType();
     const [container] = useState(document.getElementsByClassName('tm-alert-temporary-container'));
-    useEffect(() => {
-        window.addEventListener('resize', () => {
-            setCurrentWidth(window.innerWidth);
-        });
-    }, [currentWidth]);
     useEffect(() => {
         const tiemout = setTimeout(() => {
             let container = document.getElementsByClassName('tm-alert-temporary-container');
@@ -63,7 +59,9 @@ const TMAlert = ({ mode, duration = 1000, title, message, position = 'BOTTOM_RIG
     }, [container]);
     // Determine the style for the alert container based on the position prop
     const alertContainerStyle = TMAlertPosition[position];
-    return (_jsx("div", { style: { width: '100%', paddingTop: '3px', ...alertContainerStyle }, children: _jsx("div", { className: 'tm-alert-animation-style', style: { animationDuration: `${duration}ms`, position: 'relative', float: 'right', zIndex: '20000999', width: '356px', height: '86px', borderRadius: '8px', overflow: 'hidden', border: '2px white solid', boxShadow: '0px 3px 6px #00000029' }, children: _jsx("div", { className: 'tm-alert-animation-style', style: { animationDuration: `${duration}ms` }, children: _jsxs("div", { className: 'tm-alert-container', style: { background: Mode[mode].color, animationDuration: `${duration}ms` }, children: [_jsxs("div", { className: "tm-alert-context", style: { position: 'relative' }, children: [_jsx("div", { className: 'tm-alert-icon', style: { position: 'absolute', top: '12px', left: '12px', paddingTop: '1px' }, children: Mode[mode].icon }), _jsx("div", { style: { color: Mode[mode].textColor, position: 'absolute', top: '15px', left: '45px', textAlign: 'left', fontSize: '1.1rem', fontWeight: 'bold', maxWidth: '280px' }, children: title }), _jsx("div", { style: { color: Mode[mode].textColor, position: 'absolute', top: '35px', left: '45px', textAlign: 'left', fontSize: '1rem', maxWidth: '280px' }, children: message })] }), _jsx("div", { className: 'tm-alert-loading', style: { backgroundImage: `linear-gradient(to right, ${Mode[mode].borderColor}, ${Mode[mode].textColor})`, animationDuration: `${duration}ms` } })] }) }) }) }));
+    // Su mobile l'alert e' piu' basso e con testo piu' piccolo: la versione desktop copre troppo schermo.
+    const isMobile = deviceType === DeviceType.MOBILE;
+    return (_jsx("div", { style: { width: '100%', paddingTop: '3px', ...alertContainerStyle }, children: _jsx("div", { className: 'tm-alert-animation-style', style: { animationDuration: `${duration}ms`, position: 'relative', float: 'right', zIndex: '20000999', width: isMobile ? 'min(300px, calc(100vw - 20px))' : '356px', height: isMobile ? '58px' : '86px', borderRadius: '8px', overflow: 'hidden', border: '2px white solid', boxShadow: '0px 3px 6px #00000029' }, children: _jsx("div", { className: 'tm-alert-animation-style', style: { animationDuration: `${duration}ms` }, children: _jsxs("div", { className: 'tm-alert-container', style: { background: Mode[mode].color, animationDuration: `${duration}ms` }, children: [_jsxs("div", { className: "tm-alert-context", style: { position: 'relative' }, children: [_jsx("div", { className: 'tm-alert-icon', style: { position: 'absolute', top: isMobile ? '8px' : '12px', left: isMobile ? '8px' : '12px', paddingTop: '1px' }, children: Mode[mode].icon }), _jsx("div", { style: { color: Mode[mode].textColor, position: 'absolute', top: isMobile ? '7px' : '15px', left: isMobile ? '38px' : '45px', textAlign: 'left', fontSize: isMobile ? '0.85rem' : '1.1rem', fontWeight: 'bold', maxWidth: isMobile ? 'calc(100% - 46px)' : '280px', ...(isMobile && { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }) }, children: title }), _jsx("div", { style: { color: Mode[mode].textColor, position: 'absolute', top: isMobile ? '25px' : '35px', left: isMobile ? '38px' : '45px', textAlign: 'left', fontSize: isMobile ? '0.8rem' : '1rem', maxWidth: isMobile ? 'calc(100% - 46px)' : '280px', ...(isMobile && { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }) }, children: message })] }), _jsx("div", { className: 'tm-alert-loading', style: { backgroundImage: `linear-gradient(to right, ${Mode[mode].borderColor}, ${Mode[mode].textColor})`, animationDuration: `${duration}ms` } })] }) }) }) }));
 };
 const ShowAlert = ({ mode, message, duration, title, position = 'BOTTOM_RIGHT' }) => {
     let container = document.createElement('div');
@@ -72,6 +70,6 @@ const ShowAlert = ({ mode, message, duration, title, position = 'BOTTOM_RIGHT' }
     // container.style.position = 'relative'
     container.style.display = 'flex';
     const root = ReactDOM.createRoot(container);
-    root.render(_jsx(React.StrictMode, { children: _jsx(TMAlert, { message: message, mode: mode, duration: duration, title: title, position: position }) }));
+    root.render(_jsx(React.StrictMode, { children: _jsx(TMDeviceProvider, { children: _jsx(TMAlert, { message: message, mode: mode, duration: duration, title: title, position: position }) }) }));
 };
 export default ShowAlert;

package/lib/components/base/TMAreaManager.js

@@ -10,7 +10,8 @@ import { loadMessages } from 'devextreme/localization';
 import { getFileManagerFolderColor, Globalization, IconAll, IconCloud, IconFolder, IconFolderForCSS, IconSelected, SDKUI_Localizator, svgToString } from '../../helper';
 import { TMExceptionBoxManager } from './TMPopUp';
 import ShowAlert from './TMAlert';
-import { TMLayoutWaitingContainer } from './TMWaitPanel';
+import TMLayoutContainer from './TMLayout';
+import TMWaitPanelManager from './waitPanel/TMWaitPanelManager';
 import TMCounterContainer, { CounterItemKey } from './TMCounterContainer';
 import { IconPdf, IconTxt, IconXls, IconDocx, IconImage, IconZip, IconXml, IconMp4, IconEmail, IconPpt, IconSigned, IconExe, IconHtml, IconDwg, IconDicom, IconSlddrw } from '../../assets/thumbnails';
 import styled from 'styled-components';
@@ -89,17 +90,6 @@ const TMAreaManager = (props = { selectionMode: 'multiple', isPathChooser: false
     const [counterValues, setCounterValues] = useState(new Map());
     // State to maintain the selection mode (File System Item - right panel)
     const [selectionMode, setSelectionMode] = useState('single');
-    /* State to manage the Wait Panel */
-    const [showWaitPanel, setShowWaitPanel] = useState(false);
-    const [waitPanelTitle, setWaitPanelTitle] = useState('');
-    const [showPrimary, setShowPrimary] = useState(false);
-    const [waitPanelTextPrimary, setWaitPanelTextPrimary] = useState('');
-    const [waitPanelValuePrimary, setWaitPanelValuePrimary] = useState(0);
-    const [waitPanelMaxValuePrimary, setWaitPanelMaxValuePrimary] = useState(0);
-    const [showSecondary, setShowSecondary] = useState(false);
-    const [waitPanelTextSecondary, setWaitPanelTextSecondary] = useState('');
-    const [waitPanelValueSecondary, setWaitPanelValueSecondary] = useState(0);
-    const [waitPanelMaxValueSecondary, setWaitPanelMaxValueSecondary] = useState(0);
     // Timer ID to store reference for any scheduled operation
     let timerId = null;
     // Prefix for area folder names
@@ -430,44 +420,55 @@ const TMAreaManager = (props = { selectionMode: 'multiple', isPathChooser: false
         }
     };
     const downloadItems = async (items) => {
+        const files = items.filter(item => !item.isDirectory);
+        const isBatch = files.length > 1;
+        const waitPanel = TMWaitPanelManager.show({
+            title: "Download",
+            max: isBatch ? files.length : 0,
+            cancelable: true,
+            showCounters: false,
+            showSecondary: isBatch,
+            primaryLabel: isBatch ? 'File' : undefined,
+            secondaryLabel: isBatch ? 'File corrente' : undefined,
+        });
+        abortController = waitPanel.abortController;
+        const publishBytes = (loaded, total) => {
+            const text = total > 0
+                ? `Downloading... ${Globalization.getNumberDisplayValue(loaded, true)} / ${Globalization.getNumberDisplayValue(total, true)}`
+                : '';
+            if (isBatch)
+                waitPanel.setSecondary({ value: loaded, max: total, text });
+            else
+                waitPanel.update({ value: loaded, max: total, subtitle: text });
+        };
+        // Un solo avviso per tutta l'operazione: con più file riporta quanti ne sono stati scaricati.
+        let downloaded = 0;
+        const showInterrupted = () => ShowAlert({
+            mode: 'warning',
+            title: "Download",
+            duration: 3000,
+            message: isBatch ? SDKUI_Localizator.DownloadInterruptedFiles.replaceParams(downloaded, files.length) : SDKUI_Localizator.DownloadInterrupted,
+        });
         try {
-            setShowWaitPanel(true);
-            setShowPrimary(items.length > 1);
-            setShowSecondary(true);
-            setWaitPanelTitle("Download");
-            abortController = new AbortController();
-            let i = 0;
-            setWaitPanelMaxValuePrimary(items.length);
-            let firstBlock = true;
-            let maxFileSize = 0;
-            for (const item of items) {
-                if (item.isDirectory)
-                    continue;
-                if (abortController.signal.aborted) {
-                    ShowAlert({ message: 'Operazione interrotta', mode: 'warning', title: "Download files", duration: 3000 });
+            for (const item of files) {
+                if (waitPanel.aborted) {
+                    showInterrupted();
                     return;
                 }
-                setWaitPanelTextPrimary(`Download ${item.name}`);
+                if (isBatch)
+                    waitPanel.setSubtitle(`Download ${item.name}`);
                 const ad = item.dataItem.dataItem;
                 const aid = ad?.id;
                 const subFolder = item.parentPath === ad.name ? '' : item.parentPath.replace(ad.name + '/', '');
                 const tms = props.tmSession ?? SDK_Globals.tmSession;
-                const file = await tms?.NewAreaEngine().RetrieveFileAsync(aid, subFolder, item.name, FileFormats.None, abortController.signal, (pd) => {
-                    if (firstBlock) {
-                        maxFileSize = pd.ProgressBarMaximum ?? 0;
-                        setWaitPanelMaxValueSecondary(maxFileSize);
-                        firstBlock = false;
-                    }
-                    setWaitPanelValueSecondary(pd.ProgressBarValue);
-                    setWaitPanelTextSecondary(`Downloading... ${Globalization.getNumberDisplayValue(pd.ProgressBarValue, true)} / ${Globalization.getNumberDisplayValue(maxFileSize, true)}`);
-                    if (pd.ProgressBarValue === pd.ProgressBarMaximum) {
-                        setWaitPanelMaxValueSecondary(0);
-                        setWaitPanelValueSecondary(0);
-                        setWaitPanelTextSecondary('');
-                        firstBlock = true;
-                    }
-                });
-                setWaitPanelValuePrimary(i + 1);
+                let file;
+                try {
+                    file = await tms?.NewAreaEngine().RetrieveFileAsync(aid, subFolder, item.name, FileFormats.None, waitPanel.signal, (pd) => publishBytes(pd.ProgressBarValue, pd.ProgressBarMaximum ?? 0));
+                }
+                finally {
+                    if (isBatch)
+                        publishBytes(0, 0);
+                }
                 const fileURL = window.URL.createObjectURL(file);
                 const alink2 = document.createElement('a');
                 alink2.href = fileURL;
@@ -475,25 +476,22 @@ const TMAreaManager = (props = { selectionMode: 'multiple', isPathChooser: false
                 alink2.target = "_blank";
                 alink2.rel = "noreferrer";
                 alink2.click();
-                i++;
+                downloaded++;
+                if (isBatch)
+                    await waitPanel.step();
             }
+            if (files.length > 0)
+                ShowAlert({ mode: 'success', message: SDKUI_Localizator.OperationSuccess, title: "Download", duration: 3000 });
         }
         catch (ex) {
             const err = ex;
-            if (err.name === 'CanceledError') {
-                ShowAlert({ message: err.message, mode: 'warning', duration: 3000, title: 'Abort' });
-            }
+            if (waitPanel.aborted || err.name === 'CanceledError')
+                showInterrupted();
             else
                 TMExceptionBoxManager.show({ exception: ex });
         }
         finally {
-            setWaitPanelTextPrimary('');
-            setWaitPanelMaxValuePrimary(0);
-            setWaitPanelValuePrimary(0);
-            setWaitPanelTextSecondary('');
-            setWaitPanelMaxValueSecondary(0);
-            setWaitPanelValueSecondary(0);
-            setShowWaitPanel(false);
+            waitPanel.close();
         }
     };
     // Asynchronous function to retrieve the items in a given directory (parentDirectory)
@@ -767,7 +765,7 @@ const TMAreaManager = (props = { selectionMode: 'multiple', isPathChooser: false
         }
     };
     const folderColor = getFileManagerFolderColor(SDK_Globals.tmSession?.SessionDescr?.appModuleID ?? AppModules.SURFER);
-    return (_jsx(TMLayoutWaitingContainer, { direction: 'vertical', showWaitPanel: showWaitPanel, showWaitPanelPrimary: showPrimary, showWaitPanelSecondary: showSecondary, waitPanelTitle: waitPanelTitle, waitPanelTextPrimary: waitPanelTextPrimary, waitPanelValuePrimary: waitPanelValuePrimary, waitPanelMaxValuePrimary: waitPanelMaxValuePrimary, waitPanelTextSecondary: waitPanelTextSecondary, waitPanelValueSecondary: waitPanelValueSecondary, waitPanelMaxValueSecondary: waitPanelMaxValueSecondary, isCancelable: true, abortController: abortController, children: _jsxs(StyledFileManagerWrapper, { $folderColor: folderColor, style: { width: "100%", height: "100%" }, children: [_jsxs(FileManager, { width: props.width, ref: fileManagerRef, height: `calc(${props.height} - 30px)`, onItemMoving: onItemCopying, onItemCopying: onItemCopying, onFileUploading: onFileUploading, fileSystemProvider: areaProvider, customizeThumbnail: customizeIcon, rootFolderName: SDK_Localizator.Areas, onSelectionChanged: onSelectionChanged, onDirectoryCreating: onDirectoryCreating, onFocusedItemChanged: onFocusedItemChanged, onSelectedFileOpened: onSelectedFileOpened, onContextMenuItemClick: onContextMenuItemClick, 
+    return (_jsx(TMLayoutContainer, { direction: 'vertical', children: _jsxs(StyledFileManagerWrapper, { $folderColor: folderColor, style: { width: "100%", height: "100%" }, children: [_jsxs(FileManager, { width: props.width, ref: fileManagerRef, height: `calc(${props.height} - 30px)`, onItemMoving: onItemCopying, onItemCopying: onItemCopying, onFileUploading: onFileUploading, fileSystemProvider: areaProvider, customizeThumbnail: customizeIcon, rootFolderName: SDK_Localizator.Areas, onSelectionChanged: onSelectionChanged, onDirectoryCreating: onDirectoryCreating, onFocusedItemChanged: onFocusedItemChanged, onSelectedFileOpened: onSelectedFileOpened, onContextMenuItemClick: onContextMenuItemClick, 
                     /* onItemMoved={() => setCounter(counter => counter + 1)}
                     onItemCopied={() => setCounter(counter => counter + 1)}
                     onItemDeleted={() => setCounter(counter => counter - 1)}

package/lib/components/base/TMCustomButton.js

@@ -1,10 +1,11 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState, useMemo } from 'react';
 import TMModal from './TMModal';
 import styled from 'styled-components';
-import { SDKUI_Localizator, TMLayoutWaitingContainer } from '../..';
+import { SDKUI_Localizator } from '../..';
 import { getButtonAttributes, getSelectedItem } from '../../helper/dcmtsHelper';
 import { DeviceType, useDeviceType } from './TMDeviceProvider';
+import TMWaitPanelManager from './waitPanel/TMWaitPanelManager';
 const IframeContainer = styled.div `
   display: flex;
   height: 100%;
@@ -53,12 +54,6 @@ const TMCustomButton = (props) => {
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(false);
     const itemsToProcess = useMemo(() => selectedItems && selectedItems.length > 0 ? selectedItems : [attributes], [selectedItems, attributes]);
-    // Stati per il wait panel
-    const [showWaitPanel, setShowWaitPanel] = useState(itemsToProcess.length > 0 && !RunOnce);
-    const [waitPanelText, setWaitPanelText] = useState(SDKUI_Localizator.CustomButtonActions.replaceParams(1, itemsToProcess.length));
-    const [waitPanelValue, setWaitPanelValue] = useState(0);
-    const [waitPanelMaxValue, setWaitPanelMaxValue] = useState(itemsToProcess.length);
-    const [abortController, setAbortController] = useState(undefined);
     // Aggiungi timestamp all'URL per evitare cache
     const iframeUrl = useMemo(() => {
         if (!scriptUrl)
@@ -83,41 +78,44 @@ const TMCustomButton = (props) => {
         setLoading(false);
         setError(true);
     };
-    const executeSequentially = async (controller) => {
+    const executeSequentially = async () => {
         if (!itemsToProcess)
             return;
-        for (const [index, item] of itemsToProcess.entries()) {
-            if (controller.signal.aborted)
-                break;
-            setWaitPanelText(SDKUI_Localizator.CustomButtonActions.replaceParams(index + 1, itemsToProcess.length));
-            setWaitPanelValue(index);
-            // Attendi che l'iframe sia pronto e invia il messaggio
-            await new Promise((resolve) => {
-                const checkIframe = setInterval(() => {
-                    if (iframeRef.current?.contentWindow) {
-                        clearInterval(checkIframe);
-                        if (selectedItems && selectedItems.length > 0) {
-                            //devo convertire item in formData
-                            const processedItem = getSelectedItem(args, formData, item);
-                            postMessageIframe(processedItem);
-                        }
-                        else {
-                            postMessageIframe(item);
+        const waitPanel = TMWaitPanelManager.show({
+            title: SDKUI_Localizator.CustomButtonAction,
+            max: itemsToProcess.length,
+            cancelable: true,
+        });
+        try {
+            for (const [index, item] of itemsToProcess.entries()) {
+                if (waitPanel.aborted)
+                    break;
+                waitPanel.setSubtitle(SDKUI_Localizator.CustomButtonActions.replaceParams(index + 1, itemsToProcess.length));
+                // Attendi che l'iframe sia pronto e invia il messaggio
+                await new Promise((resolve) => {
+                    const checkIframe = setInterval(() => {
+                        if (iframeRef.current?.contentWindow) {
+                            clearInterval(checkIframe);
+                            if (selectedItems && selectedItems.length > 0) {
+                                //devo convertire item in formData
+                                const processedItem = getSelectedItem(args, formData, item);
+                                postMessageIframe(processedItem);
+                            }
+                            else {
+                                postMessageIframe(item);
+                            }
+                            // Attendi prima di passare al prossimo
+                            setTimeout(resolve, 500);
                         }
-                        //imposta 100% se sono all'ultimo item
-                        if (index === itemsToProcess.length - 1)
-                            setWaitPanelValue(index + 1);
-                        // Attendi prima di passare al prossimo
-                        setTimeout(() => {
-                            setWaitPanelValue(index + 1);
-                            resolve();
-                        }, 500);
-                    }
-                }, 100);
-            });
+                    }, 100);
+                });
+                await waitPanel.step();
+            }
+        }
+        finally {
+            waitPanel.close();
+            onClose?.();
         }
-        setShowWaitPanel(false);
-        onClose?.();
     };
     const postMessageIframe = (data) => {
         console.log("TMCustomButton - postMessageIframe - data:", data);
@@ -130,14 +128,7 @@ const TMCustomButton = (props) => {
             return;
         if (!RunOnce && itemsToProcess.length > 0) {
             // esegui per ogni item selezionato
-            const controller = new AbortController();
-            controller.signal.addEventListener('abort', () => {
-                setShowWaitPanel(false);
-                onClose?.();
-            });
-            setAbortController(controller);
-            setWaitPanelMaxValue(itemsToProcess.length);
-            executeSequentially(controller);
+            executeSequentially();
         }
         else {
             // Modalità RunOnce: invia dati all'iframe quando è caricato
@@ -157,6 +148,6 @@ const TMCustomButton = (props) => {
         }
     }, []);
     const iframeContent = (_jsxs(IframeContainer, { style: !RunOnce ? { visibility: 'hidden' } : {}, children: [loading && _jsx(LoadingOverlay, {}), error && _jsx("div", { children: "Si \u00E8 verificato un errore nel caricamento del contenuto." }), !error && _jsx(StyledIframe, { ref: iframeRef, loading: 'lazy', onLoad: handleLoad, onError: handleError, src: iframeUrl })] }));
-    return isModal && RunOnce ? (_jsx(TMModal, { title: button.title, width: isMobile ? '95%' : '60%', height: isMobile ? '95%' : '70%', resizable: isMobile ? false : true, expandable: isMobile ? false : true, onClose: onClose, children: iframeContent })) : !RunOnce && (_jsxs(_Fragment, { children: [_jsx(TMLayoutWaitingContainer, { showWaitPanel: showWaitPanel, waitPanelTitle: SDKUI_Localizator.CustomButtonAction, showWaitPanelPrimary: true, waitPanelTextPrimary: waitPanelText, waitPanelValuePrimary: waitPanelValue, waitPanelMaxValuePrimary: waitPanelMaxValue, showWaitPanelSecondary: false, isCancelable: true, abortController: abortController, children: undefined }), iframeContent] }));
+    return isModal && RunOnce ? (_jsx(TMModal, { title: button.title, width: isMobile ? '95%' : '60%', height: isMobile ? '95%' : '70%', resizable: isMobile ? false : true, expandable: isMobile ? false : true, onClose: onClose, children: iframeContent })) : !RunOnce && iframeContent;
 };
 export default TMCustomButton;

package/lib/components/base/TMTreeView.js

@@ -4,6 +4,17 @@ import { List } from 'react-window';
 import styled from 'styled-components';
 import { IconArrowLeft, IconArrowRight, IconChevronDown, IconChevronRight, SDKUI_Localizator } from '../../helper';
 import TMButton from './TMButton';
+// Campi in cui frecce, +, - e spazio servono alla digitazione (checkbox e bottoni esclusi)
+const NON_TEXT_INPUT_TYPES = new Set(['checkbox', 'radio', 'button', 'submit', 'reset', 'image', 'file', 'color', 'range']);
+const isEditableElement = (el) => {
+    if (el.isContentEditable)
+        return true;
+    if (el instanceof HTMLTextAreaElement || el instanceof HTMLSelectElement)
+        return true;
+    if (el instanceof HTMLInputElement)
+        return !NON_TEXT_INPUT_TYPES.has(el.type);
+    return false;
+};
 // Componente riga virtualizzata memoizzato
 const VirtualRowComponent = memo(({ ariaAttributes, index, style, flattenedItems, focusedItemKey, selectedItemKeys, allowMultipleSelection, hasVisibleItems, handleNodeToggle, handleNodeClick, handleCheckboxChange, hasPartialChildSelection, itemRender, onItemContextMenu }) => {
     const item = flattenedItems[index];
@@ -184,6 +195,9 @@ const TMTreeView = ({ dataSource = [], focusedItem, selectedItems = [], allowMul
         const handleKeyDown = (event) => {
             if (!focusedItem)
                 return;
+            // Non rubare i tasti ai campi editabili (es. input di un pannello sovrapposto)
+            if (event.target instanceof HTMLElement && isEditableElement(event.target))
+                return;
             let newFocusedItem = null;
             let handled = false;
             switch (event.key) {

package/lib/components/base/waitPanel/TMWaitPanelConfirm.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export interface ITMWaitPanelConfirmProps {
+    /** Deve stare sopra l'overlay del pannello: il manager passa il suo z-index + 1. */
+    zIndex?: number;
+    /** Conferma: l'operazione va interrotta. */
+    onYes?: () => void;
+    /** Annulla: l'operazione riprende. Usata anche dalla X. */
+    onNo?: () => void;
+}
+/** Il ref punta all'overlay, che il manager mostra e nasconde via `style.display`. */
+declare const TMWaitPanelConfirm: React.ForwardRefExoticComponent<ITMWaitPanelConfirmProps & React.RefAttributes<HTMLDivElement>>;
+export default TMWaitPanelConfirm;

package/lib/components/base/waitPanel/TMWaitPanelConfirm.js

@@ -0,0 +1,185 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useRef } from 'react';
+import styled, { keyframes } from 'styled-components';
+import toppy from '../../../assets/Toppy-generico.png';
+import { AppModules, SDK_Globals } from '@topconsultnpm/sdk-ts';
+import { getAppModuleGradient, SDKUI_Localizator } from '../../../helper';
+/** Modale di conferma dell'interruzione, sopra al wait panel: non usa TMMessageBox perche' deve stare sopra gli overlay DevExtreme. */
+/** Gradiente dell'applicazione per la barra del titolo. SDK_Globals.tmSession lancia senza sessione. */
+const getTitleBarGradient = () => {
+    let appModuleID = AppModules.SURFER;
+    try {
+        appModuleID = SDK_Globals.tmSession?.SessionDescr?.appModuleID ?? AppModules.SURFER;
+    }
+    catch { /* nessuna sessione: resta il default */ }
+    return getAppModuleGradient(appModuleID);
+};
+const fadeIn = keyframes `
+    from { opacity: 0; }
+    to   { opacity: 1; }
+`;
+const StyledConfirmOverlay = styled.div `
+    display: none;
+    position: fixed;
+    inset: 0;
+    z-index: ${props => props.$zIndex};
+    align-items: center;
+    justify-content: center;
+
+    &::before {
+        content: '';
+        position: absolute;
+        inset: 0;
+        background-color: rgba(17, 24, 39, 0.35);
+        animation: ${fadeIn} 120ms ease-out;
+    }
+`;
+const StyledConfirmCard = styled.div `
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    width: 420px;
+    max-width: calc(100% - 24px);
+    max-height: calc(100% - 24px);
+    overflow-y: auto;
+    box-sizing: border-box;
+    background: #ffffff;
+    border-radius: 16px;
+    box-shadow: 0 18px 48px rgba(16, 24, 40, 0.28);
+    overflow: hidden; /* tiene la barra del titolo dentro il raggio della card */
+    font-family: inherit;
+`;
+const StyledTitleBar = styled.div `
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    padding: 6px 8px 6px 14px;
+    background: ${props => props.$gradient};
+    color: #ffffff;
+    cursor: move;
+    user-select: none;
+    touch-action: none; /* necessario perche' i pointer event di drag arrivino su touch */
+`;
+const StyledTitle = styled.div `
+    font-size: 14px;
+    font-weight: 600;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+`;
+const StyledCloseButton = styled.button `
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 26px;
+    height: 26px;
+    flex: 0 0 auto;
+    padding: 0;
+    border: none;
+    border-radius: 6px;
+    background: transparent;
+    color: inherit;
+    cursor: pointer;
+
+    &:hover { background: rgba(255, 255, 255, 0.18); }
+    &:active { background: rgba(255, 255, 255, 0.28); }
+`;
+const StyledBody = styled.div `
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 16px;
+    padding: 20px 24px 0 24px;
+`;
+const StyledToppyClip = styled.div `
+    height: 61px;
+    width: 68px;
+    overflow: hidden;
+    flex: 0 0 auto;
+`;
+const StyledToppy = styled.img `
+    display: block;
+    width: 68px;
+    height: 79px;
+    user-select: none;
+    -webkit-user-drag: none;
+`;
+const StyledQuestion = styled.div `
+    flex: 1;
+    min-width: 0;
+    font-size: 17px;
+    font-weight: 600;
+    color: #1f2937;
+    line-height: 1.3;
+    overflow-wrap: anywhere;
+`;
+const StyledFooter = styled.div `
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    gap: 10px;
+    padding: 18px 24px;
+`;
+const StyledButton = styled.button `
+    min-width: 92px;
+    padding: 9px 18px;
+    border-radius: 10px;
+    font-size: 13px;
+    font-family: inherit;
+    cursor: pointer;
+    transition: background-color 120ms ease, border-color 120ms ease;
+
+    border: 1px solid ${props => (props.$primary ? '#b3172f' : '#d5dbe5')};
+    background: ${props => (props.$primary ? '#c81e39' : '#ffffff')};
+    color: ${props => (props.$primary ? '#ffffff' : '#374151')};
+
+    &:hover { background: ${props => (props.$primary ? '#b3172f' : '#f3f5f9')}; }
+    &:active { transform: translateY(1px); }
+`;
+const IconClose = () => (_jsxs("svg", { width: '15', height: '15', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '2.4', strokeLinecap: 'round', children: [_jsx("line", { x1: '18', y1: '6', x2: '6', y2: '18' }), _jsx("line", { x1: '6', y1: '6', x2: '18', y2: '18' })] }));
+/** Il ref punta all'overlay, che il manager mostra e nasconde via `style.display`. */
+const TMWaitPanelConfirm = forwardRef(({ zIndex = 2147483602, onYes, onNo }, ref) => {
+    const cardRef = useRef(null);
+    // Scostamento fra il puntatore e l'angolo della card, fissato al primo pointerdown.
+    const grabRef = useRef(null);
+    const handlePointerDown = (e) => {
+        const card = cardRef.current;
+        if (!card || e.button !== 0)
+            return;
+        // Niente drag dalla X: con la pointer capture il click finirebbe sulla barra e non sul bottone.
+        if (e.target.closest('button'))
+            return;
+        // La card nasce centrata dal flex: al primo drag passo a coordinate esplicite.
+        const rect = card.getBoundingClientRect();
+        card.style.position = 'absolute';
+        card.style.margin = '0';
+        // Pixel interi: una posizione frazionaria fa ricampionare Toppy e lo sgrana.
+        card.style.left = `${Math.round(rect.left)}px`;
+        card.style.top = `${Math.round(rect.top)}px`;
+        grabRef.current = { dx: e.clientX - rect.left, dy: e.clientY - rect.top };
+        e.currentTarget.setPointerCapture(e.pointerId);
+    };
+    const handlePointerMove = (e) => {
+        const grab = grabRef.current;
+        const card = cardRef.current;
+        if (!grab || !card)
+            return;
+        // Clamp al viewport: una volta uscita non si riuscirebbe piu' ad afferrarla.
+        const maxLeft = Math.max(0, window.innerWidth - card.offsetWidth);
+        const maxTop = Math.max(0, window.innerHeight - card.offsetHeight);
+        card.style.left = `${Math.round(Math.min(Math.max(0, e.clientX - grab.dx), maxLeft))}px`;
+        card.style.top = `${Math.round(Math.min(Math.max(0, e.clientY - grab.dy), maxTop))}px`;
+    };
+    const handlePointerUp = (e) => {
+        if (!grabRef.current)
+            return;
+        grabRef.current = null;
+        if (e.currentTarget.hasPointerCapture(e.pointerId))
+            e.currentTarget.releasePointerCapture(e.pointerId);
+    };
+    return (_jsx(StyledConfirmOverlay, { ref: ref, $zIndex: zIndex, children: _jsxs(StyledConfirmCard, { ref: cardRef, role: 'alertdialog', children: [_jsxs(StyledTitleBar, { $gradient: getTitleBarGradient(), onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, onPointerUp: handlePointerUp, onPointerCancel: handlePointerUp, children: [_jsx(StyledTitle, { children: SDKUI_Localizator.Abort }), _jsx(StyledCloseButton, { type: 'button', "aria-label": SDKUI_Localizator.No, onClick: onNo, children: _jsx(IconClose, {}) })] }), _jsxs(StyledBody, { children: [_jsx(StyledToppyClip, { children: _jsx(StyledToppy, { src: toppy, alt: '', draggable: false }) }), _jsx(StyledQuestion, { children: SDKUI_Localizator.Abort_Confirm })] }), _jsxs(StyledFooter, { children: [_jsx(StyledButton, { type: 'button', $primary: true, onClick: onYes, children: SDKUI_Localizator.Yes }), _jsx(StyledButton, { type: 'button', onClick: onNo, children: SDKUI_Localizator.No })] })] }) }));
+});
+TMWaitPanelConfirm.displayName = 'TMWaitPanelConfirm';
+export default TMWaitPanelConfirm;