@topconsultnpm/sdkui-react 6.21.0-dev4.15 → 6.21.0-dev4.17

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/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: [

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

@@ -7,14 +7,14 @@ import { IconMultipleSelection, IconCheckFile, IconDetailDcmts, SDKUI_Localizato
 import { FormModes, SearchResultContext } from '../../../ts';
 import { TMColors } from '../../../utils/theme';
 import ShowAlert from '../../base/TMAlert';
-import { DeviceType } from '../../base/TMDeviceProvider';
+import { DeviceType, useDeviceType } from '../../base/TMDeviceProvider';
 import { TMSaveFormButtonPrevious, TMSaveFormButtonNext } from '../../forms/TMSaveForm';
 import TMPanelManagerContainer from '../../layout/panelManager/TMPanelManagerContainer';
 import { TMPanelManagerProvider, useTMPanelManagerContext } from '../../layout/panelManager/TMPanelManagerContext';
 import TMSearchResult from '../search/TMSearchResult';
 import TMDcmtForm from './TMDcmtForm';
 import { TMNothingToShow } from './TMDcmtPreview';
-import { Spinner, TMButton } from '../..';
+import { Spinner, TMButton, TMLayoutWaitingContainer } from '../..';
 import { useDocumentOperations } from '../../../hooks/useDocumentOperations';
 import TMToppyMessage from '../../../helper/TMToppyMessage';
 import TMPanel from '../../base/TMPanel';
@@ -29,6 +29,8 @@ const TMMasterDetailDcmts = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallba
     const [isCheckingFirstLoad, setIsCheckingFirstLoad] = useState(true);
     const [contextMenuVisible, setContextMenuVisible] = useState(false);
     const [contextMenuPosition, setContextMenuPosition] = useState({ x: 0, y: 0 });
+    // Track if TMRelationViewer is loading (used to disable context menu during loading)
+    const [isRelationViewerLoading, setIsRelationViewerLoading] = useState(false);
     const [dtdFocused, setDtdFocused] = useState();
     const [refreshKey, setRefreshKey] = useState(0);
     // Separate refresh key for TMFormOrResultWrapper only (doesn't affect tmTreeView)
@@ -215,6 +217,7 @@ const TMMasterDetailDcmts = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallba
             onRefreshAfterAddDcmtToFavs,
         },
     });
+    const { dcmtOperations: { abortController, showWaitPanel, showPrimary, waitPanelTitle, waitPanelTextPrimary, waitPanelValuePrimary, waitPanelMaxValuePrimary, showSecondary, waitPanelTextSecondary, waitPanelValueSecondary, waitPanelMaxValueSecondary, }, } = features;
     // Load dtdMaster when inputDcmts changes
     useEffect(() => {
         const loadDtdMaster = async () => {
@@ -267,14 +270,14 @@ const TMMasterDetailDcmts = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallba
     const commandsMenuItems = [
         {
             icon: _jsx(IconMultipleSelection, { color: allowMultipleSelection ? TMColors.tertiary : TMColors.text_normal }),
-            name: "Selezione multipla",
+            name: allowMultipleSelection ? "Disabilita selezione multipla" : "Abilita selezione multipla",
             onClick: () => {
                 setAllowMultipleSelection(prev => !prev);
             }
         },
         {
-            icon: _jsx(IconCheckFile, {}),
-            name: "Consenti dettagli con 0 documenti",
+            icon: _jsx(IconCheckFile, { color: showZeroDcmts ? TMColors.tertiary : TMColors.text_normal }),
+            name: showZeroDcmts ? "Nascondi dettagli con 0 documenti" : "Consenti dettagli con 0 documenti",
             onClick: () => {
                 setShowZeroDcmts(prev => !prev);
             }
@@ -296,17 +299,22 @@ const TMMasterDetailDcmts = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallba
                 _jsx(TMNothingToShow, { text: getTitle(), secondText: SDKUI_Localizator.NoDataToDisplay, icon: isForMaster ? _jsx(IconDetailDcmts, { fontSize: 96, transform: 'scale(-1, 1)' }) : _jsx(IconDetailDcmts, { fontSize: 96 }) })
             :
                 _jsxs("div", { ref: floatingBarContainerRef, style: { width: "100%", height: "100%" }, onContextMenu: (e) => {
+                        // Disable context menu when loading
+                        if (isRelationViewerLoading) {
+                            e.preventDefault();
+                            return;
+                        }
                         // Mostra context menu anche sullo spazio bianco (quando non si clicca su un item)
                         e.preventDefault();
                         setContextMenuPosition({ x: e.clientX, y: e.clientY });
                         setContextMenuVisible(true);
                     }, children: [_jsx(TMRelationViewerWrapper, { refreshKey: refreshKey, inputDcmts: inputDcmts, isForMaster: isForMaster, showCurrentDcmtIndicator: showCurrentDcmtIndicator, showZeroDcmts: showZeroDcmts, 
                             // customItemRender={customItemRender}
-                            allowMultipleSelection: allowMultipleSelection, focusedItem: focusedItem, selectedItems: selectedItems, onFocusedItemChanged: handleFocusedItemChanged, onSelectedItemsChanged: handleSelectedItemsChanged, onNoRelationsFound: handleNoRelationsFound, onItemContextMenu: onItemContextMenu, focusedItemFormData: focusedItemFormData }), _jsx(TMContextMenu, { items: operationItems, externalControl: {
+                            allowMultipleSelection: allowMultipleSelection, focusedItem: focusedItem, selectedItems: selectedItems, onFocusedItemChanged: handleFocusedItemChanged, onSelectedItemsChanged: handleSelectedItemsChanged, onNoRelationsFound: handleNoRelationsFound, onItemContextMenu: isRelationViewerLoading ? undefined : onItemContextMenu, focusedItemFormData: focusedItemFormData, onLoadingStateChanged: setIsRelationViewerLoading }), _jsx(TMContextMenu, { items: operationItems, externalControl: {
                                 visible: contextMenuVisible,
                                 position: contextMenuPosition,
                                 onClose: () => setContextMenuVisible(false)
-                            } })] }) }), [inputDcmts, isForMaster, showCurrentDcmtIndicator, showZeroDcmts, allowMultipleSelection, focusedItem, selectedItems, handleFocusedItemChanged, handleSelectedItemsChanged, handleNoRelationsFound, onItemContextMenu, contextMenuVisible, contextMenuPosition, refreshKey, focusedItemFormData]);
+                            } })] }) }), [inputDcmts, isForMaster, showCurrentDcmtIndicator, showZeroDcmts, allowMultipleSelection, focusedItem, selectedItems, handleFocusedItemChanged, handleSelectedItemsChanged, handleNoRelationsFound, onItemContextMenu, contextMenuVisible, contextMenuPosition, refreshKey, focusedItemFormData, isRelationViewerLoading]);
     const tmFormOrResult = useMemo(() => _jsx(TMFormOrResultWrapper, { refreshKey: refreshKeyFormOrResult, deviceType: deviceType, focusedItem: focusedItem, onTaskCreateRequest: onTaskCreateRequest, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers, handleNavigateToReference: handleNavigateToReference, onRefreshAfterAddDcmtToFavs: onRefreshAfterAddDcmtToFavs, editPdfForm: editPdfForm, openS4TViewer: openS4TViewer, onOpenS4TViewerRequest: onOpenS4TViewerRequest, onOpenPdfEditorRequest: onOpenPdfEditorRequest, onRefreshSearchResults: onRefreshAllPanels }), [focusedItem, deviceType, allTasks, handleNavigateToWGs, handleNavigateToDossiers, handleNavigateToReference, editPdfForm, openS4TViewer, onOpenS4TViewerRequest, onOpenPdfEditorRequest, onRefreshAfterAddDcmtToFavs, refreshKeyFormOrResult]);
     const initialPanelDimensions = {
         'tmTreeView': { width: '50%', height: '100%' },
@@ -384,7 +392,7 @@ const TMMasterDetailDcmts = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallba
             toolbarOptions: { icon: _jsx(IconSearchCheck, { fontSize: 24 }), visible: false, orderNumber: 2, isActive: allInitialPanelVisibility['tmFormOrResult'] }
         }
     ], [tmTreeView, tmFormOrResult, focusedItem?.isDcmt, dtdMaster]);
-    return (_jsxs("div", { style: { width: '100%', height: '100%', position: 'relative' }, children: [isCheckingFirstLoad && (_jsx(Spinner, { description: SDKUI_Localizator.Loading, flat: true })), _jsxs("div", { style: isCheckingFirstLoad ? { position: 'absolute', width: 0, height: 0, overflow: 'hidden', opacity: 0, pointerEvents: 'none' } : { width: '100%', height: '100%' }, children: [_jsx(TMPanelManagerProvider, { panels: initialPanels, initialVisibility: allInitialPanelVisibility, defaultDimensions: initialPanelDimensions, initialDimensions: initialPanelDimensions, initialMobilePanelId: 'tmTreeView', children: _jsx(TMPanelManagerContainer, { panels: initialPanels, direction: "horizontal", showToolbar: true }) }), renderDcmtOperations, renderFloatingBar] })] }));
+    return (_jsxs("div", { style: { width: '100%', height: '100%', position: 'relative' }, children: [isCheckingFirstLoad && (_jsx(Spinner, { description: SDKUI_Localizator.Loading, flat: true })), _jsxs("div", { style: isCheckingFirstLoad ? { position: 'absolute', width: 0, height: 0, overflow: 'hidden', opacity: 0, pointerEvents: 'none' } : { width: '100%', height: '100%' }, children: [_jsx(TMLayoutWaitingContainer, { direction: 'vertical', showWaitPanel: showWaitPanel, showWaitPanelPrimary: showPrimary, showWaitPanelSecondary: showSecondary, waitPanelTitle: waitPanelTitle, waitPanelTextPrimary: waitPanelTextPrimary, waitPanelValuePrimary: waitPanelValuePrimary, waitPanelMaxValuePrimary: waitPanelMaxValuePrimary, waitPanelTextSecondary: waitPanelTextSecondary, waitPanelValueSecondary: waitPanelValueSecondary, waitPanelMaxValueSecondary: waitPanelMaxValueSecondary, isCancelable: true, abortController: abortController, children: _jsx(TMPanelManagerProvider, { panels: initialPanels, initialVisibility: allInitialPanelVisibility, defaultDimensions: initialPanelDimensions, initialDimensions: initialPanelDimensions, initialMobilePanelId: 'tmTreeView', children: _jsx(TMPanelManagerContainer, { panels: initialPanels, direction: "horizontal", showToolbar: true }) }) }), renderDcmtOperations, renderFloatingBar] })] }));
 };
 export default TMMasterDetailDcmts;
 /**
@@ -393,8 +401,37 @@ export default TMMasterDetailDcmts;
  * - Panel visibility toggling
  * - Focus delay handling
  */
-const TMRelationViewerWrapper = ({ refreshKey, inputDcmts, isForMaster, showCurrentDcmtIndicator, showZeroDcmts, customItemRender, allowMultipleSelection, focusedItem, selectedItems, onFocusedItemChanged, onSelectedItemsChanged, onNoRelationsFound, onItemContextMenu, focusedItemFormData }) => {
+const TMRelationViewerWrapper = ({ refreshKey, inputDcmts, isForMaster, showCurrentDcmtIndicator, showZeroDcmts, customItemRender, allowMultipleSelection, focusedItem, selectedItems, onFocusedItemChanged, onSelectedItemsChanged, onNoRelationsFound, onItemContextMenu, focusedItemFormData, onLoadingStateChanged }) => {
     const { setPanelVisibilityById, setToolbarButtonVisibility } = useTMPanelManagerContext();
+    // Monitor device type changes to restore panel visibility when switching from mobile to desktop
+    const deviceType = useDeviceType();
+    const prevDeviceTypeRef = useRef(deviceType);
+    // Restore panel visibility when switching from mobile to desktop
+    useEffect(() => {
+        const prevDeviceType = prevDeviceTypeRef.current;
+        prevDeviceTypeRef.current = deviceType;
+        // When switching from mobile to desktop, restore panel visibility based on current focused item
+        if (prevDeviceType === DeviceType.MOBILE && deviceType !== DeviceType.MOBILE) {
+            // Small delay to let the panel manager complete its internal state update
+            setTimeout(() => {
+                // Force tmFormOrResult panel to be visible
+                setPanelVisibilityById('tmFormOrResult', true);
+                // Restore child panel visibility based on focused item
+                if (focusedItem?.isDcmt) {
+                    setPanelVisibilityById('tmSearchResult', false);
+                    setPanelVisibilityById('tmDcmtForm', true);
+                    setToolbarButtonVisibility('tmSearchResult', false);
+                    setToolbarButtonVisibility('tmDcmtForm', true);
+                }
+                else {
+                    setPanelVisibilityById('tmSearchResult', true);
+                    setPanelVisibilityById('tmDcmtForm', false);
+                    setToolbarButtonVisibility('tmSearchResult', true);
+                    setToolbarButtonVisibility('tmDcmtForm', false);
+                }
+            }, 50);
+        }
+    }, [deviceType, focusedItem, setPanelVisibilityById, setToolbarButtonVisibility]);
     // Handle focused item changes with panel visibility management
     const handleFocusedItemChanged = useCallback((item) => {
         onFocusedItemChanged?.(item);
@@ -424,7 +461,7 @@ const TMRelationViewerWrapper = ({ refreshKey, inputDcmts, isForMaster, showCurr
             onItemContextMenu?.(item, e);
         }, 100);
     }, [onItemContextMenu, handleFocusedItemChanged]);
-    return (_jsx(TMRelationViewer, { inputDcmts: inputDcmts, isForMaster: isForMaster, showCurrentDcmtIndicator: showCurrentDcmtIndicator, initialShowZeroDcmts: showZeroDcmts, customItemRender: customItemRender, allowMultipleSelection: allowMultipleSelection, focusedItem: focusedItem, selectedItems: selectedItems, onFocusedItemChanged: handleFocusedItemChanged, onSelectedItemsChanged: onSelectedItemsChanged, maxDepthLevel: 1, invertMasterNavigation: false, showExpandAllButton: true, onNoRelationsFound: onNoRelationsFound, onItemContextMenu: onContextMenu, focusedItemFormData: focusedItemFormData }, refreshKey));
+    return (_jsx(TMRelationViewer, { inputDcmts: inputDcmts, isForMaster: isForMaster, showCurrentDcmtIndicator: showCurrentDcmtIndicator, initialShowZeroDcmts: showZeroDcmts, customItemRender: customItemRender, allowMultipleSelection: allowMultipleSelection, focusedItem: focusedItem, selectedItems: selectedItems, onFocusedItemChanged: handleFocusedItemChanged, onSelectedItemsChanged: onSelectedItemsChanged, maxDepthLevel: 1, invertMasterNavigation: false, showExpandAllButton: true, onNoRelationsFound: onNoRelationsFound, onItemContextMenu: onContextMenu, focusedItemFormData: focusedItemFormData, onLoadingStateChanged: onLoadingStateChanged }, refreshKey));
 };
 const TMFormOrResultWrapper = ({ refreshKey, deviceType, focusedItem, onTaskCreateRequest, allTasks = [], getAllTasks, deleteTaskByIdsCallback, addTaskCallback, editTaskCallback, handleNavigateToWGs, handleNavigateToDossiers, onRefreshAfterAddDcmtToFavs, editPdfForm, openS4TViewer, onOpenS4TViewerRequest, onOpenPdfEditorRequest, onRefreshSearchAsyncDatagrid, onRefreshSearchResults, handleNavigateToReference, fetchRemoteCertificates }) => {
     const { setPanelVisibilityById } = useTMPanelManagerContext();

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

@@ -73,7 +73,10 @@ export interface TMRelationViewerProps {
      * Value rendering respects DataDomain (uses TMDataListItemViewer for lists, TMDataUserIdItemViewer for users, etc.)
      */
     showMetadataNames?: boolean;
-    /** Maximum depth level for recursive loading (default: 2) */
+    /**
+     * Maximum depth level for recursive loading (default: 2).
+     * Use 0 for unlimited depth (expand as much as possible).
+     */
     maxDepthLevel?: number;
     /**
      * If true (default), when isForMaster=true shows: detail doc → master docs as children (inverted navigation)
@@ -123,6 +126,11 @@ export interface TMRelationViewerProps {
      * (root container + first document + first correlation folder).
      */
     defaultExpandAll?: boolean;
+    /**
+     * Callback invoked when loading state changes.
+     * Useful to disable interactions (like context menu) during loading.
+     */
+    onLoadingStateChanged?: (isLoading: boolean) => void;
 }
 /**
  * Check if document type has detail relations
@@ -140,5 +148,6 @@ export declare const getDisplayValueByColumn: (col: DataColumnDescriptor | undef
  * Convert SearchResultDescriptor to structured data source with metadata
  */
 export declare const searchResultToDataSource: (searchResult: SearchResultDescriptor | undefined, hideSysMetadata?: boolean) => Promise<any[]>;
+export declare const DEFAULT_RELATION_EXPAND_LEVEL = 4;
 declare const TMRelationViewer: React.FC<TMRelationViewerProps>;
 export default TMRelationViewer;