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

package/lib/components/base/TMToggleButton.js

@@ -52,7 +52,7 @@ const TMToggleButton = ({ color = 'primary', value, label, elementStyle, fontSiz
         setCurrentColor(isModifiedWhen ? 'tertiary' : color);
     }, [isModifiedWhen, color]);
     const renderTooltip = () => { return (showTooltip && _jsx("div", { children: label })); };
-    return (_jsx(TMTooltip, { hideAfterDelay: true, content: renderTooltip(), children: _jsxs(StyledToggleButtonWrapper, { children: [_jsx(StyledToggleButtonContainer, { "$value": value, "$color": currentColor, style: elementStyle, onClick: onValueChanged, children: _jsx(StyledToggleButtonSwitch, { "$value": value, children: _jsx(StyledToggleValue, { children: value ? 'ON' : 'OFF' }) }) }), !showTooltip && label &&
-                    _jsx(StyledToggleButtonLabel, { "$color": isModifiedWhen ? Colors.tertiary : Colors.primary, children: label })] }) }));
+    return (_jsx(TMTooltip, { hideAfterDelay: true, content: renderTooltip(), children: _jsxs(StyledToggleButtonWrapper, { children: [_jsx(StyledToggleButtonContainer, { $value: value, $color: currentColor, style: elementStyle, onClick: onValueChanged, children: _jsx(StyledToggleButtonSwitch, { $value: value, children: _jsx(StyledToggleValue, { children: value ? 'ON' : 'OFF' }) }) }), !showTooltip && label &&
+                    _jsx(StyledToggleButtonLabel, { $color: isModifiedWhen ? Colors.tertiary : Colors.primary, children: label })] }) }));
 };
 export default TMToggleButton;

package/lib/components/base/TMToolbarCard.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled from 'styled-components';
 import TMRightSidebar from './TMRightSidebar';
 import { IconArrowLeft, SDKUI_Localizator } from '../../helper';
@@ -46,8 +46,8 @@ const StyledSearchCardContent = styled.div `
   -webkit-user-select: none;
 `;
 const TMToolbarCard = ({ items = [], onItemClick, selectedItem, showPanel, color = TMColors.colorHeader, backgroundColor = TMColors.backgroundColorHeader, backgroundColorContainer, children, showHeader = true, title, totalItems, displayedItemsCount, toolbar, padding = '3px', onBack, onClose, onHeaderDoubleClick }) => {
-    return (_jsxs(StyledSearchCard, { children: [showHeader && _jsx(StyledSearchCardHeader, { "$backgroundColor": backgroundColor, "$color": color, onDoubleClick: () => { if (onHeaderDoubleClick)
-                    onHeaderDoubleClick(); }, children: _jsxs("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', width: '100%' }, children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: '8px' }, children: [onBack && _jsx(TMButton, { btnStyle: 'icon', icon: _jsx("div", { style: { backgroundColor: 'white', minWidth: '24px', minHeight: '24px', borderRadius: '24px', display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: _jsx(IconArrowLeft, { color: TMColors.primaryColor }) }), caption: SDKUI_Localizator.Back, onClick: onBack }), _jsxs("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center' }, children: [_jsx("p", { children: title }), Boolean(displayedItemsCount && displayedItemsCount > 0) && (_jsxs(_Fragment, { children: [_jsx(StyledBadge, { "$backgroundColor": '#679CE8', children: displayedItemsCount }), Boolean(totalItems && totalItems > 0) && _jsx("span", { children: "\u00A0\u00A0/\u00A0" })] })), Boolean(totalItems && totalItems > 0) && _jsx(StyledBadge, { "$backgroundColor": '#679CE8', children: totalItems })] })] }), _jsxs("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: '5px' }, children: [toolbar, onClose && _jsx(TMButton, { color: 'primaryOutline', caption: SDKUI_Localizator.Close, icon: _jsx("i", { className: 'dx-icon-remove', style: { color: "white" } }), btnStyle: 'icon', onClick: () => onClose?.() })] })] }) }), _jsxs(StyledSearchCardContent, { "$height": showHeader ? "calc(100% - 35px)" : "100%", "$padding": padding, "$backgroundColor": backgroundColorContainer ?? `${TMColors.backgroundColorHeader}12`, children: [_jsx("div", { style: { width: items.length > 0 ? 'calc(100% - 30px)' : '100%' }, children: children }), items.length > 0 &&
+    return (_jsxs(StyledSearchCard, { children: [showHeader && _jsx(StyledSearchCardHeader, { $backgroundColor: backgroundColor, $color: color, onDoubleClick: () => { if (onHeaderDoubleClick)
+                    onHeaderDoubleClick(); }, children: _jsxs("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', width: '100%' }, children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: '8px' }, children: [onBack && _jsx(TMButton, { btnStyle: 'icon', icon: _jsx("div", { style: { backgroundColor: 'white', minWidth: '24px', minHeight: '24px', borderRadius: '24px', display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: _jsx(IconArrowLeft, { color: TMColors.primaryColor }) }), caption: SDKUI_Localizator.Back, onClick: onBack }), _jsxs("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center' }, children: [_jsx("p", { children: title }), Boolean(displayedItemsCount && displayedItemsCount > 0) && (_jsxs(_Fragment, { children: [_jsx(StyledBadge, { $backgroundColor: '#679CE8', children: displayedItemsCount }), Boolean(totalItems && totalItems > 0) && _jsx("span", { children: "\u00A0\u00A0/\u00A0" })] })), Boolean(totalItems && totalItems > 0) && _jsx(StyledBadge, { $backgroundColor: '#679CE8', children: totalItems })] })] }), _jsxs("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: '5px' }, children: [toolbar, onClose && _jsx(TMButton, { color: 'primaryOutline', caption: SDKUI_Localizator.Close, icon: _jsx("i", { className: 'dx-icon-remove', style: { color: "white" } }), btnStyle: 'icon', onClick: () => onClose?.() })] })] }) }), _jsxs(StyledSearchCardContent, { $height: showHeader ? "calc(100% - 35px)" : "100%", $padding: padding, $backgroundColor: backgroundColorContainer ?? `${TMColors.backgroundColorHeader}12`, children: [_jsx("div", { style: { width: items.length > 0 ? 'calc(100% - 30px)' : '100%' }, children: children }), items.length > 0 &&
                         _jsx(TMRightSidebar, { items: items, onItemClick: onItemClick, selectedItem: selectedItem, showPanel: showPanel })] })] }));
 };
 export default TMToolbarCard;

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;

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];
@@ -20,7 +31,7 @@ const VirtualRowComponent = memo(({ ariaAttributes, index, style, flattenedItems
             minWidth: '100%',
             paddingRight: 10,
             boxSizing: 'border-box'
-        }, children: _jsxs(StyledTreeNode, { "$isSelected": isSelected, children: [_jsx("div", { style: {
+        }, children: _jsxs(StyledTreeNode, { $isSelected: isSelected, children: [_jsx("div", { style: {
                         display: 'flex',
                         alignItems: 'center',
                         justifyContent: 'center',
@@ -54,13 +65,16 @@ const VirtualRowComponent = memo(({ ariaAttributes, index, style, flattenedItems
         return prevItem === nextItem;
     const prevNode = prevItem.node;
     const nextNode = nextItem.node;
-    // Controlla se questa riga specifica è cambiata
-    return (prevNode.key === nextNode.key &&
-        prevNode.expanded === nextNode.expanded &&
+    // Controlla se questa riga specifica è cambiata: confronta l'identità del nodo (non i soli
+    // campi key/expanded) per non lasciare visualizzato un nodo obsoleto. Gli handler non servono:
+    // hanno identità stabile e leggono lo stato dalle ref.
+    return (prevNode === nextNode &&
         prevItem.depth === nextItem.depth &&
         (prevNode.key === prevProps.focusedItemKey) === (nextNode.key === nextProps.focusedItemKey) &&
         prevProps.selectedItemKeys.has(prevNode.key) === nextProps.selectedItemKeys.has(nextNode.key) &&
-        prevProps.allowMultipleSelection === nextProps.allowMultipleSelection);
+        prevProps.allowMultipleSelection === nextProps.allowMultipleSelection &&
+        prevProps.itemRender === nextProps.itemRender &&
+        prevProps.onItemContextMenu === nextProps.onItemContextMenu);
 });
 const TMTreeView = ({ dataSource = [], focusedItem, selectedItems = [], allowMultipleSelection, onDataChanged, calculateItemsForNode, itemRender, onNodeUpdate, onFocusedItemChanged, onSelectionChanged, shouldDelayFocusOnEvent, onItemContextMenu, autoSelectChildren = true, itemsPerPage = 100, showLoadMoreButton = true, enableVirtualization = false }) => {
     // Altezza fissa per ogni riga nella virtualizzazione
@@ -71,12 +85,35 @@ const TMTreeView = ({ dataSource = [], focusedItem, selectedItems = [], allowMul
     // Ref per selectedItems - permette alle callback memoizzate di accedere sempre al valore più recente
     const selectedItemsRef = useRef(selectedItems);
     selectedItemsRef.current = selectedItems;
+    // Ref per props e callback usate dagli handler: una riga virtualizzata memoizzata conserva le
+    // props del render precedente, quindi gli handler non devono catturare lo stato nella closure.
+    const dataSourceRef = useRef(dataSource);
+    dataSourceRef.current = dataSource;
+    const autoSelectChildrenRef = useRef(autoSelectChildren);
+    autoSelectChildrenRef.current = autoSelectChildren;
+    const calculateItemsForNodeRef = useRef(calculateItemsForNode);
+    calculateItemsForNodeRef.current = calculateItemsForNode;
+    const onNodeUpdateRef = useRef(onNodeUpdate);
+    onNodeUpdateRef.current = onNodeUpdate;
+    const onDataChangedRef = useRef(onDataChanged);
+    onDataChangedRef.current = onDataChanged;
+    const onFocusedItemChangedRef = useRef(onFocusedItemChanged);
+    onFocusedItemChangedRef.current = onFocusedItemChanged;
+    const onSelectionChangedRef = useRef(onSelectionChanged);
+    onSelectionChangedRef.current = onSelectionChanged;
+    const shouldDelayFocusOnEventRef = useRef(shouldDelayFocusOnEvent);
+    shouldDelayFocusOnEventRef.current = shouldDelayFocusOnEvent;
     // Ref per handleCheckboxChange - permette all'useEffect di accedere alla funzione prima che sia definita
     const handleCheckboxChangeRef = useRef(() => { });
     // Filtra gli items da mostrare in base alla paginazione (definito prima per essere usato da flattenTreeWithDepth)
     const getVisibleItems = useCallback((node) => {
         if (!node.items)
             return [];
+        // Con la virtualizzazione react-window renderizza già solo le righe visibili:
+        // la paginazione nasconderebbe gli items oltre itemsPerPage senza renderizzare
+        // il paginatore, presente solo nel render standard (renderTree).
+        if (enableVirtualization)
+            return node.items;
         const totalItems = node.items.length;
         // Se non c'è paginazione attiva o gli items sono pochi, mostra tutti
         if (totalItems <= itemsPerPage || !showLoadMoreButton) {
@@ -87,7 +124,7 @@ const TMTreeView = ({ dataSource = [], focusedItem, selectedItems = [], allowMul
         const startIndex = currentPage * itemsPerPage;
         const endIndex = startIndex + itemsPerPage;
         return node.items.slice(startIndex, endIndex);
-    }, [itemsPerPage, showLoadMoreButton]);
+    }, [itemsPerPage, showLoadMoreButton, enableVirtualization]);
     // Misura le dimensioni del container per react-window
     useEffect(() => {
         if (!enableVirtualization || !containerRef.current)
@@ -121,15 +158,26 @@ const TMTreeView = ({ dataSource = [], focusedItem, selectedItems = [], allowMul
             return [];
         return flattenTreeWithDepth(dataSource);
     }, [enableVirtualization, dataSource, flattenTreeWithDepth]);
+    // Chiave dell'ultimo elemento verso cui si è effettivamente scrollato.
+    // Evita di ripetere lo scroll quando cambia solo la struttura dell'albero
+    // (es. espansione di un nodo) a parità di elemento focalizzato.
+    const lastScrolledKeyRef = useRef(undefined);
     // Scroll verso l'elemento focalizzato quando cambia (navigazione con frecce)
     useEffect(() => {
-        if (!focusedItem?.key)
+        if (!focusedItem?.key) {
+            lastScrolledKeyRef.current = undefined;
+            return;
+        }
+        // Focus invariato: l'effect è stato rieseguito solo perché l'albero è cambiato
+        // (espansione/collasso di un nodo). La posizione di scroll non va toccata.
+        if (lastScrolledKeyRef.current === focusedItem.key)
             return;
         if (enableVirtualization) {
             // Lista virtualizzata: usa scrollToRow per garantire che l'elemento sia visibile
             const index = flattenedItems.findIndex(item => item.node.key === focusedItem.key);
             if (index >= 0 && listRef.current) {
                 listRef.current.scrollToRow({ index, align: 'smart' });
+                lastScrolledKeyRef.current = focusedItem.key;
             }
         }
         else {
@@ -138,6 +186,7 @@ const TMTreeView = ({ dataSource = [], focusedItem, selectedItems = [], allowMul
                 const element = containerRef.current.querySelector(`[data-node-key="${focusedItem.key}"]`);
                 if (element) {
                     element.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+                    lastScrolledKeyRef.current = focusedItem.key;
                 }
             }
         }
@@ -146,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) {
@@ -211,7 +263,7 @@ const TMTreeView = ({ dataSource = [], focusedItem, selectedItems = [], allowMul
         const currentIndex = flatList.findIndex(item => item.key === currentItem.key);
         return flatList[currentIndex - 1] || null;
     };
-    const flattenTree = (nodes) => {
+    const flattenTree = useCallback((nodes) => {
         let flatList = [];
         nodes.forEach(node => {
             if (!node.hidden) {
@@ -222,45 +274,57 @@ const TMTreeView = ({ dataSource = [], focusedItem, selectedItems = [], allowMul
             }
         });
         return flatList;
-    };
-    const handleNodeToggle = async (key, ctrlKey) => {
-        const updateNodeRecursively = async (nodes) => {
-            const updatedNodes = await Promise.all(nodes.map(async (node) => {
-                if (node.key === key) {
-                    if (node.expanded) {
-                        // Collassa il nodo
-                        const updatedNode = { ...node, expanded: false };
-                        onNodeUpdate?.(updatedNode);
-                        return updatedNode;
-                    }
-                    else {
-                        // Espandi il nodo
-                        let newItems = node.items;
-                        // Solo se calculateItemsForNode è definito E (ctrl è premuto O non è già caricato)
-                        if (calculateItemsForNode && (ctrlKey || !node.isLoaded)) {
-                            // Se ctrl è premuto, passa un nodo con isLoaded resettato per forzare il refresh
-                            const nodeForCalculation = ctrlKey ? { ...node, isLoaded: false } : node;
-                            newItems = await calculateItemsForNode(nodeForCalculation);
-                            const updatedNode = { ...node, expanded: true, items: newItems, isLoaded: true };
-                            onNodeUpdate?.(updatedNode);
-                            return updatedNode;
-                        }
-                        // Altrimenti usa semplicemente gli items esistenti
-                        return { ...node, expanded: true };
-                    }
-                }
-                if (node.items) {
-                    const updatedItems = await updateNodeRecursively(node.items);
-                    return { ...node, items: updatedItems };
-                }
+    }, []);
+    const findNodeByKey = useCallback((nodes, key) => {
+        for (const node of nodes) {
+            if (node.key === key)
                 return node;
-            }));
-            return updatedNodes;
-        };
-        updateNodeRecursively(dataSource).then(updatedData => {
-            onDataChanged?.(updatedData);
+            if (node.items) {
+                const found = findNodeByKey(node.items, key);
+                if (found)
+                    return found;
+            }
+        }
+        return null;
+    }, []);
+    const handleNodeToggle = useCallback(async (key, ctrlKey) => {
+        // dataSourceRef è letta alla chiamata, non alla creazione della closure
+        const target = findNodeByKey(dataSourceRef.current, key);
+        if (!target)
+            return;
+        const calculateItems = calculateItemsForNodeRef.current;
+        let updatedNode;
+        if (target.expanded) {
+            // Collassa il nodo
+            updatedNode = { ...target, expanded: false };
+            onNodeUpdateRef.current?.(updatedNode);
+        }
+        else if (calculateItems && (ctrlKey || !target.isLoaded)) {
+            // Espandi il nodo caricando gli items.
+            // Solo se calculateItemsForNode è definito E (ctrl è premuto O non è già caricato).
+            // Se ctrl è premuto, passa un nodo con isLoaded resettato per forzare il refresh.
+            const nodeForCalculation = ctrlKey ? { ...target, isLoaded: false } : target;
+            const newItems = await calculateItems(nodeForCalculation);
+            updatedNode = { ...target, expanded: true, items: newItems, isLoaded: true };
+            onNodeUpdateRef.current?.(updatedNode);
+        }
+        else {
+            // Altrimenti usa semplicemente gli items esistenti
+            updatedNode = { ...target, expanded: true };
+        }
+        // Rimpiazzo sull'albero riletto dopo l'await: non sovrascrive i toggle fatti durante la fetch
+        let replaced = false;
+        const replaceNode = (nodes) => nodes.map(node => {
+            if (!replaced && node.key === key) {
+                replaced = true;
+                return updatedNode;
+            }
+            if (node.items)
+                return { ...node, items: replaceNode(node.items) };
+            return node;
         });
-    };
+        onDataChangedRef.current?.(replaceNode(dataSourceRef.current));
+    }, [findNodeByKey]);
     // Ref per distinguere click singolo/doppio sulla riga (esempio TMDcmtIcon)
     const clickTimeoutRef = useRef(null);
     const lastClickedNodeKeyRef = useRef(undefined);
@@ -271,7 +335,8 @@ const TMTreeView = ({ dataSource = [], focusedItem, selectedItems = [], allowMul
             return;
         }
         // Se shouldDelayFocusOnEvent non è fornita, il comportamento predefinito è il focus immediato (false)
-        const delayFocus = shouldDelayFocusOnEvent ? shouldDelayFocusOnEvent(node, e) : false;
+        const shouldDelay = shouldDelayFocusOnEventRef.current;
+        const delayFocus = shouldDelay ? shouldDelay(node, e) : false;
         // Reset del timer se il click è su un nodo diverso dal precedente
         if (lastClickedNodeKeyRef.current && lastClickedNodeKeyRef.current !== node.key) {
             if (clickTimeoutRef.current) {
@@ -287,7 +352,7 @@ const TMTreeView = ({ dataSource = [], focusedItem, selectedItems = [], allowMul
                 // Primo click: imposta il timer per il focus
                 lastClickedNodeKeyRef.current = node.key;
                 clickTimeoutRef.current = setTimeout(() => {
-                    onFocusedItemChanged?.(node);
+                    onFocusedItemChangedRef.current?.(node);
                     clickTimeoutRef.current = null;
                     lastClickedNodeKeyRef.current = undefined;
                 }, 200);
@@ -302,12 +367,14 @@ const TMTreeView = ({ dataSource = [], focusedItem, selectedItems = [], allowMul
                 clickTimeoutRef.current = null;
                 lastClickedNodeKeyRef.current = undefined;
             }
-            onFocusedItemChanged?.(node); // Chiama onFocusedItemChanged immediatamente
+            onFocusedItemChangedRef.current?.(node); // Chiama onFocusedItemChanged immediatamente
         }
-    }, [onFocusedItemChanged, calculateItemsForNode, onNodeUpdate]);
+    }, []);
     const handleCheckboxChange = useCallback((node, checked) => {
-        // Usa la ref per accedere sempre al valore più recente di selectedItems
+        // Usa le ref per accedere sempre ai valori più recenti
         const currentSelectedItems = selectedItemsRef.current;
+        const currentDataSource = dataSourceRef.current;
+        const autoSelect = autoSelectChildrenRef.current;
         // Funzione helper per trovare il parent di un nodo e verificare se tutti i suoi figli sono selezionati
         const findAndCheckParents = (items, targetNode, currentSelection) => {
             const parentsToAdd = [];
@@ -341,7 +408,7 @@ const TMTreeView = ({ dataSource = [], focusedItem, selectedItems = [], allowMul
         };
         let newSelectedItems;
         if (checked) {
-            if (node.isContainer && autoSelectChildren) {
+            if (node.isContainer && autoSelect) {
                 // Quando selezioni un container, aggiungi il container stesso + tutti i figli (se autoSelectChildren è true)
                 const allChildren = flattenTree(node.items || []);
                 // Rimuovi eventuali duplicati: filtra gli elementi già presenti nella selezione
@@ -353,8 +420,8 @@ const TMTreeView = ({ dataSource = [], focusedItem, selectedItems = [], allowMul
                 // Quando selezioni un figlio o un container con autoSelectChildren=false, aggiungi solo il nodo
                 newSelectedItems = [...currentSelectedItems, node];
                 // Verifica se selezionando questo figlio sono ora selezionati tutti i figli del parent (solo se autoSelectChildren è true)
-                if (autoSelectChildren) {
-                    const parentsToAdd = findAndCheckParents(dataSource, node, newSelectedItems);
+                if (autoSelect) {
+                    const parentsToAdd = findAndCheckParents(currentDataSource, node, newSelectedItems);
                     newSelectedItems = [...newSelectedItems, ...parentsToAdd];
                 }
             }
@@ -362,7 +429,7 @@ const TMTreeView = ({ dataSource = [], focusedItem, selectedItems = [], allowMul
                 newSelectedItems = currentSelectedItems;
             }
         }
-        else if (node.isContainer && autoSelectChildren) {
+        else if (node.isContainer && autoSelect) {
             // Quando deselezioni un container, rimuovi il container stesso + tutti i figli (solo se autoSelectChildren è true)
             const childKeys = flattenTree(node.items || []).map(item => item.key);
             newSelectedItems = currentSelectedItems.filter(item => item.key !== node.key && !childKeys.includes(item.key));
@@ -371,7 +438,7 @@ const TMTreeView = ({ dataSource = [], focusedItem, selectedItems = [], allowMul
             // Quando deselezioni un figlio o un container con autoSelectChildren=false, rimuovi solo il nodo
             newSelectedItems = currentSelectedItems.filter(item => item.key !== node.key);
             // Se il figlio apparteneva a un parent che era selezionato, rimuovi anche il parent (solo se autoSelectChildren è true)
-            if (autoSelectChildren && !node.isContainer) {
+            if (autoSelect && !node.isContainer) {
                 const removeParentContainers = (items) => {
                     const parentsToRemove = [];
                     items.forEach(item => {
@@ -386,26 +453,32 @@ const TMTreeView = ({ dataSource = [], focusedItem, selectedItems = [], allowMul
                     });
                     return parentsToRemove;
                 };
-                const parentsToRemove = removeParentContainers(dataSource);
+                const parentsToRemove = removeParentContainers(currentDataSource);
                 newSelectedItems = newSelectedItems.filter(item => !parentsToRemove.includes(item.key));
             }
         }
-        onSelectionChanged?.(newSelectedItems);
-    }, [autoSelectChildren, dataSource, onSelectionChanged]);
+        onSelectionChangedRef.current?.(newSelectedItems);
+    }, [flattenTree]);
     // Aggiorna la ref con l'ultima versione di handleCheckboxChange
     handleCheckboxChangeRef.current = handleCheckboxChange;
-    const hasPartialChildSelection = (node) => {
+    const hasPartialChildSelection = useCallback((node) => {
         // Lo stato indeterminate ha senso solo quando autoSelectChildren è true
-        if (!autoSelectChildren)
+        if (!autoSelectChildrenRef.current)
             return false;
         if (!node.isContainer || !node.items)
             return false;
         const childKeys = flattenTree(node.items).map(item => item.key);
-        const selectedChildKeys = selectedItems.map(item => item.key);
+        const selectedChildKeys = selectedItemsRef.current.map(item => item.key);
         const selectedCount = childKeys.filter(key => selectedChildKeys.includes(key)).length;
         return selectedCount > 0 && selectedCount < childKeys.length;
-    };
-    const hasVisibleItems = (node) => {
+    }, [flattenTree]);
+    const hasVisibleItems = useCallback((node) => {
+        // Nodo già caricato: conta i figli visibili (isExpandible è solo una stima a priori)
+        if (node.isLoaded) {
+            if (!node.items)
+                return false;
+            return node.items.filter(o => !o.hidden).length > 0;
+        }
         // If node has explicit isExpandible value, use that
         if (node.isExpandible !== undefined) {
             return node.isExpandible;
@@ -416,14 +489,14 @@ const TMTreeView = ({ dataSource = [], focusedItem, selectedItems = [], allowMul
         if (node.items.length <= 0)
             return false;
         return node.items.filter(o => !o.hidden).length > 0;
-    };
+    }, []);
     // Gestisce il cambio di pagina per un nodo
     const handlePageChange = useCallback((nodeKey, newPage) => {
         const updateNodePage = (nodes) => {
             return nodes.map(node => {
                 if (node.key === nodeKey) {
                     const updatedNode = { ...node, currentPage: newPage };
-                    onNodeUpdate?.(updatedNode);
+                    onNodeUpdateRef.current?.(updatedNode);
                     return updatedNode;
                 }
                 if (node.items) {
@@ -432,9 +505,9 @@ const TMTreeView = ({ dataSource = [], focusedItem, selectedItems = [], allowMul
                 return node;
             });
         };
-        const updatedData = updateNodePage(dataSource);
-        onDataChanged?.(updatedData);
-    }, [dataSource, onDataChanged, onNodeUpdate]);
+        const updatedData = updateNodePage(dataSourceRef.current);
+        onDataChangedRef.current?.(updatedData);
+    }, []);
     // Verifica se c'è bisogno del paginatore
     const needsPagination = useCallback((node) => {
         if (!showLoadMoreButton || !node.items)
@@ -448,7 +521,7 @@ const TMTreeView = ({ dataSource = [], focusedItem, selectedItems = [], allowMul
         return Math.ceil(node.items.length / itemsPerPage);
     }, [itemsPerPage]);
     const renderTree = useCallback((nodes) => {
-        return nodes.map(node => !node.hidden && (_jsxs("div", { style: { width: 'fit-content', minWidth: '100%', margin: 0, padding: 0 }, children: [_jsxs(StyledTreeNode, { "$isSelected": node.key === focusedItem?.key, "data-node-key": node.key, children: [_jsx("div", { style: {
+        return nodes.map(node => !node.hidden && (_jsxs("div", { style: { width: 'fit-content', minWidth: '100%', margin: 0, padding: 0 }, children: [_jsxs(StyledTreeNode, { $isSelected: node.key === focusedItem?.key, "data-node-key": node.key, children: [_jsx("div", { style: {
                                 display: 'flex',
                                 alignItems: 'center',
                                 justifyContent: 'center',
@@ -474,7 +547,7 @@ const TMTreeView = ({ dataSource = [], focusedItem, selectedItems = [], allowMul
                                     onItemContextMenu(node, e);
                                 }
                             }, children: itemRender(node) })] }), node.expanded && node.items && (_jsxs("div", { style: { paddingLeft: 20, width: 'fit-content', minWidth: '100%' }, children: [renderTree(getVisibleItems(node)), needsPagination(node) && (_jsxs(StyledStickyPaginator, { children: [_jsx(TMButton, { btnStyle: 'icon', onClick: () => handlePageChange(node.key, (node.currentPage ?? 0) - 1), showTooltip: false, caption: "\u25C4", icon: _jsx(IconArrowLeft, { color: 'white' }), disabled: (node.currentPage ?? 0) <= 0 }), _jsx("span", { style: { fontSize: '11px', whiteSpace: 'nowrap', fontWeight: 500, overflow: 'hidden', textOverflow: 'ellipsis', minWidth: 0, color: 'white' }, children: SDKUI_Localizator.PaginationInfo.replaceParams((node.currentPage ?? 0) + 1, getTotalPages(node), node.items?.length ?? 0) }), _jsx(TMButton, { btnStyle: 'icon', onClick: () => handlePageChange(node.key, (node.currentPage ?? 0) + 1), showTooltip: false, caption: "\u25BA", icon: _jsx(IconArrowRight, { color: 'white' }), disabled: (node.currentPage ?? 0) >= getTotalPages(node) - 1 })] }))] }))] }, node.key)));
-    }, [handleNodeClick, handleNodeToggle, handleCheckboxChange, focusedItem, selectedItems, allowMultipleSelection, getVisibleItems, needsPagination, handlePageChange, getTotalPages, onItemContextMenu]);
+    }, [handleNodeClick, handleNodeToggle, handleCheckboxChange, hasVisibleItems, hasPartialChildSelection, itemRender, focusedItem, selectedItems, allowMultipleSelection, getVisibleItems, needsPagination, handlePageChange, getTotalPages, onItemContextMenu]);
     // Calcola selectedItemKeys ad ogni render per garantire sincronizzazione con selectedItems
     const selectedItemKeys = new Set(selectedItems.map(s => s.key));
     // Memoizza rowPropsData per evitare re-render della List

package/lib/components/base/TMWaitPanel.js

@@ -1,4 +1,4 @@
-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 { createPortal } from 'react-dom';
 import styled from 'styled-components';
 import TMLayoutContainer from './TMLayout';
@@ -34,7 +34,7 @@ const StyledTitle = styled.h2 ` margin: 0; font-size: 1.5em; color: #333; `;
 const StyledProgressBarContainer = styled.div ` width: 100%; height: 20px; background: #e0e0e0; border-radius: 10px; overflow: hidden; margin: 20px 0; `;
 const StyledProgressBar = styled.div ` height: 100%; background: #4caf50; transition: width 0.3s ease; `;
 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 StyledMessage = styled.p ` color: #666; font-size: 0.9em; margin-top: 10px; white-space: pre-line; `;
 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, useHighZIndex } = props;
@@ -46,7 +46,7 @@ export const TMWaitPanel = (props) => {
     };
     let progressValue1 = calculateProgress(valuePrimary, maxValuePrimary);
     let progressValue2 = calculateProgress(valueSecondary, maxValueSecondary);
-    return (_jsx(StyledWaitPanelOverlay, { "$useHighZIndex": useHighZIndex, 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 })] }) }));
 };

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;