@topconsultnpm/sdkui-react 6.21.0-dev4.9 → 6.21.0-dev5.10

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>) => import("react/jsx-runtime").JSX.Element;
+declare const TMTreeView: ({ dataSource, focusedItem, selectedItems, allowMultipleSelection, onDataChanged, calculateItemsForNode, itemRender, onNodeUpdate, onFocusedItemChanged, onSelectionChanged, shouldDelayFocusOnEvent, onItemContextMenu, autoSelectChildren, itemsPerPage, showLoadMoreButton, enableVirtualization }: ITMTreeViewProps) => import("react/jsx-runtime").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/features/documents/TMDcmtIcon.d.ts

@@ -13,6 +13,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) => import("react/jsx-runtime").JSX.Element;
+declare const TMDcmtIcon: ({ fileExtension, fileCount, isLexProt, isSigned, isMail, isShared, tid, did, downloadMode, tooltipContent, openInOffice, onDownloadDcmtsAsync, usePortal }: ITMDcmtIconProps) => import("react/jsx-runtime").JSX.Element;
 export default TMDcmtIcon;

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

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useMemo } from 'react';
+import { createPortal } from 'react-dom';
 import styled from 'styled-components';
 import { getFileIcon } from '../../../helper';
 import TMTooltip from '../../base/TMTooltip';
@@ -15,7 +16,7 @@ const StyledCellRenderDcmtIcon = styled.div `
     overflow: visible;
     position: relative;
 `;
-const TMDcmtIcon = ({ fileExtension, fileCount, isLexProt, isSigned, isMail, isShared, tid, did, downloadMode = "none", tooltipContent, openInOffice, onDownloadDcmtsAsync }) => {
+const TMDcmtIcon = ({ fileExtension, fileCount, isLexProt, isSigned, isMail, isShared, tid, did, downloadMode = "none", tooltipContent, openInOffice, onDownloadDcmtsAsync, usePortal = false }) => {
     const { downloadDcmtsAsync, showWaitPanel, waitPanelTitle, showSecondary, waitPanelTextSecondary, waitPanelValueSecondary, waitPanelMaxValueSecondary, abortController } = useDcmtOperations();
     const deviceType = useDeviceType();
     let isMobile = useMemo(() => { return deviceType === DeviceType.MOBILE; }, [deviceType]);
@@ -56,43 +57,15 @@ const TMDcmtIcon = ({ fileExtension, fileCount, isLexProt, isSigned, isMail, isS
         }, ...(deviceType === DeviceType.MOBILE
             ? { onClick: handleDownloadAction } // Su mobile, un singolo click sull'icona avvia il download
             : { onDoubleClick: handleDownloadAction } // Su desktop, un doppio click sull'icona avvia il download
-        ), children: [icon, isLexProt == 1 && _jsx("div", { style: { position: 'absolute', left: '-7px', top: isShared ? undefined : '2px' }, children: _jsx(TMTooltip, { content: "Protezione LEX", children: _jsx(IconLexProtLock, { color: 'blue', fontSize: 13 }) }) }), isShared == 1 && _jsx("div", { style: { position: 'absolute', top: '-7px', left: '-5px' }, children: _jsx(TMTooltip, { content: "Documento condiviso", children: _jsx(IconShared, { fontSize: 16 }) }) }), isSigned == 1 && _jsx("div", { style: { position: 'absolute', bottom: '-4px', right: '-7px' }, children: _jsx(TMTooltip, { content: "Documento firmato", children: _jsx(IconSignature, { fontSize: 28 }) }) }), showWaitPanel &&
-                _jsx(TMWaitPanel, { title: waitPanelTitle, showSecondary: showSecondary, textSecondary: waitPanelTextSecondary, valueSecondary: waitPanelValueSecondary, maxValueSecondary: waitPanelMaxValueSecondary, isCancelable: true, abortController: abortController, onAbortClick: (abortController) => { setTimeout(() => { abortController?.abort(); }, 1000); } })] }));
+        ), children: [icon, isLexProt == 1 && _jsx("div", { style: { position: 'absolute', left: '-7px', top: isShared ? undefined : '2px' }, children: _jsx(TMTooltip, { content: "Protezione LEX", children: _jsx(IconLexProtLock, { color: 'blue', fontSize: 13 }) }) }), isShared == 1 && _jsx("div", { style: { position: 'absolute', top: '-7px', left: '-5px' }, children: _jsx(TMTooltip, { content: "Documento condiviso", children: _jsx(IconShared, { fontSize: 16 }) }) }), isSigned == 1 && _jsx("div", { style: { position: 'absolute', bottom: '-4px', right: '-7px' }, children: _jsx(TMTooltip, { content: "Documento firmato", children: _jsx(IconSignature, { fontSize: 28 }) }) }), showWaitPanel && (usePortal ? createPortal(_jsx(TMWaitPanel, { title: waitPanelTitle, showSecondary: showSecondary, textSecondary: waitPanelTextSecondary, valueSecondary: waitPanelValueSecondary, maxValueSecondary: waitPanelMaxValueSecondary, isCancelable: true, abortController: abortController, onAbortClick: (abortController) => { setTimeout(() => { abortController?.abort(); }, 1000); }, useHighZIndex: true }), document.body) : (_jsx(TMWaitPanel, { title: waitPanelTitle, showSecondary: showSecondary, textSecondary: waitPanelTextSecondary, valueSecondary: waitPanelValueSecondary, maxValueSecondary: waitPanelMaxValueSecondary, isCancelable: true, abortController: abortController, onAbortClick: (abortController) => { setTimeout(() => { abortController?.abort(); }, 1000); } })))] }));
 };
 export default TMDcmtIcon;
 function IconLexProtLock(props) {
-    return (_jsxs("svg", { viewBox: "0 0 512 512", height: "1em", width: "1em", ...props, children: [_jsx("path", { fill: "#455A64", d: "M256,0c-76.544,0.094-138.573,62.122-138.667,138.667V224c0,5.891,4.776,10.667,10.667,10.667h42.667\r\n        c5.891,0,10.667-4.776,10.667-10.667v-85.333C181.333,97.429,214.763,64,256,64s74.667,33.429,74.667,74.667V224\r\n        c0,5.891,4.776,10.667,10.667,10.667H384c5.891,0,10.667-4.776,10.667-10.667v-85.333C394.573,62.122,332.544,0.094,256,0z" }), _jsx("path", { fill: "#FFC107", d: "M128,213.333h256c29.455,0,53.333,23.878,53.333,53.333v192C437.333,488.122,413.455,512,384,512H128\r\n        c-29.455,0-53.333-23.878-53.333-53.333v-192C74.667,237.211,98.545,213.333,128,213.333z" }), _jsx("path", { fill: "#455A64", d: "M309.333,330.667c0.124-29.455-23.653-53.434-53.108-53.558\r\n        c-29.455-0.124-53.434,23.653-53.558,53.108c-0.086,20.36,11.427,38.992,29.674,48.023l-8.235,57.6\r\n        c-0.825,5.833,3.235,11.23,9.068,12.055c0.494,0.07,0.993,0.105,1.492,0.105h42.667c5.891,0.06,10.715-4.667,10.774-10.558\r\n        c0.005-0.543-0.03-1.086-0.108-1.623l-8.235-57.6C297.788,369.199,309.216,350.82,309.333,330.667z" }), _jsx("g", { children: " " }), " ", _jsx("g", { children: " " }), " ", _jsx("g", { children: " " }), " ", _jsx("g", { children: " " }), " ", _jsx("g", { children: " " }), " ", _jsx("g", { children: " " }), " ", _jsx("g", { children: " " }), " ", _jsx("g", { children: " " }), " ", _jsx("g", { children: " " }), " ", _jsx("g", { children: " " }), " ", _jsx("g", { children: " " }), " ", _jsx("g", { children: " " }), " ", _jsx("g", { children: " " }), " ", _jsx("g", { children: " " }), " ", _jsx("g", { children: " " })] })
-    // <svg
-    //     viewBox="0 0 24 24"
-    //     fill="currentColor"
-    //     height="1em"
-    //     width="1em"
-    //     {...props}
-    // >
-    //     <path d="M12 2C9.243 2 7 4.243 7 7v3H6a2 2 0 00-2 2v8a2 2 0 002 2h12a2 2 0 002-2v-8a2 2 0 00-2-2h-1V7c0-2.757-2.243-5-5-5zM9 7c0-1.654 1.346-3 3-3s3 1.346 3 3v3H9V7zm4 10.723V20h-2v-2.277a1.993 1.993 0 01.567-3.677A2.001 2.001 0 0114 16a1.99 1.99 0 01-1 1.723z" />
-    // </svg>
-    );
+    return (_jsxs("svg", { viewBox: "0 0 512 512", height: "1em", width: "1em", ...props, children: [_jsx("path", { fill: "#455A64", d: "M256,0c-76.544,0.094-138.573,62.122-138.667,138.667V224c0,5.891,4.776,10.667,10.667,10.667h42.667\r\n        c5.891,0,10.667-4.776,10.667-10.667v-85.333C181.333,97.429,214.763,64,256,64s74.667,33.429,74.667,74.667V224\r\n        c0,5.891,4.776,10.667,10.667,10.667H384c5.891,0,10.667-4.776,10.667-10.667v-85.333C394.573,62.122,332.544,0.094,256,0z" }), _jsx("path", { fill: "#FFC107", d: "M128,213.333h256c29.455,0,53.333,23.878,53.333,53.333v192C437.333,488.122,413.455,512,384,512H128\r\n        c-29.455,0-53.333-23.878-53.333-53.333v-192C74.667,237.211,98.545,213.333,128,213.333z" }), _jsx("path", { fill: "#455A64", d: "M309.333,330.667c0.124-29.455-23.653-53.434-53.108-53.558\r\n        c-29.455-0.124-53.434,23.653-53.558,53.108c-0.086,20.36,11.427,38.992,29.674,48.023l-8.235,57.6\r\n        c-0.825,5.833,3.235,11.23,9.068,12.055c0.494,0.07,0.993,0.105,1.492,0.105h42.667c5.891,0.06,10.715-4.667,10.774-10.558\r\n        c0.005-0.543-0.03-1.086-0.108-1.623l-8.235-57.6C297.788,369.199,309.216,350.82,309.333,330.667z" }), _jsx("g", { children: " " }), " ", _jsx("g", { children: " " }), " ", _jsx("g", { children: " " }), " ", _jsx("g", { children: " " }), " ", _jsx("g", { children: " " }), " ", _jsx("g", { children: " " }), " ", _jsx("g", { children: " " }), " ", _jsx("g", { children: " " }), " ", _jsx("g", { children: " " }), " ", _jsx("g", { children: " " }), " ", _jsx("g", { children: " " }), " ", _jsx("g", { children: " " }), " ", _jsx("g", { children: " " }), " ", _jsx("g", { children: " " }), " ", _jsx("g", { children: " " })] }));
 }
 function IconShared(props) {
     return (_jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", height: "1em", width: "1em", ...props, children: _jsx("path", { d: "M11 9V5l7 7-7 7v-4.1c-5 0-8.5 1.6-11 5.1 1-5 4-10 11-11m6-1V5l7 7-7 7v-3l4-4-4-4z" }) }));
 }
 function IconSignature(props) {
-    return (
-    // <svg viewBox="0 0 128 128" fill="currentColor"
-    //     height="1em"
-    //     width="1em"
-    //     {...props}>
-    //     <g><path d="m128 82.7c0-.3-.1-.6-.2-.8l-6.4-10.9c-2.2-3.7-4.8-7.1-7.9-10.2l-39.8-39.8c-2.7-2.7-7-2.7-9.7 0s-2.7 7 0 9.7l39.8 39.8c3.1 3.1 6.5 5.7 10.2 7.9l8.3 4.8c-.3.2-.7.5-1 .7-1.4 1-2.9 2-4.3 3.1-1.2.9-2.3 1.9-3.3 2.9-2.5 2.2-4.8 4.3-7.8 5.6-3.5 1.5-8.9 2.2-12.6-.9-.7-.6-1.4-1.4-2.2-2.2-2-2.2-4.3-4.7-7.8-4.6-2.9.1-4.9 2-6.7 3.7-.8.8-1.6 1.5-2.4 2-1 .6-2.1.9-3.2.9 1.9-3.5 2.5-7.1 1.7-10.5-.6-2.4-3.1-8.7-7.7-8.5-1.8.1-3.3 1-4.3 2.6-2.2 3.5-1.4 9.7-.4 12.2 1 2.4 2.6 4.4 4.5 5.9-3.9 4.3-9.6 7.4-15.9 8.6-6.4 1.2-12.9-.7-18.2-4.8 4.7-2 9.1-5.2 12.7-9.4 5.7-6.8 8-14.5 6.1-21.1-1.2-4.1-3.8-7.2-7.8-8.9-4.7-2-10.7-1.6-15.6 1.1-11.1 6.1-12.2 20.3-6.8 30.6 1.1 2.1 2.3 4 3.7 5.7-.5.1-1 .1-1.4.1-4.5.1-8.3-1.4-11.4-4.7-9.8-10.2-7-27.9 1.1-38.5 8.4-11 23.5-14.9 35.1-9.1 1 .5 2.2.1 2.7-.9s.1-2.2-.9-2.7c-13.2-6.6-30.4-2.2-40 10.2-9.2 12-12.2 32-.9 43.7 3.9 4 8.9 6.1 14.4 5.9 1.5 0 3-.3 4.5-.6 5.3 4.9 11.9 7.7 18.7 7.7 1.5 0 3-.1 4.6-.4 7.7-1.4 14.4-5.2 18.9-10.6 2.7.8 5.4.4 7.8-1.1 1.1-.7 2.1-1.6 3-2.5 1.4-1.4 2.7-2.5 4-2.6 1.6 0 2.8 1.2 4.7 3.3.8.9 1.6 1.8 2.6 2.6 4.2 3.5 10.8 4.1 16.8 1.5 3.6-1.6 6.3-4 8.9-6.3 1-.9 2.1-1.9 3.2-2.7 1.3-1 2.6-1.9 4-2.9 1.2-.8 2.5-1.7 3.7-2.6.7-.6 1-1.3.9-2zm-12-7.8c-3.4-2-6.5-4.4-9.4-7.2l-39.8-39.8c-1.1-1.1-1.1-2.9 0-4 .6-.6 1.3-.8 2-.8s1.5.3 2 .8l39.8 39.8c2.8 2.8 5.3 6 7.2 9.4l2.7 4.6zm-93.1 15.4c-4.5-8.5-3.8-20.3 5.2-25.2 2.2-1.2 4.8-1.8 7.3-1.8 1.7 0 3.4.3 4.9.9 1.9.8 4.4 2.6 5.5 6.3 2.1 7.6-3 14.7-5.3 17.4-3.5 4.2-8.2 7.4-12.9 9-1.9-2-3.4-4.2-4.7-6.6zm44.3 2.6c-1.4-1-2.5-2.5-3.2-4.2-.7-1.8-1.2-6.5.1-8.6.3-.5.6-.7 1.1-.7 1.2 0 3 3 3.5 5.4.8 3.2-.3 6.1-1.5 8.1z"></path></g>
-    // </svg>
-    _jsx("svg", { height: "1em", viewBox: "0 0 450 450", width: "1em", fill: "currentColor", ...props, children: _jsx("g", { children: _jsx("g", { children: _jsxs("g", { clipRule: "evenodd", fill: "rgb(0,0,0)", fillRule: "evenodd", children: [_jsx("path", { d: "m366.6 67.8 1.1-4c.4-1.5.6-3 .6-4.5 0-8.1-5.5-15.2-13.3-17.3-9.5-2.5-19.3 3.2-21.8 12.8l-20.4 77.9 34.6 9z" }), _jsx("path", { d: "m234.9 198.9h148.6v35.7h-148.6z", transform: "matrix(.253 -.968 .968 .253 21.311 461.088)" }), _jsx("path", { d: "m292.8 316 8.4 2.2 4.5-17.3-34.6-9.1-4.5 17.4 8.3 2.2z" }), _jsx("path", { d: "m275.3 319.7-12.7 14.7 5.4 40.3 24.4-32.5-3.9-19.1zm6.5 23.3c-.8 2.9-3.7 4.6-6.6 3.9s-4.6-3.7-3.9-6.6 3.7-4.6 6.6-3.9 4.6 3.7 3.9 6.6z" }), _jsx("path", { d: "m395.6 71.5-20.3-5.5-2 7.7 16.5 4.4-24.8 95c-.6 2.1.7 4.3 2.8 4.8.3.1.7.1 1 .1 1.8 0 3.4-1.2 3.8-3l25.8-98.8c.6-2-.7-4.2-2.8-4.7z" }), _jsx("path", { d: "" }), _jsx("path", { d: "m243.4 379.8c-1.8-1.2-4.3-.8-5.5 1.1-9.6 14.1-29.9 19.6-45.3 12.2-.5-.2-.9-.5-1.4-.7-3.5-1.8-7.9-4-12.8-2.7-2.7.7-4.7 2.3-6.5 3.6-1.5 1.2-2.8 2.2-3.9 2.2-2 .1-4-3-5-5.9-.2-.5-.4-1-.5-1.5-1.4-4.1-3.1-9.1-7.8-11.8-5.8-3.3-12.9-.9-17.4 3-2.4 2-4.2 4.4-6 6.7-1.2 1.5-2.3 2.9-3.4 4.1-7.5 7.9-20.3 10-30.2 5.6 7.6-6.9 13-15.5 15.4-24.9s1-21.1-7.8-25.8c-4.5-2.4-9.9-2.4-15.2.2-4.4 2.2-8.4 5.9-10.9 10.3-3.9 7-5.1 15.4-3.3 23.8 1.4 6.3 4.3 12 8.4 16.5-8.4 4.9-18.2 7.3-27.8 6.1-2.2-.3-4.2 1.2-4.5 3.4s1.2 4.2 3.4 4.5c2.1.3 4.1.4 6.2.4 10 0 20.1-3.1 29.1-9 6.1 3.7 13.5 5.4 21.1 4.7 8.5-.8 16.3-4.4 21.8-10.2 1.5-1.5 2.7-3.1 3.9-4.7 1.6-2.1 3.1-4 4.9-5.6 2.4-2 6-3.4 8.3-2.1 2.1 1.2 3.1 4.2 4.2 7.5.2.5.4 1.1.6 1.6 2.5 7 7.1 11.1 12.4 11.1h.6c3.6-.2 6.2-2.2 8.3-3.9 1.3-1 2.5-2 3.6-2.2 2-.5 4.5.8 7.2 2.1.5.3 1 .5 1.5.7 5.7 2.7 11.9 4 18.2 4 14.4 0 29-6.9 37.1-18.9 1.3-1.8.9-4.3-1-5.5zm-152.6 11.3c-8.1-8-10.4-21.8-4.8-31.7 2.5-4.5 7.5-8.2 12-8.2 1.2 0 2.3.3 3.4.8 5 2.7 5.5 10.6 3.9 16.8-2.2 8.7-7.5 16.5-14.5 22.3z" })] }) }) }) })
-    // <svg
-    //     viewBox="0 0 24 24"
-    //     fill="currentColor"
-    //     height="1em"
-    //     width="1em"
-    //     {...props}
-    // >
-    //     <path d="M22 22H2v-2h20v2M2.26 16.83L5.09 14l-2.83-2.83 1.41-1.41 2.83 2.83 2.83-2.83 1.41 1.41L7.91 14l2.83 2.83-1.41 1.41-2.83-2.83-2.83 2.83-1.41-1.41z" />
-    // </svg>
-    );
+    return (_jsx("svg", { height: "1em", viewBox: "0 0 450 450", width: "1em", fill: "currentColor", ...props, children: _jsx("g", { children: _jsx("g", { children: _jsxs("g", { clipRule: "evenodd", fill: "rgb(0,0,0)", fillRule: "evenodd", children: [_jsx("path", { d: "m366.6 67.8 1.1-4c.4-1.5.6-3 .6-4.5 0-8.1-5.5-15.2-13.3-17.3-9.5-2.5-19.3 3.2-21.8 12.8l-20.4 77.9 34.6 9z" }), _jsx("path", { d: "m234.9 198.9h148.6v35.7h-148.6z", transform: "matrix(.253 -.968 .968 .253 21.311 461.088)" }), _jsx("path", { d: "m292.8 316 8.4 2.2 4.5-17.3-34.6-9.1-4.5 17.4 8.3 2.2z" }), _jsx("path", { d: "m275.3 319.7-12.7 14.7 5.4 40.3 24.4-32.5-3.9-19.1zm6.5 23.3c-.8 2.9-3.7 4.6-6.6 3.9s-4.6-3.7-3.9-6.6 3.7-4.6 6.6-3.9 4.6 3.7 3.9 6.6z" }), _jsx("path", { d: "m395.6 71.5-20.3-5.5-2 7.7 16.5 4.4-24.8 95c-.6 2.1.7 4.3 2.8 4.8.3.1.7.1 1 .1 1.8 0 3.4-1.2 3.8-3l25.8-98.8c.6-2-.7-4.2-2.8-4.7z" }), _jsx("path", { d: "" }), _jsx("path", { d: "m243.4 379.8c-1.8-1.2-4.3-.8-5.5 1.1-9.6 14.1-29.9 19.6-45.3 12.2-.5-.2-.9-.5-1.4-.7-3.5-1.8-7.9-4-12.8-2.7-2.7.7-4.7 2.3-6.5 3.6-1.5 1.2-2.8 2.2-3.9 2.2-2 .1-4-3-5-5.9-.2-.5-.4-1-.5-1.5-1.4-4.1-3.1-9.1-7.8-11.8-5.8-3.3-12.9-.9-17.4 3-2.4 2-4.2 4.4-6 6.7-1.2 1.5-2.3 2.9-3.4 4.1-7.5 7.9-20.3 10-30.2 5.6 7.6-6.9 13-15.5 15.4-24.9s1-21.1-7.8-25.8c-4.5-2.4-9.9-2.4-15.2.2-4.4 2.2-8.4 5.9-10.9 10.3-3.9 7-5.1 15.4-3.3 23.8 1.4 6.3 4.3 12 8.4 16.5-8.4 4.9-18.2 7.3-27.8 6.1-2.2-.3-4.2 1.2-4.5 3.4s1.2 4.2 3.4 4.5c2.1.3 4.1.4 6.2.4 10 0 20.1-3.1 29.1-9 6.1 3.7 13.5 5.4 21.1 4.7 8.5-.8 16.3-4.4 21.8-10.2 1.5-1.5 2.7-3.1 3.9-4.7 1.6-2.1 3.1-4 4.9-5.6 2.4-2 6-3.4 8.3-2.1 2.1 1.2 3.1 4.2 4.2 7.5.2.5.4 1.1.6 1.6 2.5 7 7.1 11.1 12.4 11.1h.6c3.6-.2 6.2-2.2 8.3-3.9 1.3-1 2.5-2 3.6-2.2 2-.5 4.5.8 7.2 2.1.5.3 1 .5 1.5.7 5.7 2.7 11.9 4 18.2 4 14.4 0 29-6.9 37.1-18.9 1.3-1.8.9-4.3-1-5.5zm-152.6 11.3c-8.1-8-10.4-21.8-4.8-31.7 2.5-4.5 7.5-8.2 12-8.2 1.2 0 2.3.3 3.4.8 5 2.7 5.5 10.6 3.9 16.8-2.2 8.7-7.5 16.5-14.5 22.3z" })] }) }) }) }));
 }

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

@@ -99,7 +99,7 @@ const TMFileUploader = ({ fromDTD, deviceType = DeviceType.DESKTOP, onClose, onF
     let content = !uploadedFile ?
         _jsxs("div", { style: { display: 'flex', gap: 10, width: '100%', height: '100%' }, children: [_jsx(HiddenInput, { id: "fileInput", type: "file", onChange: handleInputChange }), _jsxs(UploadContainer, { ref: uploaderRef, tabIndex: 0, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, style: { backgroundColor: dragOver ? '#76b1e6' : 'white' }, onDoubleClick: browseHandler, "$isRequired": isRequired, children: [_jsxs("div", { style: { display: 'flex', gap: '10px', flexDirection: 'column', position: 'absolute', right: 5, top: 5 }, children: [_jsx(TMButton, { btnStyle: 'icon', caption: 'Sfoglia', color: isRequired && !uploadedFile ? 'error' : 'primary', onClick: browseHandler, icon: _jsx(IconFolderOpen, { fontSize: 22 }) }), showScannerIcon && isScannerLicenseConfigured() && onScanRequest && _jsx(TMButton, { btnStyle: 'icon', caption: 'Scanner', color: 'primary', onClick: () => { onScanRequest((file) => { onFileUpload?.(file); }); }, icon: _jsx(IconScanner, { fontSize: 22 }) }), showScannerIcon && isScannerLicenseConfigured() && !onScanRequest && _jsx(TMButton, { btnStyle: 'icon', caption: 'Scanner', color: 'primary', onClick: () => { ShowAlert({ message: SDKUI_Localizator.ScanFeatureUnavailableInThisContext, mode: 'info', duration: 3000, title: 'Scanner' }); }, icon: _jsx(IconScanner, { fontSize: 22 }) })] }), _jsx("p", { style: { fontSize: '1.2rem', fontWeight: 'bold' }, children: deviceType === DeviceType.MOBILE ? SDKUI_Localizator.ClickToBrowseFile : SDKUI_Localizator.DragOrDoubleClickToBrowseFile }), isRequired && _jsxs("p", { style: { fontWeight: 'bold' }, children: [" ", SDKUI_Localizator.RequiredField, " "] })] })] }) :
         _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 10, width: '100%', height: '100%' }, children: [_jsxs("div", { style: { backgroundColor: 'white', padding: '5px 10px', borderRadius: 8, display: 'flex', alignItems: 'center', justifyContent: 'space-between', color: TMColors.primaryColor }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 5 }, children: [_jsx("p", { children: "File name:" }), _jsxs("div", { style: { fontWeight: 'bold' }, children: [fileName, " ", _jsxs("span", { children: [" ", ` (${formatBytes(fileSize)})`, " "] })] })] }), uploadedFile && _jsx(TMButton, { btnStyle: 'icon', color: 'error', caption: 'Pulisci', onClick: () => clearFile(true), icon: _jsx(IconClear, { fontSize: 22 }) })] }), extensionHandler(fileExt) === FileExtensionHandler.READY_TO_SHOW ? _jsx(TMFileViewer, { fileBlob: uploadedFile, isResizingActive: isResizingActive }) :
-                    _jsx("div", { style: { backgroundColor: '#f6dbdb', padding: '5px 10px', borderRadius: 8, display: 'flex', alignItems: 'center', justifyContent: 'space-between', color: TMColors.error }, children: _jsxs("div", { children: [" ", 'Anteprima non disponibile.', fileExt && _jsx("b", { children: ` (*.${fileExt})` })] }) })] });
+                    _jsx("div", { style: { backgroundColor: '#f6dbdb', padding: '5px 10px', borderRadius: 8, display: 'flex', alignItems: 'center', justifyContent: 'space-between', color: TMColors.error }, children: _jsxs("div", { children: [" ", SDKUI_Localizator.PreviewNotAvailable, fileExt && _jsx("b", { children: ` (*.${fileExt})` })] }) })] });
     const innerContent = (_jsxs("div", { style: { width: '100%', height: '100%', padding: '2px', display: 'flex', flexDirection: 'column', gap: 10 }, children: [enableDragDropOverlay && _jsx(TMDragDropOverlay, { handleFile: handleFile, refocusAfterFileInput: refocusAfterFileInput }), content] }));
     const toolbar = useMemo(() => {
         return (_jsxs(_Fragment, { children: [(isPdfEditorAvailable(fromDTD, fileExt) && openFileUploaderPdfEditor) && (_jsx(TMCommandsContextMenu, { target: "#TMPanel-FileUploader-Commands-Header", menuItems: [