@topconsultnpm/sdkui-react 6.22.0-dev2.9 → 6.22.0-dev3.10

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) => import("react/jsx-runtime").JSX.Element;
+declare const TMTooltip: ({ children, position, content, hideAfterDelay, parentStyle, childStyle, allowContentInteraction }: ITMTooltipProps) => import("react/jsx-runtime").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.js

@@ -20,7 +20,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 +54,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 +74,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 +113,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 +147,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 +175,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;
                 }
             }
         }
@@ -211,7 +249,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 +260,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 +321,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 +338,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 +353,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 +394,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 +406,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 +415,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 +424,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 +439,26 @@ 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) => {
         // If node has explicit isExpandible value, use that
         if (node.isExpandible !== undefined) {
             return node.isExpandible;
@@ -416,14 +469,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 +485,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 +501,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 +527,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';
@@ -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/choosers/TMCultureIDPicker.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 { useState } from 'react';
 import styled from 'styled-components';
 import { IconSearch, SDKUI_Localizator } from '../../helper';
@@ -64,7 +64,7 @@ const TMCultureIDPicker = ({ selectedValue, onSelectCultureID, placeHolder, widt
         const isPlaceholder = selectedValue === placeHolder;
         return (_jsxs(StyledDivHorizontal, { style: { width: '100%', color: isPlaceholder ? '#a9a9a9' : 'inherit' }, children: [selectedValue && _jsx("img", { src: getCultureIDImg(selectedValue), alt: "Lang", width: 16, height: 16, style: { marginRight: '8px' } }), selectedValue && _jsx("p", { children: getCultureIDName(selectedValue) })] }));
     };
-    return (_jsxs(_Fragment, { children: [_jsx(TMSummary, { width: width, icon: icon, buttons: buttons, readOnly: readOnly, backgroundColor: backgroundColor, showBorder: true, hasValue: selectedValue !== undefined, showClearButton: showClearButton, iconEditButton: _jsx(IconSearch, { fontSize: 16 }), onEditorClick: () => !readOnly && setShowPicker(true), elementStyle: elementStyle, isModifiedWhen: isModifiedWhen, label: label, openEditorOnSummaryClick: openChooserBySingleClick, template: renderTemplate(), onClearClick: showClearButton ? () => { onValueChanged?.([]); } : undefined, validationItems: validationItems }), showPicker && _jsx(TMModal, { title: label || SDKUI_Localizator.Select, onClose: () => setShowPicker(false), isModal: true, width: "450px", height: "255px", children: _jsx(PickerContainer, { children: _jsx(ItemsContainer, { children: CULTUREIDs_DATASOURCE.map(item => (_jsxs(CultureItem, { "$isSelected": item.value === selectedValue, onClick: () => {
+    return (_jsxs(_Fragment, { children: [_jsx(TMSummary, { width: width, icon: icon, buttons: buttons, readOnly: readOnly, backgroundColor: backgroundColor, showBorder: true, hasValue: selectedValue !== undefined, showClearButton: showClearButton, iconEditButton: _jsx(IconSearch, { fontSize: 16 }), onEditorClick: () => !readOnly && setShowPicker(true), elementStyle: elementStyle, isModifiedWhen: isModifiedWhen, label: label, openEditorOnSummaryClick: openChooserBySingleClick, template: renderTemplate(), onClearClick: showClearButton ? () => { onValueChanged?.([]); } : undefined, validationItems: validationItems }), showPicker && _jsx(TMModal, { title: label || SDKUI_Localizator.Select, onClose: () => setShowPicker(false), isModal: true, width: "450px", height: "255px", children: _jsx(PickerContainer, { children: _jsx(ItemsContainer, { children: CULTUREIDs_DATASOURCE.map(item => (_jsxs(CultureItem, { $isSelected: item.value === selectedValue, onClick: () => {
                                 onSelectCultureID(item.value);
                                 setShowPicker(false);
                             }, children: [_jsx(FlagIcon, { children: item.icon }), _jsx("span", { children: item.display })] }, item.value))) }) }) })] }));

package/lib/components/choosers/TMDataListItemChooser.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 React, { useEffect, useMemo, useRef, useState } from 'react';
 import { SDK_Localizator, DataListCacheService } from '@topconsultnpm/sdk-ts';
 import { StyledDivHorizontal } from '../base/Styled';

package/lib/components/choosers/TMDataListItemPicker.js

@@ -1,4 +1,4 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import styled, { keyframes } from 'styled-components';
 import { DataListCacheService, SDK_Localizator, ObjectClasses, JobTypes } from '@topconsultnpm/sdk-ts';
@@ -255,6 +255,6 @@ const TMDataListItemPicker = ({ dataListID, selectedValue, onItemSelect, onItemE
     if (!dataList || !items || items.length === 0) {
         return (_jsxs(PickerContainer, { children: [_jsx(Label, { children: dataList ? `${SDK_Localizator.DataList}: ${dataList.name}` : SDKUI_Localizator.NoDataToDisplay }), _jsx(ItemsContainer, { children: allowEdit && (_jsxs(AddButton, { onClick: handleCreateNew, children: ["+ ", SDKUI_Localizator.NewMale] })) }), !allowEdit && _jsx("p", { children: SDKUI_Localizator.NoDataToDisplay })] }));
     }
-    return (_jsxs(PickerContainer, { children: [_jsx(Label, { children: `${SDK_Localizator.DataList}: ${dataList.name}` }), _jsxs(ItemsContainer, { children: [items.map((item, index) => (_jsxs(ItemWrapper, { children: [_jsxs(StatusItem, { "$isSelected": item.value === selectedValue, "$index": index, onClick: () => onItemSelect(item), onDoubleClick: () => allowEdit && handleEdit(item), children: [item.imageID && _jsx(TMImageLibrary, { imageID: item.imageID }), _jsx("span", { children: item.name })] }), allowEdit && (_jsx(DeleteButton, { onClick: (e) => handleDelete(item, e), title: SDKUI_Localizator.Delete || 'Delete', "aria-label": "Delete item", children: _jsx(IconDelete, { fontSize: 16 }) }))] }, item.value))), allowEdit && (_jsxs(AddButton, { onClick: handleCreateNew, children: ["+ ", SDKUI_Localizator.NewMale] }))] }), _jsx(TMDataListItemEditor, { isOpen: showEditDialog, item: editingItem, isCreating: isCreating, onClose: handleCloseDialog, onSave: handleSave })] }));
+    return (_jsxs(PickerContainer, { children: [_jsx(Label, { children: `${SDK_Localizator.DataList}: ${dataList.name}` }), _jsxs(ItemsContainer, { children: [items.map((item, index) => (_jsxs(ItemWrapper, { children: [_jsxs(StatusItem, { $isSelected: item.value === selectedValue, $index: index, onClick: () => onItemSelect(item), onDoubleClick: () => allowEdit && handleEdit(item), children: [item.imageID && _jsx(TMImageLibrary, { imageID: item.imageID }), _jsx("span", { children: item.name })] }), allowEdit && (_jsx(DeleteButton, { onClick: (e) => handleDelete(item, e), title: SDKUI_Localizator.Delete || 'Delete', "aria-label": "Delete item", children: _jsx(IconDelete, { fontSize: 16 }) }))] }, item.value))), allowEdit && (_jsxs(AddButton, { onClick: handleCreateNew, children: ["+ ", SDKUI_Localizator.NewMale] }))] }), _jsx(TMDataListItemEditor, { isOpen: showEditDialog, item: editingItem, isCreating: isCreating, onClose: handleCloseDialog, onSave: handleSave })] }));
 };
 export default TMDataListItemPicker;

package/lib/components/choosers/TMDcmtTypeChooser.js

@@ -1,13 +1,14 @@
-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 { useEffect, useState } from 'react';
 import { AccessLevelsEx, DcmtTypeListCacheService, SDK_Globals, SDK_Localizator } from '@topconsultnpm/sdk-ts';
 import TMSpinner from '../base/TMSpinner';
 import { IconSearch, SDKUI_Localizator } from '../../helper';
+import { FontSize } from '../../utils/theme';
 import { StyledDivHorizontal } from '../base/Styled';
 import TMTidViewer, { TMDcmtTypeIcon } from '../viewers/TMTidViewer';
 import TMSummary from '../editors/TMSummary';
 import TMChooserForm from '../forms/TMChooserForm';
-const TMDcmtTypeChooser = ({ tmSession, dataSource, disabled, backgroundColor, filter, accessFilter = 'all', showEditButton = true, borderRadius = '4px', buttons = [], placeHolder = `<${SDKUI_Localizator.NoneSelection}>`, openEditorOnSummaryClick, showBorder = true, showId = false, elementStyle, allowMultipleSelection, ShowOnlyDcmtTypes, ShowOnlySAP, filterTemplateTID, values, isModifiedWhen, label, width, height, showClearButton = false, validationItems = [], onValueChanged, updateIsModalOpen }) => {
+const TMDcmtTypeChooser = ({ tmSession, dataSource, disabled, backgroundColor, icon, filter, accessFilter = 'all', showEditButton = true, borderRadius = '4px', fontSize = FontSize.defaultFontSize, buttons = [], placeHolder = `<${SDKUI_Localizator.NoneSelection}>`, openEditorOnSummaryClick, showBorder = true, showId = false, elementStyle, allowMultipleSelection, ShowOnlyDcmtTypes, ShowOnlySAP, filterTemplateTID, values, isModifiedWhen, label, width, height, showClearButton = false, validationItems = [], onValueChanged, updateIsModalOpen }) => {
     const [showChooser, setShowChooser] = useState(false);
     useEffect(() => {
         TMSpinner.show({ description: `${SDKUI_Localizator.Loading} - ${SDK_Localizator.ListDcmtTypeOrView} ...` });
@@ -15,9 +16,9 @@ const TMDcmtTypeChooser = ({ tmSession, dataSource, disabled, backgroundColor, f
         DcmtTypeListCacheService.GetFromTIDsAsync(values, false, tms).then(() => { TMSpinner.hide(); });
     }, [values]);
     const renderTemplate = () => {
-        return (_jsxs(StyledDivHorizontal, { style: { width: 'max-content', height: '100%' }, children: [values && _jsx(TMTidViewer, { tmSession: tmSession, tid: values[0], showIcon: true, showId: showId, noneSelectionText: placeHolder }), values && values.length > 1 && _jsx("p", { style: { marginLeft: '10px' }, children: `(+${values.length - 1} ${values.length == 2 ? 'altro' : 'altri'})` })] }));
+        return (_jsxs(StyledDivHorizontal, { style: { width: 'max-content', height: '100%' }, children: [values && _jsx(TMTidViewer, { tmSession: tmSession, tid: values[0], color: 'inherit', showIcon: true, showId: showId, noneSelectionText: placeHolder }), values && values.length > 1 && _jsx("p", { style: { margin: 0, marginLeft: '10px' }, children: `(+${values.length - 1} ${values.length == 2 ? 'altro' : 'altri'})` })] }));
     };
-    return (_jsxs(_Fragment, { children: [_jsx(TMSummary, { backgroundColor: backgroundColor, buttons: buttons, showBorder: showBorder, borderRadius: borderRadius, hasValue: values && values.length > 0, showClearButton: showClearButton, showEditButton: showEditButton, iconEditButton: _jsx(IconSearch, { fontSize: 16 }), onEditorClick: () => {
+    return (_jsxs(_Fragment, { children: [_jsx(TMSummary, { backgroundColor: backgroundColor, icon: icon, disabled: disabled, fontSize: fontSize, buttons: buttons, showBorder: showBorder, borderRadius: borderRadius, hasValue: values && values.length > 0, showClearButton: showClearButton, showEditButton: showEditButton, iconEditButton: _jsx(IconSearch, { fontSize: 16 }), onEditorClick: () => {
                     if (!disabled) {
                         setShowChooser(true);
                         updateIsModalOpen?.(true);

package/lib/components/choosers/TMDiskChooser.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 { useEffect, useMemo, useState } from 'react';
 import { SDK_Localizator, SDK_Globals } from '@topconsultnpm/sdk-ts';
 import { StyledDivHorizontal } from '../base/Styled';

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { LayoutModes } from '@topconsultnpm/sdk-ts';
+import { TMDistinctValuesEventArgs } from '../../hooks/useTMDistinctValuesSelection';
 interface ITMDistinctValues {
     tid: number | undefined;
     mid: number | undefined;
@@ -8,14 +9,15 @@ interface ITMDistinctValues {
     allowAppendMode?: boolean;
     showHeader?: boolean;
     isModal?: boolean;
-    onSelectionChanged?: (e: DistinctValuesEventArgs) => void;
+    onSelectionChanged?: (e: TMDistinctValuesEventArgs) => void;
     onClosePanelCallback?: () => void;
 }
-type DistinctValuesEventArgs = {
-    tid: number | undefined;
-    mid: number | undefined;
-    newValue: string | undefined;
-    isAppendMode: boolean;
-};
+/**
+ * Pannello da cui si preleva il valore di un campo del form scegliendolo fra quelli già archiviati.
+ *
+ * Le due sorgenti (valori distinti del metadato e ricerca rapida su una ricerca salvata) stanno in due hook
+ * dedicati che espongono la stessa interfaccia (righe, colonne, conteggi): qui restano la composizione,
+ * la scelta della sorgente da mostrare e il render.
+ */
 declare const TMDistinctValues: React.FC<ITMDistinctValues>;
 export default TMDistinctValues;