@topconsultnpm/sdkui-react 6.17.0-test9

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

@@ -0,0 +1,753 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { DcmtTypeListCacheService, SDK_Globals, DataColumnTypes, MetadataFormats, SystemMIDs, MetadataDataDomains, RelationCacheService, RelationTypes } from "@topconsultnpm/sdk-ts";
+import { genUniqueId, IconFolder, IconBackhandIndexPointingRight } from '../../../helper';
+import { TMColors } from '../../../utils/theme';
+import { StyledDivHorizontal, StyledBadge } from '../../base/Styled';
+import TMTreeView from '../../base/TMTreeView';
+import { TMWaitPanel } from '../../base/TMWaitPanel';
+import { TMUserIdViewer } from '../../choosers/TMUserChooser';
+import TMDataListItemViewer from '../../viewers/TMDataListItemViewer';
+import TMDcmtIcon from './TMDcmtIcon';
+/**
+ * Check if document type has detail relations
+ */
+export const hasDetailRelations = async (mTID) => {
+    if (!mTID)
+        return false;
+    const allRelations = await RelationCacheService.GetAllAsync();
+    const rdlOneToMany = allRelations?.filter(o => o.masterTID == mTID && o.relationType == RelationTypes.OneToMany) ?? [];
+    const rdlManyToMany = allRelations?.filter(o => o.relationType == RelationTypes.ManyToMany && (o.masterTID == mTID || o.detailTID == mTID)) ?? [];
+    return rdlManyToMany.length > 0 || rdlOneToMany.length > 0;
+};
+/**
+ * Check if document type has master relations
+ */
+export const hasMasterRelations = async (dTID) => {
+    if (!dTID)
+        return false;
+    const allRelations = await RelationCacheService.GetAllAsync();
+    const rdlOneToMany = allRelations?.filter(o => o.detailTID == dTID && o.relationType == RelationTypes.OneToMany) ?? [];
+    const rdlManyToMany = allRelations?.filter(o => o.relationType == RelationTypes.ManyToMany && (o.masterTID == dTID || o.detailTID == dTID)) ?? [];
+    return rdlManyToMany.length > 0 || rdlOneToMany.length > 0;
+};
+/**
+ * Check if relation is ManyToMany
+ */
+const isManyToManyRelation = async (relationID) => {
+    if (!relationID)
+        return false;
+    const allRelations = await RelationCacheService.GetAllAsync();
+    const rdlManyToMany = allRelations.filter(o => o.relationType == RelationTypes.ManyToMany && o.id === relationID) ?? [];
+    return rdlManyToMany.length > 0;
+};
+/**
+ * Get metadata keys excluding system metadata
+ */
+export const getMetadataKeys = (obj) => {
+    if (!obj)
+        return [];
+    const keys = Object.keys(obj);
+    // Escludi metadati di sistema (MID < 100 che sono uppercase) e altri campi tecnici
+    const sysMIDs = Object.values(SystemMIDs).map(o => o.toUpperCase());
+    return keys.filter(k => obj?.[k].value && !sysMIDs.includes(k)).filter(o => o !== "rowIndex" && o !== "ISLEXPROT");
+};
+/**
+ * Get display value keys for a document (max 5, prioritize SYS_Abstract)
+ */
+export const getDcmtDisplayValue = (obj) => {
+    if (!obj)
+        return [];
+    // Prima cerca SYS_Abstract
+    if (obj['SYS_Abstract']?.value) {
+        return ['SYS_Abstract'];
+    }
+    // Altrimenti prendi i primi 5 metadati non di sistema
+    const mdKeys = getMetadataKeys(obj);
+    return mdKeys.slice(0, 5);
+};
+/**
+ * Get display value formatted by column type
+ */
+export const getDisplayValueByColumn = (col, value) => {
+    if (!value)
+        return value;
+    if (!col)
+        return value;
+    if (col.dataType === DataColumnTypes.Text)
+        return value;
+    const format = MetadataFormats[(col.extendedProperties?.["Format"] ?? "None")];
+    const formatCulture = col.extendedProperties?.["FormatCulture"] ?? window.navigator.language;
+    if (col.dataType === DataColumnTypes.DateTime) {
+        const date = new Date(value);
+        switch (format) {
+            case MetadataFormats.ShortDate: return date.toLocaleString(formatCulture, formatCulture == "it-IT" ? { year: "numeric", month: "2-digit", day: "2-digit" } : { dateStyle: 'short' });
+            case MetadataFormats.ShortTime: return date.toLocaleString(formatCulture, { timeStyle: 'short' });
+            case MetadataFormats.ShortDateLongTime: return date.toLocaleString(formatCulture, formatCulture == "it-IT" ? { year: "numeric", month: "2-digit", day: "2-digit", hour: '2-digit', minute: '2-digit', second: '2-digit' } : { dateStyle: 'short', timeStyle: 'medium' }).replace(',', '');
+            case MetadataFormats.ShortDateShortTime: return date.toLocaleString(formatCulture, formatCulture == "it-IT" ? { year: "numeric", month: "2-digit", day: "2-digit", hour: '2-digit', minute: '2-digit' } : { dateStyle: 'short', timeStyle: 'short' }).replace(',', '');
+            case MetadataFormats.LongDate: return date.toLocaleString(formatCulture, { weekday: "long", year: "numeric", month: "long", day: "numeric" });
+            case MetadataFormats.LongTime: return date.toLocaleString(formatCulture, { timeStyle: 'medium' });
+            case MetadataFormats.LongDateLongTime: return date.toLocaleString(formatCulture, { weekday: "long", year: "numeric", month: "long", day: "numeric", hour: '2-digit', minute: '2-digit', second: '2-digit' });
+            case MetadataFormats.LongDateShortTime: return date.toLocaleString(formatCulture, { weekday: "long", year: "numeric", month: "long", day: "numeric", hour: '2-digit', minute: '2-digit' });
+            default: return date.toLocaleString(formatCulture, { dateStyle: 'short' });
+        }
+    }
+    if (col.dataType === DataColumnTypes.Number) {
+        return value.toLocaleString(formatCulture, { useGrouping: format == MetadataFormats.NumberWithThousandsSeparator });
+    }
+    if (format == MetadataFormats.None)
+        return value;
+    if (format == MetadataFormats.CurrencyEuro)
+        return value.toLocaleString(formatCulture, { style: 'currency', currency: "EUR" });
+    if (format == MetadataFormats.CurrencyDollar)
+        return value.toLocaleString(formatCulture, { style: 'currency', currency: "USD" });
+    if (format == MetadataFormats.CurrencyPound)
+        return value.toLocaleString(formatCulture, { style: 'currency', currency: "GBP" });
+    if (format == MetadataFormats.CurrencyYen)
+        return value.toLocaleString(formatCulture, { style: 'currency', currency: "JPY" });
+    return value;
+};
+/**
+ * Convert SearchResultDescriptor to structured data source with metadata
+ */
+export const searchResultToDataSource = async (searchResult, hideSysMetadata) => {
+    const rows = searchResult?.dtdResult?.rows ?? [];
+    const tid = searchResult?.fromTID;
+    const dtd = await DcmtTypeListCacheService.GetAsync(tid);
+    const output = [];
+    for (let index = 0; index < rows.length; index++) {
+        const item = { rowIndex: index };
+        const row = rows[index];
+        for (let i = 0; i < row.length; i++) {
+            const mid = Number(searchResult?.dtdResult?.columns?.[i]?.extendedProperties?.["MID"] ?? "0");
+            if (hideSysMetadata && mid < 100)
+                continue;
+            let key = searchResult?.dtdResult?.columns?.[i].caption ?? '';
+            if (mid <= 100)
+                key = key.toUpperCase();
+            const value = row[i];
+            const md = dtd?.metadata?.find(o => o.id == mid);
+            item[key] = {
+                md: md,
+                value: getDisplayValueByColumn(searchResult?.dtdResult?.columns?.[i], value)
+            };
+        }
+        output.push(item);
+    }
+    return output;
+};
+const TMRelationViewer = ({ inputDcmts, isForMaster = false, showCurrentDcmtIndicator = true, allowShowZeroDcmts = true, initialShowZeroDcmts = false, allowedTIDs, allowMultipleSelection = false, focusedItem, selectedItems, onFocusedItemChanged, onSelectedItemsChanged, onDocumentDoubleClick, customItemRender, customDocumentStyle, customMainContainerContent, customDocumentContent, showMetadataNames = false, maxDepthLevel = 2, invertMasterNavigation = true, additionalStaticItems, showMainDocument = true, labelMainContainer, }) => {
+    // State
+    const [dcmtTypes, setDcmtTypes] = useState([]);
+    const [treeData, setTreeData] = useState([]);
+    const [showZeroDcmts, setShowZeroDcmts] = useState(initialShowZeroDcmts);
+    const [staticItemsState, setStaticItemsState] = useState([]);
+    const [showWaitPanel, setShowWaitPanel] = useState(false);
+    const [waitPanelTextPrimary, setWaitPanelTextPrimary] = useState('');
+    const [waitPanelValuePrimary, setWaitPanelValuePrimary] = useState(0);
+    const [waitPanelMaxValuePrimary, setWaitPanelMaxValuePrimary] = useState(0);
+    const [abortController] = useState(new AbortController());
+    const [showExpansionWaitPanel, setShowExpansionWaitPanel] = useState(false);
+    const [expansionWaitPanelText, setExpansionWaitPanelText] = useState('');
+    const [expansionWaitPanelValue, setExpansionWaitPanelValue] = useState(0);
+    const [expansionWaitPanelMaxValue, setExpansionWaitPanelMaxValue] = useState(0);
+    const [expansionAbortController, setExpansionAbortController] = useState(undefined);
+    // Ref to track last loaded input to prevent unnecessary reloads
+    const lastLoadedInputRef = React.useRef('');
+    // Ref to track if user has manually expanded/collapsed static items
+    const userInteractedWithStaticItemsRef = React.useRef(false);
+    /**
+     * Generate a stable key from inputDcmts to detect real changes
+     */
+    const getInputKey = useCallback(() => {
+        if (!inputDcmts || inputDcmts.length === 0)
+            return '';
+        return inputDcmts.map(d => `${d.TID}-${d.DID}`).join('|') + `|${isForMaster}`;
+    }, [inputDcmts, isForMaster]);
+    // Load document types
+    useEffect(() => {
+        const loadDcmtTypes = async () => {
+            const types = await DcmtTypeListCacheService.GetAllWithoutMetadataAsync() || [];
+            setDcmtTypes(types);
+        };
+        loadDcmtTypes();
+    }, []);
+    useEffect(() => {
+        setShowZeroDcmts(initialShowZeroDcmts);
+    }, [initialShowZeroDcmts]);
+    /**
+     * Recursively retrieve detail documents (adapted from TMMasterDetailDcmts.tsx)
+     */
+    const getDetailDcmtsAsync = useCallback(async (mTID, mDID, maxLevel) => {
+        const items = [];
+        if (!mTID)
+            return [];
+        if (!mDID)
+            return [];
+        if (maxLevel <= 0)
+            return [];
+        const dcmtTypeHasRel = await hasDetailRelations(mTID);
+        if (!dcmtTypeHasRel)
+            return [];
+        try {
+            const searchEngine = SDK_Globals.tmSession?.NewSearchEngine();
+            if (!searchEngine)
+                return items;
+            const results = await searchEngine.GetAllDetailDcmtsAsync(mTID, mDID) ?? [];
+            for (const searchResult of results) {
+                // Skip if allowedTIDs is set and this TID is not allowed
+                if (allowedTIDs && searchResult.fromTID && !allowedTIDs.includes(searchResult.fromTID)) {
+                    continue;
+                }
+                const containerGUID = genUniqueId();
+                const dtd = await DcmtTypeListCacheService.GetAsync(searchResult.fromTID);
+                const newDcmtTypeContainer = {
+                    tid: searchResult.fromTID,
+                    dtd: dtd,
+                    did: undefined,
+                    key: `${searchResult.fromTID}_${searchResult.relationID}_${mTID}_${mDID}_${containerGUID}`,
+                    name: searchResult.fromName || dtd?.name || `TID: ${searchResult.fromTID}`,
+                    isContainer: true,
+                    relationId: searchResult.relationID,
+                    isManyToMany: await isManyToManyRelation(searchResult.relationID),
+                    searchResult: [searchResult],
+                    isZero: (searchResult.dcmtsFound ?? 0) <= 0,
+                    itemsCount: (searchResult.dcmtsFound ?? 0),
+                    expanded: false,
+                    hidden: false
+                };
+                const source = await searchResultToDataSource(searchResult);
+                if (source && source.length > 0) {
+                    const dcmtDetails = [];
+                    for (const row of source) {
+                        const rowGUID = genUniqueId();
+                        const tid = row?.TID?.value;
+                        const did = row?.DID?.value;
+                        dcmtDetails.push({
+                            tid: tid,
+                            did: did,
+                            key: `${tid}_${did}_${searchResult.relationID}_${mTID}_${mDID}_${rowGUID}`,
+                            isDcmt: true,
+                            isContainer: false,
+                            isZero: false, // Documents are never zero (they exist)
+                            values: row,
+                            searchResult: [searchResult],
+                            itemsCount: 0,
+                            expanded: false,
+                            hidden: false,
+                            name: row?.SYS_Abstract?.value || row?.SYS_SUBJECT?.value || `Documento ${did}`
+                            // Note: Recursive loading on expansion is handled by calculateItemsForNode
+                        });
+                    }
+                    newDcmtTypeContainer.items = dcmtDetails;
+                }
+                items.push(newDcmtTypeContainer);
+            }
+        }
+        catch (error) {
+            console.error('❌ Error loading detail documents:', error);
+        }
+        return items;
+    }, [allowedTIDs]);
+    /**
+     * Recursively retrieve master documents
+     */
+    const getMasterDcmtsAsync = useCallback(async (dTID, dDID, maxLevel) => {
+        const items = [];
+        if (!dTID)
+            return [];
+        if (!dDID)
+            return [];
+        if (maxLevel <= 0)
+            return [];
+        const dcmtTypeHasRel = await hasMasterRelations(dTID);
+        if (!dcmtTypeHasRel)
+            return [];
+        try {
+            const searchEngine = SDK_Globals.tmSession?.NewSearchEngine();
+            if (!searchEngine)
+                return items;
+            const results = await searchEngine.GetAllMasterDcmtsAsync(dTID, dDID) ?? [];
+            for (const searchResult of results) {
+                // Skip if allowedTIDs is set and this TID is not allowed
+                if (allowedTIDs && searchResult.fromTID && !allowedTIDs.includes(searchResult.fromTID)) {
+                    continue;
+                }
+                const containerGUID = genUniqueId();
+                const dtd = await DcmtTypeListCacheService.GetAsync(searchResult.fromTID);
+                const newDcmtTypeContainer = {
+                    tid: searchResult.fromTID,
+                    dtd: dtd,
+                    did: undefined,
+                    key: `${searchResult.fromTID}_${searchResult.relationID}_${dTID}_${dDID}_${containerGUID}`,
+                    name: searchResult.fromName || dtd?.name || `TID: ${searchResult.fromTID}`,
+                    isContainer: true,
+                    relationId: searchResult.relationID,
+                    isManyToMany: await isManyToManyRelation(searchResult.relationID),
+                    searchResult: [searchResult],
+                    isZero: (searchResult.dcmtsFound ?? 0) <= 0,
+                    itemsCount: (searchResult.dcmtsFound ?? 0),
+                    expanded: false,
+                    hidden: false
+                };
+                const source = await searchResultToDataSource(searchResult);
+                if (source && source.length > 0) {
+                    const dcmtMasters = [];
+                    for (const row of source) {
+                        const rowGUID = genUniqueId();
+                        const tid = row?.TID?.value;
+                        const did = row?.DID?.value;
+                        dcmtMasters.push({
+                            tid: tid,
+                            did: did,
+                            key: `${tid}_${did}_${searchResult.relationID}_${dTID}_${dDID}_${rowGUID}`,
+                            isDcmt: true,
+                            isContainer: false,
+                            isZero: false, // Documents are never zero (they exist)
+                            values: row,
+                            searchResult: [searchResult],
+                            itemsCount: 0,
+                            expanded: false,
+                            hidden: false,
+                            name: row?.SYS_Abstract?.value || row?.SYS_SUBJECT?.value || `Documento ${did}`
+                            // Note: Recursive loading on expansion is handled by calculateItemsForNode
+                        });
+                    }
+                    newDcmtTypeContainer.items = dcmtMasters;
+                }
+                items.push(newDcmtTypeContainer);
+            }
+        }
+        catch (error) {
+            console.error('❌ Error loading master documents:', error);
+        }
+        return items;
+    }, [allowedTIDs]);
+    /**
+     * Update hidden property based on showZeroDcmts (original simple logic)
+     */
+    const updateHiddenProperty = useCallback((nodes) => {
+        return nodes.map(node => {
+            const updatedNode = { ...node, hidden: !showZeroDcmts && node.isZero };
+            if (node.items) {
+                updatedNode.items = updateHiddenProperty(node.items);
+            }
+            return updatedNode;
+        });
+    }, [showZeroDcmts]);
+    /**
+     * Main data loading function
+     */
+    const loadData = useCallback(async () => {
+        if (!inputDcmts || inputDcmts.length === 0 || dcmtTypes.length === 0) {
+            setTreeData([]);
+            return;
+        }
+        const tree = [];
+        let processedCount = 0;
+        for (const dcmt of inputDcmts) {
+            // Check for abort
+            if (abortController.signal.aborted) {
+                console.warn(`⚠️ Operation aborted. Processed ${processedCount} documents`);
+                break;
+            }
+            // Update wait panel progress
+            setWaitPanelTextPrimary(`Caricamento correlazione ${processedCount + 1} di ${inputDcmts.length}`);
+            const searchEngine = SDK_Globals.tmSession?.NewSearchEngine();
+            if (!searchEngine)
+                continue;
+            // Load document metadata
+            const result = await searchEngine.GetMetadataAsync(dcmt.TID, dcmt.DID, false);
+            const dtd = await DcmtTypeListCacheService.GetAsync(dcmt.TID);
+            // Parse document values
+            const docValues = await searchResultToDataSource(result);
+            const docRow = docValues.length > 0 ? docValues[0] : undefined;
+            // Generate unique GUID for this container
+            const containerGUID = genUniqueId();
+            // ========================================================================
+            // MODALITÀ MASTER CON NAVIGAZIONE ORIGINALE (invertMasterNavigation=false)
+            // ========================================================================
+            if (isForMaster && !invertMasterNavigation) {
+                // Carica i master documents
+                const masterDocs = await getMasterDcmtsAsync(dcmt.TID, dcmt.DID, maxDepthLevel);
+                // Per ogni master, carica i suoi detail (incluso il documento corrente)
+                for (const masterContainer of masterDocs) {
+                    if (!masterContainer.items)
+                        continue;
+                    // Per ogni master document nel container, carica i detail
+                    for (const masterDoc of masterContainer.items) {
+                        if (masterDoc.tid && masterDoc.did) {
+                            // Carica i detail del master (incluso il documento di partenza)
+                            const detailDocs = await getDetailDcmtsAsync(masterDoc.tid, masterDoc.did, 1);
+                            masterDoc.items = detailDocs;
+                            masterDoc.itemsCount = detailDocs.length;
+                            masterDoc.isLoaded = true;
+                        }
+                    }
+                }
+                // Aggiungi i master come root
+                tree.push(...masterDocs);
+            }
+            // ========================================================================
+            // MODALITÀ STANDARD (detail o master invertito)
+            // ========================================================================
+            else {
+                // Load related documents (detail or master based on isForMaster flag)
+                const relatedDocs = isForMaster
+                    ? await getMasterDcmtsAsync(dcmt.TID, dcmt.DID, maxDepthLevel)
+                    : await getDetailDcmtsAsync(dcmt.TID, dcmt.DID, maxDepthLevel);
+                // Se showMainDocument è false, mostra i container dei dettagli direttamente sotto il container principale
+                if (!showMainDocument) {
+                    // Create type container that contains detail containers directly
+                    const typeContainer = {
+                        key: `${isForMaster ? 'detail' : 'master'}-type-${dcmt.TID}-${containerGUID}`,
+                        name: labelMainContainer || result?.fromName || dtd?.name || `TID: ${dcmt.TID}`,
+                        tid: dcmt.TID,
+                        dtd,
+                        isContainer: true,
+                        isRoot: true,
+                        isLoaded: true,
+                        isZero: false,
+                        searchResult: result ? [result] : [],
+                        items: relatedDocs, // Directly show detail containers
+                        itemsCount: relatedDocs.length,
+                        expanded: tree.length === 0,
+                        hidden: false
+                    };
+                    tree.push(typeContainer);
+                }
+                else {
+                    // MODALITÀ ORIGINALE: mostra il documento master come nodo intermedio
+                    // Create document node WITH VALUES
+                    const docNode = {
+                        key: `${isForMaster ? 'detail' : 'master'}-doc-${dcmt.TID}-${dcmt.DID}-${containerGUID}`,
+                        name: docRow?.SYS_Abstract?.value || docRow?.SYS_SUBJECT?.value || `Documento ${isForMaster ? 'Dettaglio' : 'Master'}`,
+                        tid: dcmt.TID,
+                        did: dcmt.DID,
+                        isDcmt: true,
+                        isContainer: false,
+                        expanded: tree.length === 0,
+                        isZero: dcmt.DID === 0,
+                        isMaster: !isForMaster,
+                        isRoot: true,
+                        isLoaded: true,
+                        hidden: false,
+                        values: docRow,
+                        searchResult: result ? [result] : [],
+                        items: relatedDocs,
+                        itemsCount: relatedDocs.length
+                    };
+                    // Create type container with unique key
+                    const typeContainer = {
+                        key: `${isForMaster ? 'detail' : 'master'}-type-${dcmt.TID}-${containerGUID}`,
+                        name: labelMainContainer || result?.fromName || dtd?.name || `TID: ${dcmt.TID}`,
+                        tid: dcmt.TID,
+                        dtd,
+                        isContainer: true,
+                        isRoot: true,
+                        isLoaded: true,
+                        isZero: false, // Type container is never zero (contains documents)
+                        searchResult: result ? [result] : [],
+                        items: [docNode],
+                        itemsCount: 1,
+                        expanded: tree.length === 0,
+                        hidden: false
+                    };
+                    tree.push(typeContainer);
+                }
+            }
+            // Update progress counter
+            processedCount++;
+            setWaitPanelValuePrimary(processedCount);
+        }
+        setTreeData(updateHiddenProperty(tree));
+    }, [inputDcmts, dcmtTypes, maxDepthLevel, isForMaster, invertMasterNavigation, getDetailDcmtsAsync, getMasterDcmtsAsync, abortController, updateHiddenProperty, showMainDocument, labelMainContainer]);
+    /**
+     * Merge main tree data with additional static items
+     */
+    const mergedTreeData = useMemo(() => {
+        if (!additionalStaticItems || additionalStaticItems.length === 0) {
+            return treeData;
+        }
+        // Use staticItemsState if available (preserves expanded state), otherwise use fresh additionalStaticItems
+        const itemsToMerge = staticItemsState.length > 0 ? staticItemsState : additionalStaticItems;
+        // Append additional static items at the end
+        // NOTE: Do NOT call updateHiddenProperty on static items - they are pre-processed by the parent
+        // and may contain custom properties that would be lost by the spread operator
+        return [...treeData, ...itemsToMerge];
+    }, [treeData, additionalStaticItems, staticItemsState]);
+    /**
+     * Load data when inputs change
+     */
+    useEffect(() => {
+        if (!inputDcmts || inputDcmts.length === 0 || dcmtTypes.length === 0) {
+            setTreeData([]);
+            lastLoadedInputRef.current = '';
+            userInteractedWithStaticItemsRef.current = false; // Reset interaction flag
+            return;
+        }
+        // Generate current input key
+        const currentKey = getInputKey();
+        // Skip if we already loaded this exact data
+        if (currentKey === lastLoadedInputRef.current && treeData.length > 0) {
+            return;
+        }
+        // Mark as loading this key
+        lastLoadedInputRef.current = currentKey;
+        // Reset interaction flag when loading new data
+        userInteractedWithStaticItemsRef.current = false;
+        setShowWaitPanel(true);
+        setWaitPanelMaxValuePrimary(inputDcmts.length);
+        setWaitPanelValuePrimary(0);
+        // Call loadData and use .then() instead of await to allow React to render
+        loadData().then(() => {
+            setShowWaitPanel(false);
+            setWaitPanelTextPrimary('');
+            setWaitPanelMaxValuePrimary(0);
+            setWaitPanelValuePrimary(0);
+        });
+    }, [inputDcmts, dcmtTypes, maxDepthLevel, getInputKey, loadData, treeData.length]);
+    /**
+     * Update tree when showZeroDcmts changes
+     */
+    useEffect(() => {
+        setTreeData(prevData => updateHiddenProperty(prevData));
+    }, [showZeroDcmts, updateHiddenProperty]);
+    /**
+     * Sync static items state when additionalStaticItems change
+     * IMPORTANT: Only update if user hasn't manually interacted with the tree,
+     * to preserve expand/collapse state
+     */
+    useEffect(() => {
+        // If user hasn't interacted yet, sync with incoming additionalStaticItems
+        if (!userInteractedWithStaticItemsRef.current) {
+            setStaticItemsState(additionalStaticItems || []);
+        }
+        // If user has interacted, we need to merge the new data with existing state
+        // to preserve expanded/collapsed state while updating content
+        else if (additionalStaticItems && additionalStaticItems.length > 0) {
+            setStaticItemsState(prevState => {
+                // Create a map of existing state by key
+                const stateMap = new Map(prevState.map(item => [item.key, item]));
+                // Merge: use existing state if available (preserves expanded), otherwise use new item
+                return additionalStaticItems.map(newItem => {
+                    const existingItem = stateMap.get(newItem.key);
+                    if (existingItem) {
+                        // Preserve expanded state but update content
+                        return {
+                            ...newItem,
+                            expanded: existingItem.expanded,
+                            items: newItem.items // Always use fresh items from parent
+                        };
+                    }
+                    return newItem;
+                });
+            });
+        }
+    }, [additionalStaticItems]);
+    /**
+     * Calculate items for node when expanded (lazy loading)
+     * Note: additionalStaticItems are already fully loaded, so skip calculation for them
+     */
+    const calculateItemsForNode = useCallback(async (node) => {
+        // Skip calculation for separator (it has no children)
+        if (node.isSeparator) {
+            return undefined;
+        }
+        // Skip calculation for additional static items (they're pre-loaded and should not trigger dynamic loading)
+        if (node.isStaticItem || node.isAdditionalContainer || node.isAdditional) {
+            return node.items;
+        }
+        // If it's a document, return existing items
+        if (node.isDcmt)
+            return node.items;
+        // If container is already loaded, return items
+        if (node.isLoaded)
+            return node.items;
+        const newAbortController = new AbortController();
+        setExpansionAbortController(newAbortController);
+        const itemsToLoad = node.items?.length ?? 0;
+        setShowExpansionWaitPanel(true);
+        setExpansionWaitPanelMaxValue(itemsToLoad);
+        setExpansionWaitPanelValue(0);
+        setExpansionWaitPanelText(`Caricamento documenti correlati...`);
+        try {
+            const newItems = [];
+            let processedCount = 0;
+            for (const dcmt of node.items ?? []) {
+                if (newAbortController.signal.aborted) {
+                    console.log('Folder expansion aborted by user');
+                    return node.items;
+                }
+                const item = { ...dcmt };
+                if (item.tid && item.did && !item.isLoaded) {
+                    // Update progress
+                    processedCount++;
+                    setExpansionWaitPanelValue(processedCount);
+                    setExpansionWaitPanelText(`Caricamento ${processedCount} di ${itemsToLoad}...`);
+                    // Nella modalità originale (invertMasterNavigation=false), 
+                    // i documenti detail non devono caricare i master come figli
+                    if (isForMaster && !invertMasterNavigation) {
+                        // Carica i detail dei detail (navigazione naturale detail→detail)
+                        const loadedItems = await getDetailDcmtsAsync(item.tid, item.did, 1);
+                        item.items = updateHiddenProperty(loadedItems);
+                    }
+                    else {
+                        // Modalità standard o invertita
+                        const loadedItems = isForMaster
+                            ? await getMasterDcmtsAsync(item.tid, item.did, 1)
+                            : await getDetailDcmtsAsync(item.tid, item.did, 1);
+                        item.items = updateHiddenProperty(loadedItems);
+                    }
+                    item.isLoaded = true;
+                }
+                newItems.push(item);
+            }
+            return newItems;
+        }
+        catch (error) {
+            console.error('Error loading folder contents:', error);
+            return node.items;
+        }
+        finally {
+            setShowExpansionWaitPanel(false);
+            setExpansionAbortController(undefined);
+        }
+    }, [isForMaster, invertMasterNavigation, getDetailDcmtsAsync, getMasterDcmtsAsync, updateHiddenProperty]);
+    /**
+     * Default item renderer with metadata display (adapted from TMMasterDetailDcmts.tsx)
+     */
+    const defaultItemRender = useCallback((item) => {
+        if (!item)
+            return _jsx("span", { children: "-" });
+        const handleDoubleClick = (e) => {
+            if (item.isContainer || !item.tid || !item.did)
+                return;
+            e.stopPropagation();
+            onDocumentDoubleClick?.(item.tid, item.did, item.name);
+        };
+        // Container rendering
+        if (item.isContainer || !item.isDcmt) {
+            const defaultContainerStyle = {
+                display: 'flex',
+                alignItems: 'center',
+                gap: '10px',
+                height: '32px',
+                padding: '6px 0',
+                opacity: item.isZero ? 0.4 : 1,
+                transition: 'opacity 0.2s ease-in-out'
+            };
+            // Se è il container principale (root) e showMainDocument è false,
+            // non mostrare il badge perché conterrebbe il numero di sotto-container, non di documenti
+            const shouldShowBadge = !(item.isRoot && !showMainDocument);
+            const defaultContent = (_jsxs(_Fragment, { children: [_jsx("div", { style: { position: 'relative' }, children: _jsx(IconFolder, { color: item.isManyToMany ? '#ff8f44' : TMColors.iconLight, fontSize: 24 }) }), _jsxs(StyledDivHorizontal, { style: { gap: 5, overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis' }, children: [_jsx("p", { style: {
+                                    whiteSpace: 'nowrap',
+                                    textOverflow: 'ellipsis',
+                                    fontSize: '1rem',
+                                    color: 'inherit'
+                                }, children: item.name }), shouldShowBadge && (_jsx(StyledBadge, { "$backgroundColor": TMColors.info, children: item.items?.length ?? 0 }))] })] }));
+            // Se è il container principale (root) e abbiamo un custom renderer, usalo
+            const content = (item.isRoot && customMainContainerContent)
+                ? customMainContainerContent(item, defaultContent)
+                : defaultContent;
+            return (_jsx("div", { style: defaultContainerStyle, children: content }));
+        }
+        // Document rendering with full metadata display
+        const defaultDocumentStyle = {
+            minWidth: '90px',
+            width: '100%',
+            display: 'flex',
+            marginLeft: '5px',
+            marginTop: '5px',
+            marginBottom: '5px',
+            gap: '15px',
+            alignItems: 'center',
+            cursor: 'pointer',
+            userSelect: 'none',
+            opacity: item.isZero ? 0.4 : 1,
+            transition: 'opacity 0.2s ease-in-out'
+        };
+        const documentStyle = customDocumentStyle
+            ? { ...defaultDocumentStyle, ...customDocumentStyle(item) }
+            : defaultDocumentStyle;
+        const defaultMetadataContent = item.values && (_jsx(StyledDivHorizontal, { style: {
+                fontSize: '1rem',
+                overflow: 'hidden',
+                flex: 1,
+                minWidth: 0,
+                whiteSpace: 'nowrap'
+            }, children: getDcmtDisplayValue(item.values).map((key, index) => {
+                const md = item.values?.[key]?.md;
+                const value = item.values?.[key]?.value;
+                const displayValues = getDcmtDisplayValue(item.values);
+                const isLast = index === displayValues.length - 1;
+                return (_jsxs(StyledDivHorizontal, { style: {
+                        flexShrink: isLast ? 1 : 0,
+                        minWidth: isLast ? 0 : 'auto',
+                        overflow: isLast ? 'hidden' : 'visible'
+                    }, children: [index > 0 && _jsx("span", { style: { margin: '0 5px', color: '#999' }, children: "\u2022" }), showMetadataNames && (_jsxs("span", { style: { color: '#666', marginRight: '5px' }, children: [md?.name || key, ":"] })), md?.dataDomain === MetadataDataDomains.DataList ? (_jsx(TMDataListItemViewer, { dataListId: md.dataListID, viewMode: md.dataListViewMode, value: value })) : md?.dataDomain === MetadataDataDomains.UserID ? (_jsx(TMUserIdViewer, { userId: value, showIcon: true, noneSelectionText: '' })) : (_jsx("span", { style: {
+                                fontWeight: 500,
+                                overflow: isLast ? 'hidden' : 'visible',
+                                textOverflow: isLast ? 'ellipsis' : 'clip',
+                                whiteSpace: 'nowrap'
+                            }, children: value }))] }, `${key}_${index}`));
+            }) }));
+        const metadataContent = customDocumentContent
+            ? customDocumentContent(item, defaultMetadataContent || _jsx(_Fragment, {}))
+            : defaultMetadataContent;
+        return (_jsxs("div", { onDoubleClick: handleDoubleClick, style: documentStyle, children: [item.did && showCurrentDcmtIndicator && item.did === inputDcmts?.[0].DID ? _jsx(IconBackhandIndexPointingRight, { fontSize: 22, overflow: 'visible' }) : _jsx(_Fragment, {}), item.values && (_jsx(TMDcmtIcon, { tid: item.values?.TID?.value, did: item.values?.DID?.value, fileExtension: item.values?.FILEEXT?.value, fileCount: item.values?.FILECOUNT?.value, isLexProt: item.values?.IsLexProt?.value, isMail: item.values?.ISMAIL?.value, isShared: item.values?.ISSHARED?.value, isSigned: item.values?.ISSIGNED?.value, downloadMode: 'openInNewWindow' })), metadataContent] }));
+    }, [onDocumentDoubleClick, showCurrentDcmtIndicator, inputDcmts, customMainContainerContent, customDocumentStyle, customDocumentContent, showMetadataNames, showMainDocument]);
+    /**
+     * Wrapper renderer that handles custom rendering if provided
+     */
+    const finalItemRender = useCallback((item) => {
+        if (!item)
+            return _jsx("span", { children: "-" });
+        // If customItemRender is provided, try it first
+        if (customItemRender) {
+            const customResult = customItemRender(item);
+            // If custom renderer returns something (not undefined), use it
+            if (customResult !== undefined) {
+                return customResult;
+            }
+        }
+        // Otherwise use default renderer
+        return defaultItemRender(item);
+    }, [customItemRender, defaultItemRender]);
+    /**
+     * Handle focused item changed
+     */
+    const handleFocusedItemChanged = useCallback((item) => {
+        onFocusedItemChanged?.(item);
+    }, [onFocusedItemChanged]);
+    /**
+     * Handle selected items changed
+     */
+    const handleSelectedItemsChanged = useCallback((items) => {
+        onSelectedItemsChanged?.(items);
+    }, [onSelectedItemsChanged]);
+    /**
+     * Handle data changed - separate static items from dynamic tree data
+     */
+    const handleDataChanged = useCallback((updatedData) => {
+        // Separate static items, separator, and dynamic correlations
+        const dynamicItems = updatedData.filter(item => !item.isStaticItem && !item.isSeparator);
+        const staticItems = updatedData.filter(item => item.isStaticItem);
+        setTreeData(dynamicItems);
+        setStaticItemsState(staticItems); // Preserve static items state (expanded/collapsed)
+        // Mark that user has interacted with the tree (expanded/collapsed nodes)
+        userInteractedWithStaticItemsRef.current = true;
+    }, []);
+    if (showWaitPanel) {
+        return _jsx("div", { style: { padding: '20px', textAlign: 'center' }, children: _jsx(TMWaitPanel, { title: 'Caricamento documenti dettaglio', showPrimary: true, textPrimary: waitPanelTextPrimary, valuePrimary: waitPanelValuePrimary, maxValuePrimary: waitPanelMaxValuePrimary, isCancelable: true, abortController: abortController, onAbortClick: (abortController) => { setTimeout(() => { abortController?.abort(); }, 1000); } }) });
+    }
+    if (mergedTreeData.length === 0) {
+        return _jsx("div", { style: { padding: '20px', textAlign: 'center', color: '#666' }, children: "Nessuna relazione disponibile." });
+    }
+    return (_jsxs(_Fragment, { children: [_jsx(TMTreeView, { dataSource: mergedTreeData, itemRender: finalItemRender, calculateItemsForNode: calculateItemsForNode, onDataChanged: handleDataChanged, focusedItem: focusedItem, onFocusedItemChanged: handleFocusedItemChanged, allowMultipleSelection: allowMultipleSelection, selectedItems: selectedItems, onSelectionChanged: handleSelectedItemsChanged }), showExpansionWaitPanel && (_jsx(TMWaitPanel, { title: isForMaster ? 'Caricamento documenti master' : 'Caricamento documenti dettaglio', showPrimary: true, textPrimary: expansionWaitPanelText, valuePrimary: expansionWaitPanelValue, maxValuePrimary: expansionWaitPanelMaxValue, isCancelable: true, abortController: expansionAbortController, onAbortClick: (abortController) => {
+                    setTimeout(() => {
+                        abortController?.abort();
+                    }, 100);
+                } }))] }));
+};
+export default TMRelationViewer;