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

package/lib/components/NewComponents/ContextMenu/TMContextMenu.js

@@ -395,26 +395,31 @@ const TMContextMenu = ({ items, trigger = 'right', children, target, externalCon
             ];
         });
     };
-    // Caps overflowing submenus with max-height + scroll so every item stays reachable.
     useLayoutEffect(() => {
         if (hoveredSubmenus.length === 0)
             return;
-        const padding = 8;
-        const submenus = document.querySelectorAll('[data-submenu="true"]');
-        submenus.forEach(el => {
-            const rect = el.getBoundingClientRect();
-            const overflowsTop = rect.top < padding;
-            const overflowsBottom = rect.bottom > window.innerHeight - padding;
-            if (!overflowsTop && !overflowsBottom)
-                return;
-            const available = overflowsTop
-                ? rect.bottom - padding
-                : window.innerHeight - rect.top - padding;
-            const newMax = Math.max(80, available);
-            el.style.maxHeight = `${newMax}px`;
-            el.style.overflowY = 'auto';
-            el.style.overflowX = 'hidden';
-        });
+        const capSubmenus = () => {
+            const padding = 8;
+            const submenus = document.querySelectorAll('[data-submenu="true"]');
+            submenus.forEach(el => {
+                el.style.maxHeight = '';
+                el.style.overflowY = '';
+                el.style.overflowX = '';
+                const rect = el.getBoundingClientRect();
+                const opensUp = el.dataset.openUp === 'true';
+                const available = opensUp
+                    ? rect.bottom - padding
+                    : window.innerHeight - rect.top - padding;
+                if (rect.height <= available)
+                    return;
+                el.style.maxHeight = `${Math.max(80, available)}px`;
+                el.style.overflowY = 'auto';
+                el.style.overflowX = 'hidden';
+            });
+        };
+        capSubmenus();
+        window.addEventListener('resize', capSubmenus);
+        return () => window.removeEventListener('resize', capSubmenus);
     }, [hoveredSubmenus]);
     const handleMouseLeave = (depth = 0) => {
         if (isMobile)
@@ -495,6 +500,6 @@ const TMContextMenu = ({ items, trigger = 'right', children, target, externalCon
                     // display: 'inline-block',
                     WebkitTouchCallout: isIOS ? 'none' : undefined,
                     WebkitUserSelect: isIOS ? 'none' : undefined,
-                }, children: children })), menuState.visible && createPortal(_jsxs(_Fragment, { children: [_jsxs(S.MenuContainer, { ref: menuRef, "$x": menuState.position.x, "$y": menuState.position.y, "$openLeft": openLeft, "$openUp": openUp, "$isPositioned": isCalculated, "$externalControl": !!externalControl, "$needsScroll": needsScroll, "$maxHeight": maxHeight, children: [isMobile && menuState.parentNames.length > 0 && (_jsxs(S.MobileMenuHeader, { children: [_jsx(S.BackButton, { onClick: handleBack, "aria-label": "Go back", children: _jsx(IconArrowLeft, {}) }), _jsx(S.HeaderTitle, { children: currentParentName })] })), renderMenuItems(currentMenu, 0)] }), !isMobile && hoveredSubmenus.map((submenu, idx) => (_jsx(S.Submenu, { "$parentRect": submenu.parentRect, "$openUp": submenu.openUp, "data-submenu": "true", onMouseEnter: handleSubmenuMouseEnter, onMouseLeave: () => handleMouseLeave(submenu.depth), children: renderMenuItems(submenu.items, submenu.depth) }, `submenu-${submenu.depth}-${idx}`)))] }), document.body)] }));
+                }, children: children })), menuState.visible && createPortal(_jsxs(_Fragment, { children: [_jsxs(S.MenuContainer, { ref: menuRef, "$x": menuState.position.x, "$y": menuState.position.y, "$openLeft": openLeft, "$openUp": openUp, "$isPositioned": isCalculated, "$externalControl": !!externalControl, "$needsScroll": needsScroll, "$maxHeight": maxHeight, children: [isMobile && menuState.parentNames.length > 0 && (_jsxs(S.MobileMenuHeader, { children: [_jsx(S.BackButton, { onClick: handleBack, "aria-label": "Go back", children: _jsx(IconArrowLeft, {}) }), _jsx(S.HeaderTitle, { children: currentParentName })] })), renderMenuItems(currentMenu, 0)] }), !isMobile && hoveredSubmenus.map((submenu, idx) => (_jsx(S.Submenu, { "$parentRect": submenu.parentRect, "$openUp": submenu.openUp, "data-submenu": "true", "data-open-up": submenu.openUp ? 'true' : 'false', onMouseEnter: handleSubmenuMouseEnter, onMouseLeave: () => handleMouseLeave(submenu.depth), children: renderMenuItems(submenu.items, submenu.depth) }, `submenu-${submenu.depth}-${idx}`)))] }), document.body)] }));
 };
 export default TMContextMenu;

package/lib/components/base/TMPopUp.js

@@ -23,8 +23,8 @@ export var ButtonNames;
 // Dimensioni minime di default per i popup
 const DEFAULT_MIN_WIDTH = 500;
 const DEFAULT_MIN_HEIGHT = 400;
-// filtr password from all errors.
-const SENSITIVE_KEY = 'password';
+// filtr sensitive keys from all errors.
+const SENSITIVE_KEYS = ['password', 'username'];
 const redactSensitiveJsonString = (value) => {
     const trimmed = value.trim();
     const looksLikeJson = (trimmed.startsWith('{') && trimmed.endsWith('}')) || (trimmed.startsWith('[') && trimmed.endsWith(']'));
@@ -46,7 +46,7 @@ const redactSensitiveValue = (value) => {
         return value;
     const result = {};
     for (const key of Object.keys(value)) {
-        result[key] = key.toLowerCase() === SENSITIVE_KEY ? '***' : redactSensitiveValue(value[key]);
+        result[key] = SENSITIVE_KEYS.includes(key.toLowerCase()) ? '***' : redactSensitiveValue(value[key]);
     }
     return result;
 };

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

@@ -11,25 +11,28 @@ export interface ITMTreeItem {
     currentPage?: number;
     totalItemsCount?: number;
 }
-interface ITMTreeViewProps<T extends ITMTreeItem> {
-    dataSource?: T[];
-    focusedItem?: T | null;
-    selectedItems?: T[];
+interface ITMTreeViewProps {
+    dataSource?: ITMTreeItem[];
+    focusedItem?: ITMTreeItem | null;
+    selectedItems?: ITMTreeItem[];
     allowMultipleSelection?: boolean;
-    calculateItemsForNode?: (node: T) => Promise<T[] | undefined>;
-    itemRender: (item: T | null) => JSX.Element;
-    onFocusedItemChanged?: (item: T | null) => void;
-    onSelectionChanged?: (selectedItems: T[]) => void;
-    onNodeUpdate?: (updatedNode: T) => void;
-    onDataChanged?: (items: T[]) => void;
-    shouldDelayFocusOnEvent?: (node: T, event: React.MouseEvent) => boolean;
-    onItemContextMenu?: (item: T, e: React.MouseEvent) => void;
+    calculateItemsForNode?: (node: ITMTreeItem) => Promise<ITMTreeItem[] | undefined>;
+    itemRender: (item: ITMTreeItem | null) => JSX.Element;
+    onFocusedItemChanged?: (item: ITMTreeItem | null) => void;
+    onSelectionChanged?: (selectedItems: ITMTreeItem[]) => void;
+    onNodeUpdate?: (updatedNode: ITMTreeItem) => void;
+    onDataChanged?: (items: ITMTreeItem[]) => void;
+    shouldDelayFocusOnEvent?: (node: ITMTreeItem, event: React.MouseEvent) => boolean;
+    onItemContextMenu?: (item: ITMTreeItem, e: React.MouseEvent) => void;
     autoSelectChildren?: boolean;
     itemsPerPage?: number;
     showLoadMoreButton?: boolean;
+    enableVirtualization?: boolean;
 }
-declare const TMTreeView: <T extends ITMTreeItem>({ dataSource, focusedItem, selectedItems, allowMultipleSelection, onDataChanged, calculateItemsForNode, itemRender, onNodeUpdate, onFocusedItemChanged, onSelectionChanged, shouldDelayFocusOnEvent, onItemContextMenu, autoSelectChildren, itemsPerPage, showLoadMoreButton }: ITMTreeViewProps<T>) => React.JSX.Element;
+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"> & {
     $isSelected?: boolean;
 }, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$isSelected"> & {

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);
@@ -162,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 = [];
@@ -199,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);
@@ -211,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) => {
@@ -243,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;
@@ -275,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) {
@@ -312,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)
@@ -340,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',
@@ -355,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/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/editors/TMTextBox.d.ts

@@ -17,6 +17,7 @@ export interface ITMTextBox extends ITMEditorBase {
     onClick?: () => void;
     onValueChanged?: (e: React.ChangeEvent<HTMLInputElement>) => void;
     onBlur?: (value: string | undefined) => void;
+    onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
 }
 declare const TMTextBox: React.FunctionComponent<ITMTextBox>;
 export default TMTextBox;

package/lib/components/editors/TMTextBox.js

@@ -34,7 +34,7 @@ const StyledTextBoxEditorButton = styled.div `
         border-bottom-color: ${TMColors.primary};
      }
 `;
-const TMTextBox = ({ autoComplete = 'off', autoFocus, maxLength, labelColor, precision, fromModal = false, scale, showClearButton, validationItems = [], label = '', readOnly = false, formulaItems = [], buttons = [], isModifiedWhen, placeHolder, elementStyle, width = '100%', maxValue, minValue, fontSize = FontSize.defaultFontSize, icon, labelPosition = 'left', value, disabled = false, type = 'text', onClick, onValueChanged, onBlur, borderRadius, allowedPattern }) => {
+const TMTextBox = ({ autoComplete = 'off', autoFocus, maxLength, labelColor, precision, fromModal = false, scale, showClearButton, validationItems = [], label = '', readOnly = false, formulaItems = [], buttons = [], isModifiedWhen, placeHolder, elementStyle, width = '100%', maxValue, minValue, fontSize = FontSize.defaultFontSize, icon, labelPosition = 'left', value, disabled = false, type = 'text', onClick, onValueChanged, onBlur, onKeyDown, borderRadius, allowedPattern }) => {
     const [initialType, setInitialType] = useState(type);
     const [currentType, setCurrentType] = useState(type);
     const [currentValue, setCurrentValue] = useState(value);
@@ -283,6 +283,7 @@ const TMTextBox = ({ autoComplete = 'off', autoFocus, maxLength, labelColor, pre
                             if (!scale && (e.key == "." || e.key == ","))
                                 e.preventDefault();
                         }
+                        onKeyDown?.(e);
                     }, "$isMobile": deviceType === DeviceType.MOBILE, "$disabled": disabled, "$vil": validationItems, "$isModified": isModifiedWhen, "$fontSize": fontSize, "$maxValue": maxValue, "$width": width, "$type": currentType, "$borderRadius": borderRadius, style: { paddingRight: `${calculateRightPadding()}px`, cursor: onClick ? 'pointer' : undefined } }), (initialType === 'password' || initialType === 'secureText') && _jsx(StyledShowPasswordIcon, { onClick: toggleShowPassword, "$disabled": disabled, "$vil": validationItems, "$isModified": isModifiedWhen, children: showPasswordIcon() }), initialType !== 'password' &&
                     _jsxs("div", { style: { display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', position: 'absolute', right: type === 'number' ? '25px' : '6px', top: label.length > 0 ? '20px' : '3px', pointerEvents: disabled ? 'none' : 'auto', opacity: disabled ? 0.4 : 1 }, children: [formulaItems.length > 0 &&
                                 _jsx(StyledTextBoxEditorButton, { onClick: () => {

package/lib/components/features/documents/TMDcmtForm.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { DcmtTypeDescriptor, HomeBlogPost, LayoutModes, ObjectRef, SearchResultDescriptor, TaskDescriptor, ValidationItem } from '@topconsultnpm/sdk-ts';
 import { DcmtInfo, FormModes, MetadataValueDescriptorEx, TaskContext } from '../../../ts';
+import { IntesiCertificateData } from '../../../helper';
 /**
  * Definisce il contesto da cui è stato invocato il TMDcmtForm.
  * Permette di gestire logiche diverse in base alla provenienza.
@@ -75,6 +76,7 @@ interface ITMDcmtFormProps {
         mid: number;
         value: string;
     }>, tid?: number) => void;
+    fetchRemoteCertificates?: (email: string) => Promise<IntesiCertificateData[]>;
     datagridUtility?: {
         onRefreshSearchAsyncDatagrid?: () => Promise<void>;
         onRefreshDataRowsAsync?: (() => Promise<void>);

package/lib/components/features/documents/TMDcmtForm.js

@@ -57,7 +57,7 @@ export var InvocationContext;
 let abortControllerLocal = new AbortController();
 ;
 //#endregion
-const TMDcmtForm = ({ TID, DID, groupId, layoutMode = LayoutModes.Update, formMode = FormModes.Update, invocationContext = InvocationContext.Default, showHeader = true, showBackButton = true, showDcmtFormSidebar = true, isClosable = false, showTodoDcmtForm = false, isExpertMode = SDKUI_Globals.userSettings.advancedSettings.expertMode === 1, isModal = false, titleModal, widthModal = "100%", heightModal = "100%", allowNavigation = true, canNext, canPrev, count, itemIndex, onNext, onPrev, inputFile = null, inputMids = [], connectorFileSave = undefined, isSharedDcmt = false, sharedSourceTID, sharedSourceDID, allowRelations = true, allowButtonsRefs = false, openS4TViewer = false, enableDragDropOverlay = false, onClose, onSavedAsyncCallback, onSaveRecents, onWFOperationCompleted, allTasks = [], getAllTasks, deleteTaskByIdsCallback, addTaskCallback, editTaskCallback, onTaskCompleted, onTaskCreateRequest, moreInfoTasks, taskFormDialogComponent, handleNavigateToWGs, handleNavigateToDossiers, onReferenceClick, onOpenS4TViewerRequest, onOpenPdfEditorRequest, openFileUploaderPdfEditor, s4TViewerDialogComponent, onScanRequest, passToSearch, datagridUtility }) => {
+const TMDcmtForm = ({ TID, DID, groupId, layoutMode = LayoutModes.Update, formMode = FormModes.Update, invocationContext = InvocationContext.Default, showHeader = true, showBackButton = true, showDcmtFormSidebar = true, isClosable = false, showTodoDcmtForm = false, isExpertMode = SDKUI_Globals.userSettings.advancedSettings.expertMode === 1, isModal = false, titleModal, widthModal = "100%", heightModal = "100%", allowNavigation = true, canNext, canPrev, count, itemIndex, onNext, onPrev, inputFile = null, inputMids = [], connectorFileSave = undefined, isSharedDcmt = false, sharedSourceTID, sharedSourceDID, allowRelations = true, allowButtonsRefs = false, openS4TViewer = false, enableDragDropOverlay = false, onClose, onSavedAsyncCallback, onSaveRecents, onWFOperationCompleted, allTasks = [], getAllTasks, deleteTaskByIdsCallback, addTaskCallback, editTaskCallback, onTaskCompleted, onTaskCreateRequest, moreInfoTasks, taskFormDialogComponent, handleNavigateToWGs, handleNavigateToDossiers, onReferenceClick, onOpenS4TViewerRequest, onOpenPdfEditorRequest, openFileUploaderPdfEditor, s4TViewerDialogComponent, onScanRequest, passToSearch, fetchRemoteCertificates, datagridUtility }) => {
     const { onRefreshSearchAsyncDatagrid, onRefreshBlogDatagrid, onRefreshPreviewDatagrid } = datagridUtility || {};
     const floatingBarContainerRef = useRef(null);
     const [id, setID] = useState('');
@@ -395,6 +395,7 @@ const TMDcmtForm = ({ TID, DID, groupId, layoutMode = LayoutModes.Update, formMo
             currentSearchResults,
             currentMetadataValues: formData,
             allUsers,
+            fetchRemoteCertificates,
             datagridUtility: {
                 onRefreshBlogDatagrid,
                 onRefreshPreviewDatagrid,

package/lib/components/features/documents/TMDcmtIcon.d.ts

@@ -14,6 +14,8 @@ interface ITMDcmtIconProps {
     tooltipContent?: JSX.Element | string;
     openInOffice?: (selectedDcmtsOrFocused: Array<DcmtInfo>) => Promise<void>;
     onDownloadDcmtsAsync?: (inputDcmts: DcmtInfo[] | undefined, downloadType: DownloadTypes, downloadMode: DownloadModes, onFileDownloaded?: (dcmtFile: File | undefined) => void, confirmAttachments?: (list: FileDescriptor[]) => Promise<string[] | undefined>) => Promise<void>;
+    /** Se true, renderizza il wait panel nel body tramite Portal (centrato a schermo intero) */
+    usePortal?: boolean;
 }
-declare const TMDcmtIcon: ({ fileExtension, fileCount, isLexProt, isSigned, isMail, isShared, tid, did, downloadMode, tooltipContent, openInOffice, onDownloadDcmtsAsync }: ITMDcmtIconProps) => React.JSX.Element;
+declare const TMDcmtIcon: ({ fileExtension, fileCount, isLexProt, isSigned, isMail, isShared, tid, did, downloadMode, tooltipContent, openInOffice, onDownloadDcmtsAsync, usePortal }: ITMDcmtIconProps) => React.JSX.Element;
 export default TMDcmtIcon;