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

package/lib/components/base/TMTreeView.js

@@ -1,9 +1,147 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, memo } from 'react';
+import { List } from 'react-window';
 import styled from 'styled-components';
 import { IconArrowLeft, IconArrowRight, IconChevronDown, IconChevronRight, SDKUI_Localizator } from '../../helper';
 import TMButton from './TMButton';
-const TMTreeView = ({ dataSource = [], focusedItem, selectedItems = [], allowMultipleSelection, onDataChanged, calculateItemsForNode, itemRender, onNodeUpdate, onFocusedItemChanged, onSelectionChanged, shouldDelayFocusOnEvent, onItemContextMenu, autoSelectChildren = true, itemsPerPage = 100, showLoadMoreButton = true }) => {
+// 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];
+    if (!item)
+        return null;
+    const { node, depth } = item;
+    const isSelected = node.key === focusedItemKey;
+    return (_jsx("div", { ...ariaAttributes, "data-node-key": node.key, style: {
+            ...style,
+            paddingLeft: depth * 20,
+            display: 'flex',
+            alignItems: 'center',
+            width: 'fit-content',
+            minWidth: '100%',
+            paddingRight: 10,
+            boxSizing: 'border-box'
+        }, children: _jsxs(StyledTreeNode, { "$isSelected": isSelected, children: [_jsx("div", { style: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        minHeight: '18px',
+                        minWidth: '18px',
+                        maxHeight: '18px',
+                        maxWidth: '18px',
+                        flexShrink: 0
+                    }, onClick: (e) => { handleNodeToggle(node.key, e.ctrlKey); }, children: hasVisibleItems(node)
+                        ? node.expanded
+                            ? _jsx(IconChevronDown, { cursor: 'pointer', fontSize: 14 })
+                            : _jsx(IconChevronRight, { cursor: 'pointer', fontSize: 14 })
+                        : _jsx("div", { style: { height: '18px', width: '18px' } }) }), allowMultipleSelection && (_jsx("input", { type: "checkbox", checked: selectedItemKeys.has(node.key), onChange: (e) => handleCheckboxChange(node, e.target.checked), onClick: (e) => e.stopPropagation(), style: { flexShrink: 0 }, ref: input => {
+                        if (input) {
+                            // Imposta lo stato visuale "trattino" sulla checkbox quando il container
+                            // ha alcuni figli selezionati ma non tutti. Necessario usare ref perché
+                            // "indeterminate" è una proprietà DOM, non un attributo HTML.
+                            input.indeterminate = hasPartialChildSelection(node);
+                        }
+                    } })), _jsx(StyledItemContent, { onClick: (e) => { handleNodeClick(node, e); }, onContextMenu: (e) => {
+                        if (onItemContextMenu) {
+                            e.preventDefault();
+                            onItemContextMenu(node, e);
+                        }
+                    }, children: itemRender(node) })] }) }));
+}, (prevProps, nextProps) => {
+    // Custom comparison: re-render solo se i dati rilevanti per questa riga cambiano
+    const prevItem = prevProps.flattenedItems[prevProps.index];
+    const nextItem = nextProps.flattenedItems[nextProps.index];
+    if (!prevItem || !nextItem)
+        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 &&
+        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);
+});
+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
+    const VIRTUAL_ROW_HEIGHT = 26;
+    const listRef = useRef(null);
+    const containerRef = useRef(null);
+    const [containerSize, setContainerSize] = React.useState({ width: 0, height: 0 });
+    // Ref per selectedItems - permette alle callback memoizzate di accedere sempre al valore più recente
+    const selectedItemsRef = useRef(selectedItems);
+    selectedItemsRef.current = selectedItems;
+    // 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 [];
+        const totalItems = node.items.length;
+        // Se non c'è paginazione attiva o gli items sono pochi, mostra tutti
+        if (totalItems <= itemsPerPage || !showLoadMoreButton) {
+            return node.items;
+        }
+        // Altrimenti mostra solo gli items della pagina corrente
+        const currentPage = node.currentPage ?? 0;
+        const startIndex = currentPage * itemsPerPage;
+        const endIndex = startIndex + itemsPerPage;
+        return node.items.slice(startIndex, endIndex);
+    }, [itemsPerPage, showLoadMoreButton]);
+    // Misura le dimensioni del container per react-window
+    useEffect(() => {
+        if (!enableVirtualization || !containerRef.current)
+            return;
+        const resizeObserver = new ResizeObserver((entries) => {
+            for (const entry of entries) {
+                const { width, height } = entry.contentRect;
+                setContainerSize({ width, height });
+            }
+        });
+        resizeObserver.observe(containerRef.current);
+        return () => resizeObserver.disconnect();
+    }, [enableVirtualization]);
+    // Flatten tree con informazioni di profondità per la virtualizzazione
+    const flattenTreeWithDepth = useCallback((nodes, depth = 0, parentKey) => {
+        let flatList = [];
+        nodes.forEach(node => {
+            if (!node.hidden) {
+                flatList.push({ node, depth, parentKey });
+                if (node.expanded && node.items) {
+                    const visibleItems = getVisibleItems(node);
+                    flatList = flatList.concat(flattenTreeWithDepth(visibleItems, depth + 1, node.key));
+                }
+            }
+        });
+        return flatList;
+    }, [getVisibleItems]);
+    // Lista piatta per la virtualizzazione
+    const flattenedItems = useMemo(() => {
+        if (!enableVirtualization)
+            return [];
+        return flattenTreeWithDepth(dataSource);
+    }, [enableVirtualization, dataSource, flattenTreeWithDepth]);
+    // Scroll verso l'elemento focalizzato quando cambia (navigazione con frecce)
+    useEffect(() => {
+        if (!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' });
+            }
+        }
+        else {
+            // Lista standard: usa scrollIntoView
+            if (containerRef.current) {
+                const element = containerRef.current.querySelector(`[data-node-key="${focusedItem.key}"]`);
+                if (element) {
+                    element.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+                }
+            }
+        }
+    }, [focusedItem?.key, enableVirtualization, flattenedItems]);
     useEffect(() => {
         const handleKeyDown = (event) => {
             if (!focusedItem)
@@ -33,9 +171,14 @@ const TMTreeView = ({ dataSource = [], focusedItem, selectedItems = [], allowMul
                         handled = true;
                     }
                     break;
-                // case ' ':
-                // 	allowMultipleSelection && handleCheckboxChange(focusedItem, !selectedItems.some(item => item.key === focusedItem.key));
-                // 	break;
+                case ' ':
+                case 'Spacebar': // IE/Edge legacy
+                    if (allowMultipleSelection) {
+                        const isCurrentlySelected = selectedItemsRef.current.some(item => item.key === focusedItem.key);
+                        handleCheckboxChangeRef.current(focusedItem, !isCurrentlySelected);
+                        handled = true;
+                    }
+                    break;
                 // case '*':
                 // 	handleExpandAllNodes();
                 // 	break;
@@ -57,7 +200,7 @@ const TMTreeView = ({ dataSource = [], focusedItem, selectedItems = [], allowMul
         return () => {
             window.removeEventListener('keydown', handleKeyDown, true);
         };
-    }, [focusedItem, dataSource, onFocusedItemChanged]);
+    }, [focusedItem, dataSource, onFocusedItemChanged, allowMultipleSelection]);
     const findNextItem = (nodes, currentItem) => {
         const flatList = flattenTree(nodes);
         const currentIndex = flatList.findIndex(item => item.key === currentItem.key);
@@ -138,22 +281,19 @@ const TMTreeView = ({ dataSource = [], focusedItem, selectedItems = [], allowMul
         }
         if (delayFocus) {
             // Logica per il ritardo del focus (es. click singolo su icona desktop, gestito dal padre)
-            if (clickTimeoutRef.current) {
-                // Questo è il secondo click di un potenziale doppio click.
-                // Annulla l'azione di focus dal click singolo precedente.
-                clearTimeout(clickTimeoutRef.current);
-                clickTimeoutRef.current = null;
-                lastClickedNodeKeyRef.current = undefined;
-                return; // Non attivare onFocusedItemChanged per il doppio click
+            // Il focus viene ritardato per permettere al doppio click di registrarsi sull'icona,
+            // ma il focus avviene comunque (sia con click singolo che doppio)
+            if (!clickTimeoutRef.current) {
+                // Primo click: imposta il timer per il focus
+                lastClickedNodeKeyRef.current = node.key;
+                clickTimeoutRef.current = setTimeout(() => {
+                    onFocusedItemChanged?.(node);
+                    clickTimeoutRef.current = null;
+                    lastClickedNodeKeyRef.current = undefined;
+                }, 200);
             }
-            // Primo click di un potenziale doppio click o un click singolo che necessita di ritardo
-            lastClickedNodeKeyRef.current = node.key;
-            clickTimeoutRef.current = setTimeout(() => {
-                // Se il timer scade, significa che è stato solo un click singolo.
-                onFocusedItemChanged?.(node);
-                clickTimeoutRef.current = null;
-                lastClickedNodeKeyRef.current = undefined;
-            }, 200);
+            // Se c'è già un timer attivo (secondo click di doppio click), non fare nulla
+            // Il focus avverrà comunque quando scade il timer del primo click
         }
         else {
             // Logica per il focus immediato (per tutti gli altri click, o se shouldDelayFocusOnEvent è false)
@@ -165,7 +305,9 @@ const TMTreeView = ({ dataSource = [], focusedItem, selectedItems = [], allowMul
             onFocusedItemChanged?.(node); // Chiama onFocusedItemChanged immediatamente
         }
     }, [onFocusedItemChanged, calculateItemsForNode, onNodeUpdate]);
-    const handleCheckboxChange = (node, checked) => {
+    const handleCheckboxChange = useCallback((node, checked) => {
+        // Usa la ref per accedere sempre al valore più recente di selectedItems
+        const currentSelectedItems = selectedItemsRef.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 = [];
@@ -202,11 +344,14 @@ const TMTreeView = ({ dataSource = [], focusedItem, selectedItems = [], allowMul
             if (node.isContainer && autoSelectChildren) {
                 // Quando selezioni un container, aggiungi il container stesso + tutti i figli (se autoSelectChildren è true)
                 const allChildren = flattenTree(node.items || []);
-                newSelectedItems = [...selectedItems, node, ...allChildren];
+                // Rimuovi eventuali duplicati: filtra gli elementi già presenti nella selezione
+                const childrenKeys = new Set(allChildren.map(child => child.key));
+                const filteredSelectedItems = currentSelectedItems.filter(item => !childrenKeys.has(item.key) && item.key !== node.key);
+                newSelectedItems = [...filteredSelectedItems, node, ...allChildren];
             }
-            else if (!selectedItems.some(item => item.key === node.key)) {
+            else if (!currentSelectedItems.some(item => item.key === node.key)) {
                 // Quando selezioni un figlio o un container con autoSelectChildren=false, aggiungi solo il nodo
-                newSelectedItems = [...selectedItems, node];
+                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);
@@ -214,17 +359,17 @@ const TMTreeView = ({ dataSource = [], focusedItem, selectedItems = [], allowMul
                 }
             }
             else {
-                newSelectedItems = selectedItems;
+                newSelectedItems = currentSelectedItems;
             }
         }
         else if (node.isContainer && autoSelectChildren) {
             // 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 = selectedItems.filter(item => item.key !== node.key && !childKeys.includes(item.key));
+            newSelectedItems = currentSelectedItems.filter(item => item.key !== node.key && !childKeys.includes(item.key));
         }
         else {
             // Quando deselezioni un figlio o un container con autoSelectChildren=false, rimuovi solo il nodo
-            newSelectedItems = selectedItems.filter(item => item.key !== node.key);
+            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) {
                 const removeParentContainers = (items) => {
@@ -246,28 +391,10 @@ const TMTreeView = ({ dataSource = [], focusedItem, selectedItems = [], allowMul
             }
         }
         onSelectionChanged?.(newSelectedItems);
-    };
-    // const handleExpandAllNodes = () => {
-    // 	const expandAll = (nodes: T[]): T[] => {
-    // 		return nodes.map(node => ({
-    // 			...node,
-    // 			expanded: true,
-    // 			items: node.items ? expandAll(node.items as T[]) : node.items
-    // 		}));
-    // 	};
-    // 	setTreeData(prevData => expandAll(prevData));
-    // };
-    // const handleCollapseAllNodes = () => {
-    // 	const collapseAll = (nodes: T[]): T[] => {
-    // 		return nodes.map(node => ({
-    // 			...node,
-    // 			expanded: false,
-    // 			items: node.items ? collapseAll(node.items as T[]) : node.items
-    // 		}));
-    // 	};
-    // 	setTreeData(prevData => collapseAll(prevData));
-    // };
-    const isIndeterminate = (node) => {
+    }, [autoSelectChildren, dataSource, onSelectionChanged]);
+    // Aggiorna la ref con l'ultima versione di handleCheckboxChange
+    handleCheckboxChangeRef.current = handleCheckboxChange;
+    const hasPartialChildSelection = (node) => {
         // Lo stato indeterminate ha senso solo quando autoSelectChildren è true
         if (!autoSelectChildren)
             return false;
@@ -278,13 +405,6 @@ const TMTreeView = ({ dataSource = [], focusedItem, selectedItems = [], allowMul
         const selectedCount = childKeys.filter(key => selectedChildKeys.includes(key)).length;
         return selectedCount > 0 && selectedCount < childKeys.length;
     };
-    const isFullySelected = (node) => {
-        if (!node.isContainer || !node.items)
-            return false;
-        const childKeys = flattenTree(node.items).map(item => item.key);
-        const selectedChildKeys = selectedItems.map(item => item.key);
-        return childKeys.every(key => selectedChildKeys.includes(key));
-    };
     const hasVisibleItems = (node) => {
         // If node has explicit isExpandible value, use that
         if (node.isExpandible !== undefined) {
@@ -315,21 +435,6 @@ const TMTreeView = ({ dataSource = [], focusedItem, selectedItems = [], allowMul
         const updatedData = updateNodePage(dataSource);
         onDataChanged?.(updatedData);
     }, [dataSource, onDataChanged, onNodeUpdate]);
-    // Filtra gli items da mostrare in base alla paginazione
-    const getVisibleItems = useCallback((node) => {
-        if (!node.items)
-            return [];
-        const totalItems = node.items.length;
-        // Se non c'è paginazione attiva o gli items sono pochi, mostra tutti
-        if (totalItems <= itemsPerPage || !showLoadMoreButton) {
-            return node.items;
-        }
-        // Altrimenti mostra solo gli items della pagina corrente
-        const currentPage = node.currentPage ?? 0;
-        const startIndex = currentPage * itemsPerPage;
-        const endIndex = startIndex + itemsPerPage;
-        return node.items.slice(startIndex, endIndex);
-    }, [itemsPerPage, showLoadMoreButton]);
     // Verifica se c'è bisogno del paginatore
     const needsPagination = useCallback((node) => {
         if (!showLoadMoreButton || !node.items)
@@ -343,7 +448,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: '100%', margin: 0, padding: 0 }, children: [_jsxs(StyledTreeNode, { "$isSelected": node.key === focusedItem?.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',
@@ -358,28 +463,86 @@ const TMTreeView = ({ dataSource = [], focusedItem, selectedItems = [], allowMul
                                     : _jsx(IconChevronRight, { cursor: 'pointer', fontSize: 14 })
                                 : _jsx("div", { style: { height: '18px', width: '18px' } }) }), allowMultipleSelection && (_jsx("input", { type: "checkbox", checked: selectedItems.some(item => item.key === node.key), onChange: (e) => handleCheckboxChange(node, e.target.checked), onClick: (e) => e.stopPropagation(), style: { flexShrink: 0 }, ref: input => {
                                 if (input) {
-                                    input.indeterminate = isIndeterminate(node);
+                                    // Imposta lo stato visuale "trattino" (➖) sulla checkbox quando il container
+                                    // ha alcuni figli selezionati ma non tutti. Necessario usare ref perché
+                                    // "indeterminate" è una proprietà DOM, non un attributo HTML.
+                                    input.indeterminate = hasPartialChildSelection(node);
                                 }
-                            } })), _jsx("div", { style: { display: 'flex', alignItems: 'center', flex: 1, minWidth: 0 }, onClick: (e) => { handleNodeClick(node, e); }, onContextMenu: (e) => {
+                            } })), _jsx(StyledItemContent, { onClick: (e) => { handleNodeClick(node, e); }, onContextMenu: (e) => {
                                 if (onItemContextMenu) {
                                     e.preventDefault();
                                     onItemContextMenu(node, e);
                                 }
-                            }, children: itemRender(node) })] }), node.expanded && node.items && (_jsxs("div", { style: { paddingLeft: 20, width: '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)));
+                            }, 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]);
-    return (_jsx("div", { style: { height: '100%', width: '100%', overflowY: 'auto', overflowX: 'hidden', padding: '0px 5px 2px 2px' }, children: renderTree(dataSource) }));
+    // 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
+    const rowPropsData = useMemo(() => ({
+        flattenedItems,
+        focusedItemKey: focusedItem?.key,
+        selectedItemKeys,
+        allowMultipleSelection,
+        hasVisibleItems,
+        handleNodeToggle,
+        handleNodeClick,
+        handleCheckboxChange,
+        hasPartialChildSelection: hasPartialChildSelection,
+        itemRender,
+        onItemContextMenu
+    }), [
+        flattenedItems,
+        focusedItem?.key,
+        selectedItemKeys,
+        allowMultipleSelection,
+        hasVisibleItems,
+        handleNodeToggle,
+        handleNodeClick,
+        handleCheckboxChange,
+        hasPartialChildSelection,
+        itemRender,
+        onItemContextMenu
+    ]);
+    // Render virtualizzato con react-window v2
+    if (enableVirtualization) {
+        return (_jsx(StyledTreeContainer, { ref: containerRef, children: containerSize.height > 0 && (_jsx(List, { listRef: listRef, rowCount: flattenedItems.length, rowHeight: VIRTUAL_ROW_HEIGHT, rowComponent: VirtualRowComponent, rowProps: rowPropsData, style: { height: containerSize.height, width: '100%' }, overscanCount: 5 })) }));
+    }
+    // Render standard (non virtualizzato) con scrolling orizzontale
+    return (_jsx(StyledTreeContainer, { ref: containerRef, children: _jsx("div", { children: renderTree(dataSource) }) }));
 };
 export default TMTreeView;
+// Container principale con scrolling orizzontale
+export const StyledTreeContainer = styled.div `
+	height: 100%;
+	width: 100%;
+	overflow-y: auto;
+	overflow-x: auto;
+	padding: 0px 0px 2px 2px;
+
+	/* Contenitore interno che si espande per accomodare nodi annidati */
+	& > div {
+		width: fit-content;
+		min-width: 100%;
+	}
+`;
+// Contenuto dell'item - niente ellipsis per permettere scrolling orizzontale del container
+export const StyledItemContent = styled.div `
+	display: flex;
+	align-items: center;
+	flex-shrink: 0;
+	white-space: nowrap;
+`;
 export const StyledTreeNode = styled.div `
 	display: flex;
 	flex-direction: row;
-	width: 100%;
-	min-width: 0;
+	width: fit-content;
+	min-width: 100%;
 	min-height: 22px;
 	max-height: 30px;
 	gap: 5px;
 	align-items: center;
 	padding: 0;
+	padding-right: 10px; /* Spazio extra a destra per evitare che il testo tocchi il bordo */
 	margin: 0;
 	background: ${(props) => props.$isSelected ? 'oklch(from var(--dx-color-primary) l c h / .2) !important' : 'transparent'};
 

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

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

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

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

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

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

package/lib/components/base/TMWaitPanel.js

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

package/lib/components/choosers/TMDistinctValues.js

@@ -11,7 +11,7 @@ import TMPanel from '../base/TMPanel';
 import TMModal from '../base/TMModal';
 import { useDataListItem } from '../../hooks/useDataListItem';
 import { useDataUserIdItem } from '../../hooks/useDataUserIdItem';
-const StyledDistinctValues = styled.div `display: flex; flex-direction: column; height: 100%; overflow: hidden; gap: 10px;`;
+const StyledDistinctValues = styled.div `display: flex; flex-direction: column; height: 100%; overflow: hidden; gap: 10px; position: relative;`;
 const TMDistinctValues = ({ tid, mid, layoutMode = LayoutModes.None, allowAppendMode = true, showHeader = true, isModal, separator = " ", onSelectionChanged, onClosePanelCallback }) => {
     const [focusedItem, setFocusedItem] = useState();
     const [dataSource, setDataSource] = useState([]);

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

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

package/lib/components/choosers/TMDynDataListItemChooser.js

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

package/lib/components/choosers/TMGroupChooser.js

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

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

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

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

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

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

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

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

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