@topconsultnpm/sdkui-react 6.22.0-dev2.2 → 6.22.0-dev2.21

package/lib/components/base/TMTooltip.js

@@ -1,20 +1,37 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { Tooltip } from 'devextreme-react/tooltip';
 import { genUniqueId } from '../../helper';
 import { DeviceType, useDeviceType } from './TMDeviceProvider';
-const TMTooltip = ({ children, position, content, hideAfterDelay, parentStyle, childStyle }) => {
+/** Tempo per spostare il mouse dall'elemento al contenuto del tooltip, quando è interattivo */
+const HIDE_DELAY_MS = 400;
+const TMTooltip = ({ children, position, content, hideAfterDelay, parentStyle, childStyle, allowContentInteraction = false }) => {
     const [showTooltip, setShowTooltip] = useState(false);
     const [id, setID] = useState('');
+    const hideTimerRef = useRef();
     useEffect(() => { setID(genUniqueId()); }, [children]);
     useEffect(() => {
-        window.addEventListener('click', () => setShowTooltip(false));
-        return () => window.removeEventListener('click', () => setShowTooltip(false));
+        const hide = () => setShowTooltip(false);
+        window.addEventListener('click', hide);
+        return () => window.removeEventListener('click', hide);
     }, []);
+    useEffect(() => { return () => clearTimeout(hideTimerRef.current); }, []);
     const deviceType = useDeviceType();
-    return (_jsxs("div", { style: parentStyle, children: [_jsx("div", { id: `idContainerTooltip${id}`, style: { display: 'flex', alignItems: 'center', height: 'max-content', width: 'max-content', ...childStyle }, onMouseEnter: () => { setShowTooltip(true); }, onMouseLeave: () => { setShowTooltip(false); }, onTouchStart: () => { setShowTooltip(true); }, onClick: () => { if (deviceType === DeviceType.DESKTOP || !hideAfterDelay)
+    const cancelHide = () => clearTimeout(hideTimerRef.current);
+    const show = () => { cancelHide(); setShowTooltip(true); };
+    const hide = () => {
+        cancelHide();
+        if (!allowContentInteraction) {
+            setShowTooltip(false);
+            return;
+        }
+        hideTimerRef.current = setTimeout(() => setShowTooltip(false), HIDE_DELAY_MS);
+    };
+    return (_jsxs("div", { style: parentStyle, children: [_jsx("div", { id: `idContainerTooltip${id}`, style: { display: 'flex', alignItems: 'center', height: 'max-content', width: 'max-content', ...childStyle }, onMouseEnter: show, onMouseLeave: hide, onTouchStart: show, onClick: () => { if (deviceType === DeviceType.DESKTOP || !hideAfterDelay)
                     return; setTimeout(() => { setShowTooltip(false); }, 1500); }, onTouchEnd: () => { if (deviceType === DeviceType.DESKTOP || !hideAfterDelay)
                     return; setTimeout(() => { setShowTooltip(false); }, 1500); }, children: children }), content &&
-                _jsx(Tooltip, { target: `#idContainerTooltip${id}`, hideOnOutsideClick: true, visible: showTooltip, position: position ?? 'bottom', onHidden: () => setShowTooltip(false), children: content })] }));
+                _jsx(Tooltip, { target: `#idContainerTooltip${id}`, hideOnOutsideClick: true, visible: showTooltip, position: position ?? 'bottom', onHidden: () => setShowTooltip(false), children: allowContentInteraction
+                        ? _jsx("div", { style: { pointerEvents: 'all' }, onMouseEnter: cancelHide, onMouseLeave: hide, children: content })
+                        : content })] }));
 };
 export default TMTooltip;

package/lib/components/base/TMTreeView.js

@@ -54,13 +54,16 @@ const VirtualRowComponent = memo(({ ariaAttributes, index, style, flattenedItems
         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 &&
+    // Controlla se questa riga specifica è cambiata: confronta l'identità del nodo (non i soli
+    // campi key/expanded) per non lasciare visualizzato un nodo obsoleto. Gli handler non servono:
+    // hanno identità stabile e leggono lo stato dalle ref.
+    return (prevNode === nextNode &&
         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);
+        prevProps.allowMultipleSelection === nextProps.allowMultipleSelection &&
+        prevProps.itemRender === nextProps.itemRender &&
+        prevProps.onItemContextMenu === nextProps.onItemContextMenu);
 });
 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
@@ -71,12 +74,35 @@ const TMTreeView = ({ dataSource = [], focusedItem, selectedItems = [], allowMul
     // Ref per selectedItems - permette alle callback memoizzate di accedere sempre al valore più recente
     const selectedItemsRef = useRef(selectedItems);
     selectedItemsRef.current = selectedItems;
+    // Ref per props e callback usate dagli handler: una riga virtualizzata memoizzata conserva le
+    // props del render precedente, quindi gli handler non devono catturare lo stato nella closure.
+    const dataSourceRef = useRef(dataSource);
+    dataSourceRef.current = dataSource;
+    const autoSelectChildrenRef = useRef(autoSelectChildren);
+    autoSelectChildrenRef.current = autoSelectChildren;
+    const calculateItemsForNodeRef = useRef(calculateItemsForNode);
+    calculateItemsForNodeRef.current = calculateItemsForNode;
+    const onNodeUpdateRef = useRef(onNodeUpdate);
+    onNodeUpdateRef.current = onNodeUpdate;
+    const onDataChangedRef = useRef(onDataChanged);
+    onDataChangedRef.current = onDataChanged;
+    const onFocusedItemChangedRef = useRef(onFocusedItemChanged);
+    onFocusedItemChangedRef.current = onFocusedItemChanged;
+    const onSelectionChangedRef = useRef(onSelectionChanged);
+    onSelectionChangedRef.current = onSelectionChanged;
+    const shouldDelayFocusOnEventRef = useRef(shouldDelayFocusOnEvent);
+    shouldDelayFocusOnEventRef.current = shouldDelayFocusOnEvent;
     // 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 [];
+        // Con la virtualizzazione react-window renderizza già solo le righe visibili:
+        // la paginazione nasconderebbe gli items oltre itemsPerPage senza renderizzare
+        // il paginatore, presente solo nel render standard (renderTree).
+        if (enableVirtualization)
+            return node.items;
         const totalItems = node.items.length;
         // Se non c'è paginazione attiva o gli items sono pochi, mostra tutti
         if (totalItems <= itemsPerPage || !showLoadMoreButton) {
@@ -87,7 +113,7 @@ const TMTreeView = ({ dataSource = [], focusedItem, selectedItems = [], allowMul
         const startIndex = currentPage * itemsPerPage;
         const endIndex = startIndex + itemsPerPage;
         return node.items.slice(startIndex, endIndex);
-    }, [itemsPerPage, showLoadMoreButton]);
+    }, [itemsPerPage, showLoadMoreButton, enableVirtualization]);
     // Misura le dimensioni del container per react-window
     useEffect(() => {
         if (!enableVirtualization || !containerRef.current)
@@ -211,7 +237,7 @@ const TMTreeView = ({ dataSource = [], focusedItem, selectedItems = [], allowMul
         const currentIndex = flatList.findIndex(item => item.key === currentItem.key);
         return flatList[currentIndex - 1] || null;
     };
-    const flattenTree = (nodes) => {
+    const flattenTree = useCallback((nodes) => {
         let flatList = [];
         nodes.forEach(node => {
             if (!node.hidden) {
@@ -222,45 +248,57 @@ const TMTreeView = ({ dataSource = [], focusedItem, selectedItems = [], allowMul
             }
         });
         return flatList;
-    };
-    const handleNodeToggle = async (key, ctrlKey) => {
-        const updateNodeRecursively = async (nodes) => {
-            const updatedNodes = await Promise.all(nodes.map(async (node) => {
-                if (node.key === key) {
-                    if (node.expanded) {
-                        // Collassa il nodo
-                        const updatedNode = { ...node, expanded: false };
-                        onNodeUpdate?.(updatedNode);
-                        return updatedNode;
-                    }
-                    else {
-                        // Espandi il nodo
-                        let newItems = node.items;
-                        // Solo se calculateItemsForNode è definito E (ctrl è premuto O non è già caricato)
-                        if (calculateItemsForNode && (ctrlKey || !node.isLoaded)) {
-                            // Se ctrl è premuto, passa un nodo con isLoaded resettato per forzare il refresh
-                            const nodeForCalculation = ctrlKey ? { ...node, isLoaded: false } : node;
-                            newItems = await calculateItemsForNode(nodeForCalculation);
-                            const updatedNode = { ...node, expanded: true, items: newItems, isLoaded: true };
-                            onNodeUpdate?.(updatedNode);
-                            return updatedNode;
-                        }
-                        // Altrimenti usa semplicemente gli items esistenti
-                        return { ...node, expanded: true };
-                    }
-                }
-                if (node.items) {
-                    const updatedItems = await updateNodeRecursively(node.items);
-                    return { ...node, items: updatedItems };
-                }
+    }, []);
+    const findNodeByKey = useCallback((nodes, key) => {
+        for (const node of nodes) {
+            if (node.key === key)
                 return node;
-            }));
-            return updatedNodes;
-        };
-        updateNodeRecursively(dataSource).then(updatedData => {
-            onDataChanged?.(updatedData);
+            if (node.items) {
+                const found = findNodeByKey(node.items, key);
+                if (found)
+                    return found;
+            }
+        }
+        return null;
+    }, []);
+    const handleNodeToggle = useCallback(async (key, ctrlKey) => {
+        // dataSourceRef è letta alla chiamata, non alla creazione della closure
+        const target = findNodeByKey(dataSourceRef.current, key);
+        if (!target)
+            return;
+        const calculateItems = calculateItemsForNodeRef.current;
+        let updatedNode;
+        if (target.expanded) {
+            // Collassa il nodo
+            updatedNode = { ...target, expanded: false };
+            onNodeUpdateRef.current?.(updatedNode);
+        }
+        else if (calculateItems && (ctrlKey || !target.isLoaded)) {
+            // Espandi il nodo caricando gli items.
+            // Solo se calculateItemsForNode è definito E (ctrl è premuto O non è già caricato).
+            // Se ctrl è premuto, passa un nodo con isLoaded resettato per forzare il refresh.
+            const nodeForCalculation = ctrlKey ? { ...target, isLoaded: false } : target;
+            const newItems = await calculateItems(nodeForCalculation);
+            updatedNode = { ...target, expanded: true, items: newItems, isLoaded: true };
+            onNodeUpdateRef.current?.(updatedNode);
+        }
+        else {
+            // Altrimenti usa semplicemente gli items esistenti
+            updatedNode = { ...target, expanded: true };
+        }
+        // Rimpiazzo sull'albero riletto dopo l'await: non sovrascrive i toggle fatti durante la fetch
+        let replaced = false;
+        const replaceNode = (nodes) => nodes.map(node => {
+            if (!replaced && node.key === key) {
+                replaced = true;
+                return updatedNode;
+            }
+            if (node.items)
+                return { ...node, items: replaceNode(node.items) };
+            return node;
         });
-    };
+        onDataChangedRef.current?.(replaceNode(dataSourceRef.current));
+    }, [findNodeByKey]);
     // Ref per distinguere click singolo/doppio sulla riga (esempio TMDcmtIcon)
     const clickTimeoutRef = useRef(null);
     const lastClickedNodeKeyRef = useRef(undefined);
@@ -271,7 +309,8 @@ const TMTreeView = ({ dataSource = [], focusedItem, selectedItems = [], allowMul
             return;
         }
         // Se shouldDelayFocusOnEvent non è fornita, il comportamento predefinito è il focus immediato (false)
-        const delayFocus = shouldDelayFocusOnEvent ? shouldDelayFocusOnEvent(node, e) : false;
+        const shouldDelay = shouldDelayFocusOnEventRef.current;
+        const delayFocus = shouldDelay ? shouldDelay(node, e) : false;
         // Reset del timer se il click è su un nodo diverso dal precedente
         if (lastClickedNodeKeyRef.current && lastClickedNodeKeyRef.current !== node.key) {
             if (clickTimeoutRef.current) {
@@ -287,7 +326,7 @@ const TMTreeView = ({ dataSource = [], focusedItem, selectedItems = [], allowMul
                 // Primo click: imposta il timer per il focus
                 lastClickedNodeKeyRef.current = node.key;
                 clickTimeoutRef.current = setTimeout(() => {
-                    onFocusedItemChanged?.(node);
+                    onFocusedItemChangedRef.current?.(node);
                     clickTimeoutRef.current = null;
                     lastClickedNodeKeyRef.current = undefined;
                 }, 200);
@@ -302,12 +341,14 @@ const TMTreeView = ({ dataSource = [], focusedItem, selectedItems = [], allowMul
                 clickTimeoutRef.current = null;
                 lastClickedNodeKeyRef.current = undefined;
             }
-            onFocusedItemChanged?.(node); // Chiama onFocusedItemChanged immediatamente
+            onFocusedItemChangedRef.current?.(node); // Chiama onFocusedItemChanged immediatamente
         }
-    }, [onFocusedItemChanged, calculateItemsForNode, onNodeUpdate]);
+    }, []);
     const handleCheckboxChange = useCallback((node, checked) => {
-        // Usa la ref per accedere sempre al valore più recente di selectedItems
+        // Usa le ref per accedere sempre ai valori più recenti
         const currentSelectedItems = selectedItemsRef.current;
+        const currentDataSource = dataSourceRef.current;
+        const autoSelect = autoSelectChildrenRef.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 = [];
@@ -341,7 +382,7 @@ const TMTreeView = ({ dataSource = [], focusedItem, selectedItems = [], allowMul
         };
         let newSelectedItems;
         if (checked) {
-            if (node.isContainer && autoSelectChildren) {
+            if (node.isContainer && autoSelect) {
                 // Quando selezioni un container, aggiungi il container stesso + tutti i figli (se autoSelectChildren è true)
                 const allChildren = flattenTree(node.items || []);
                 // Rimuovi eventuali duplicati: filtra gli elementi già presenti nella selezione
@@ -353,8 +394,8 @@ const TMTreeView = ({ dataSource = [], focusedItem, selectedItems = [], allowMul
                 // Quando selezioni un figlio o un container con autoSelectChildren=false, aggiungi solo il nodo
                 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);
+                if (autoSelect) {
+                    const parentsToAdd = findAndCheckParents(currentDataSource, node, newSelectedItems);
                     newSelectedItems = [...newSelectedItems, ...parentsToAdd];
                 }
             }
@@ -362,7 +403,7 @@ const TMTreeView = ({ dataSource = [], focusedItem, selectedItems = [], allowMul
                 newSelectedItems = currentSelectedItems;
             }
         }
-        else if (node.isContainer && autoSelectChildren) {
+        else if (node.isContainer && autoSelect) {
             // 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 = currentSelectedItems.filter(item => item.key !== node.key && !childKeys.includes(item.key));
@@ -371,7 +412,7 @@ const TMTreeView = ({ dataSource = [], focusedItem, selectedItems = [], allowMul
             // Quando deselezioni un figlio o un container con autoSelectChildren=false, rimuovi solo il nodo
             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) {
+            if (autoSelect && !node.isContainer) {
                 const removeParentContainers = (items) => {
                     const parentsToRemove = [];
                     items.forEach(item => {
@@ -386,26 +427,26 @@ const TMTreeView = ({ dataSource = [], focusedItem, selectedItems = [], allowMul
                     });
                     return parentsToRemove;
                 };
-                const parentsToRemove = removeParentContainers(dataSource);
+                const parentsToRemove = removeParentContainers(currentDataSource);
                 newSelectedItems = newSelectedItems.filter(item => !parentsToRemove.includes(item.key));
             }
         }
-        onSelectionChanged?.(newSelectedItems);
-    }, [autoSelectChildren, dataSource, onSelectionChanged]);
+        onSelectionChangedRef.current?.(newSelectedItems);
+    }, [flattenTree]);
     // Aggiorna la ref con l'ultima versione di handleCheckboxChange
     handleCheckboxChangeRef.current = handleCheckboxChange;
-    const hasPartialChildSelection = (node) => {
+    const hasPartialChildSelection = useCallback((node) => {
         // Lo stato indeterminate ha senso solo quando autoSelectChildren è true
-        if (!autoSelectChildren)
+        if (!autoSelectChildrenRef.current)
             return false;
         if (!node.isContainer || !node.items)
             return false;
         const childKeys = flattenTree(node.items).map(item => item.key);
-        const selectedChildKeys = selectedItems.map(item => item.key);
+        const selectedChildKeys = selectedItemsRef.current.map(item => item.key);
         const selectedCount = childKeys.filter(key => selectedChildKeys.includes(key)).length;
         return selectedCount > 0 && selectedCount < childKeys.length;
-    };
-    const hasVisibleItems = (node) => {
+    }, [flattenTree]);
+    const hasVisibleItems = useCallback((node) => {
         // If node has explicit isExpandible value, use that
         if (node.isExpandible !== undefined) {
             return node.isExpandible;
@@ -416,14 +457,14 @@ const TMTreeView = ({ dataSource = [], focusedItem, selectedItems = [], allowMul
         if (node.items.length <= 0)
             return false;
         return node.items.filter(o => !o.hidden).length > 0;
-    };
+    }, []);
     // Gestisce il cambio di pagina per un nodo
     const handlePageChange = useCallback((nodeKey, newPage) => {
         const updateNodePage = (nodes) => {
             return nodes.map(node => {
                 if (node.key === nodeKey) {
                     const updatedNode = { ...node, currentPage: newPage };
-                    onNodeUpdate?.(updatedNode);
+                    onNodeUpdateRef.current?.(updatedNode);
                     return updatedNode;
                 }
                 if (node.items) {
@@ -432,9 +473,9 @@ const TMTreeView = ({ dataSource = [], focusedItem, selectedItems = [], allowMul
                 return node;
             });
         };
-        const updatedData = updateNodePage(dataSource);
-        onDataChanged?.(updatedData);
-    }, [dataSource, onDataChanged, onNodeUpdate]);
+        const updatedData = updateNodePage(dataSourceRef.current);
+        onDataChangedRef.current?.(updatedData);
+    }, []);
     // Verifica se c'è bisogno del paginatore
     const needsPagination = useCallback((node) => {
         if (!showLoadMoreButton || !node.items)
@@ -474,7 +515,7 @@ const TMTreeView = ({ dataSource = [], focusedItem, selectedItems = [], allowMul
                                     onItemContextMenu(node, e);
                                 }
                             }, 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]);
+    }, [handleNodeClick, handleNodeToggle, handleCheckboxChange, hasVisibleItems, hasPartialChildSelection, itemRender, focusedItem, selectedItems, allowMultipleSelection, getVisibleItems, needsPagination, handlePageChange, getTotalPages, onItemContextMenu]);
     // 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

package/lib/components/choosers/TMDcmtTypeChooser.js

@@ -3,11 +3,12 @@ import { useEffect, useState } from 'react';
 import { AccessLevelsEx, DcmtTypeListCacheService, SDK_Globals, SDK_Localizator } from '@topconsultnpm/sdk-ts';
 import TMSpinner from '../base/TMSpinner';
 import { IconSearch, SDKUI_Localizator } from '../../helper';
+import { FontSize } from '../../utils/theme';
 import { StyledDivHorizontal } from '../base/Styled';
 import TMTidViewer, { TMDcmtTypeIcon } from '../viewers/TMTidViewer';
 import TMSummary from '../editors/TMSummary';
 import TMChooserForm from '../forms/TMChooserForm';
-const TMDcmtTypeChooser = ({ tmSession, dataSource, disabled, backgroundColor, filter, accessFilter = 'all', showEditButton = true, borderRadius = '4px', buttons = [], placeHolder = `<${SDKUI_Localizator.NoneSelection}>`, openEditorOnSummaryClick, showBorder = true, showId = false, elementStyle, allowMultipleSelection, ShowOnlyDcmtTypes, ShowOnlySAP, filterTemplateTID, values, isModifiedWhen, label, width, height, showClearButton = false, validationItems = [], onValueChanged, updateIsModalOpen }) => {
+const TMDcmtTypeChooser = ({ tmSession, dataSource, disabled, backgroundColor, icon, filter, accessFilter = 'all', showEditButton = true, borderRadius = '4px', fontSize = FontSize.defaultFontSize, buttons = [], placeHolder = `<${SDKUI_Localizator.NoneSelection}>`, openEditorOnSummaryClick, showBorder = true, showId = false, elementStyle, allowMultipleSelection, ShowOnlyDcmtTypes, ShowOnlySAP, filterTemplateTID, values, isModifiedWhen, label, width, height, showClearButton = false, validationItems = [], onValueChanged, updateIsModalOpen }) => {
     const [showChooser, setShowChooser] = useState(false);
     useEffect(() => {
         TMSpinner.show({ description: `${SDKUI_Localizator.Loading} - ${SDK_Localizator.ListDcmtTypeOrView} ...` });
@@ -15,9 +16,9 @@ const TMDcmtTypeChooser = ({ tmSession, dataSource, disabled, backgroundColor, f
         DcmtTypeListCacheService.GetFromTIDsAsync(values, false, tms).then(() => { TMSpinner.hide(); });
     }, [values]);
     const renderTemplate = () => {
-        return (_jsxs(StyledDivHorizontal, { style: { width: 'max-content', height: '100%' }, children: [values && _jsx(TMTidViewer, { tmSession: tmSession, tid: values[0], showIcon: true, showId: showId, noneSelectionText: placeHolder }), values && values.length > 1 && _jsx("p", { style: { marginLeft: '10px' }, children: `(+${values.length - 1} ${values.length == 2 ? 'altro' : 'altri'})` })] }));
+        return (_jsxs(StyledDivHorizontal, { style: { width: 'max-content', height: '100%' }, children: [values && _jsx(TMTidViewer, { tmSession: tmSession, tid: values[0], color: 'inherit', showIcon: true, showId: showId, noneSelectionText: placeHolder }), values && values.length > 1 && _jsx("p", { style: { margin: 0, marginLeft: '10px' }, children: `(+${values.length - 1} ${values.length == 2 ? 'altro' : 'altri'})` })] }));
     };
-    return (_jsxs(_Fragment, { children: [_jsx(TMSummary, { backgroundColor: backgroundColor, buttons: buttons, showBorder: showBorder, borderRadius: borderRadius, hasValue: values && values.length > 0, showClearButton: showClearButton, showEditButton: showEditButton, iconEditButton: _jsx(IconSearch, { fontSize: 16 }), onEditorClick: () => {
+    return (_jsxs(_Fragment, { children: [_jsx(TMSummary, { backgroundColor: backgroundColor, icon: icon, disabled: disabled, fontSize: fontSize, buttons: buttons, showBorder: showBorder, borderRadius: borderRadius, hasValue: values && values.length > 0, showClearButton: showClearButton, showEditButton: showEditButton, iconEditButton: _jsx(IconSearch, { fontSize: 16 }), onEditorClick: () => {
                     if (!disabled) {
                         setShowChooser(true);
                         updateIsModalOpen?.(true);

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { LayoutModes } from '@topconsultnpm/sdk-ts';
+import { TMDistinctValuesEventArgs } from '../../hooks/useTMDistinctValuesSelection';
 interface ITMDistinctValues {
     tid: number | undefined;
     mid: number | undefined;
@@ -8,14 +9,15 @@ interface ITMDistinctValues {
     allowAppendMode?: boolean;
     showHeader?: boolean;
     isModal?: boolean;
-    onSelectionChanged?: (e: DistinctValuesEventArgs) => void;
+    onSelectionChanged?: (e: TMDistinctValuesEventArgs) => void;
     onClosePanelCallback?: () => void;
 }
-type DistinctValuesEventArgs = {
-    tid: number | undefined;
-    mid: number | undefined;
-    newValue: string | undefined;
-    isAppendMode: boolean;
-};
+/**
+ * Pannello da cui si preleva il valore di un campo del form scegliendolo fra quelli già archiviati.
+ *
+ * Le due sorgenti (valori distinti del metadato e ricerca rapida su una ricerca salvata) stanno in due hook
+ * dedicati che espongono la stessa interfaccia (righe, colonne, conteggi): qui restano la composizione,
+ * la scelta della sorgente da mostrare e il render.
+ */
 declare const TMDistinctValues: React.FC<ITMDistinctValues>;
 export default TMDistinctValues;