@topconsultnpm/sdkui-react 6.22.0-dev2.14 → 6.22.0-dev2.15

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,6 +74,24 @@ 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)
@@ -216,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) {
@@ -227,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);
@@ -276,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) {
@@ -292,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);
@@ -307,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 = [];
@@ -346,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
@@ -358,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];
                 }
             }
@@ -367,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));
@@ -376,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 => {
@@ -391,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;
@@ -421,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) {
@@ -437,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)
@@ -479,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/TMDistinctValues.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { LayoutModes, MetadataDataDomains, AccessLevels, MetadataDataTypes, SDK_Globals, DcmtTypeListCacheService, DataColumnTypes, DataListViewModes } from '@topconsultnpm/sdk-ts';
 import styled from 'styled-components';
 import { SDKUI_Localizator, stringIsNullOrEmpty } from '../../helper';
@@ -7,26 +7,30 @@ import TMDataGrid, { TMDataGridPageSize } from '../base/TMDataGrid';
 import { TMExceptionBoxManager } from '../base/TMPopUp';
 import TMSpinner from '../base/TMSpinner';
 import TMCheckBox from '../editors/TMCheckBox';
+import TMTextBox from '../editors/TMTextBox';
 import TMPanel from '../base/TMPanel';
 import TMModal from '../base/TMModal';
 import { useDataListItem } from '../../hooks/useDataListItem';
 import { useDataUserIdItem } from '../../hooks/useDataUserIdItem';
 const StyledDistinctValues = styled.div `display: flex; flex-direction: column; height: 100%; overflow: hidden; gap: 10px; position: relative;`;
-const TMDistinctValues = ({ tid, mid, layoutMode = LayoutModes.None, allowAppendMode = true, showHeader = true, isModal, separator = " ", onSelectionChanged, onClosePanelCallback }) => {
+const StyledAppendBar = styled.div `display: flex; flex-direction: row; align-items: center; gap: 5px; position: absolute; right: 15px; top: 15px; z-index: 10000;`;
+const TMDistinctValues = ({ tid, mid, layoutMode = LayoutModes.None, allowAppendMode = true, showHeader = true, isModal, separator = ",", onSelectionChanged, onClosePanelCallback }) => {
     const [focusedItem, setFocusedItem] = useState();
     const [dataSource, setDataSource] = useState([]);
     const [isAppendMode, setIsAppendMode] = useState(false);
     const [md, setMd] = useState();
-    const [currentValue, setCurrentValue] = useState('');
-    const { loadDataListsAsync, renderDataListCell, dataListsCache } = useDataListItem();
-    const { loadUsersAsync, renderUserIdViewer, usersCache } = useDataUserIdItem();
+    const [appendedValues, setAppendedValues] = useState(new Set());
+    const { loadDataListsAsync, renderDataListCell, getDataListItem } = useDataListItem();
+    const { loadUsersAsync, renderUserIdViewer, getUserItem, getCompleteUserName } = useDataUserIdItem();
+    // Identifica la richiesta corrente: le risposte delle richieste obsolete vengono scartate
+    const requestIdRef = useRef(0);
     useEffect(() => {
         getDistictValuesAsync();
-    }, [mid]);
+    }, [tid, mid]);
     useEffect(() => {
         setIsAppendMode(false);
         setFocusedItem(undefined);
-        setCurrentValue('');
+        setAppendedValues(new Set());
     }, [md]);
     useEffect(() => {
         if (!focusedItem)
@@ -42,27 +46,39 @@ const TMDistinctValues = ({ tid, mid, layoutMode = LayoutModes.None, allowAppend
         };
         if (layoutMode in permissionCheck && permissionCheck[layoutMode] !== AccessLevels.Yes)
             return;
-        if (!focusedItem.value) {
-            setCurrentValue('');
+        if (stringIsNullOrEmpty(focusedItem.value)) {
+            setAppendedValues(new Set());
             onSelectionChanged?.({ tid: tid, mid: mid, newValue: undefined, isAppendMode: isAppendMode });
             return;
         }
         let value = md.dataType === MetadataDataTypes.Number ? parseFloat(focusedItem.value.replace(',', '.')).toString() : focusedItem.value;
-        let newValue = stringIsNullOrEmpty(currentValue)
-            ? value
-            : isAppendMode ? currentValue + separator + value : value;
-        setCurrentValue(newValue);
-        onSelectionChanged?.({ tid: tid, mid: mid, newValue: newValue, isAppendMode: isAppendMode });
+        // Fuori dalla modalità Accoda la selezione sostituisce sempre il valore precedente
+        const newAppendedValues = isAppendMode ? new Set(appendedValues) : new Set();
+        newAppendedValues.add(value);
+        setAppendedValues(newAppendedValues);
+        onSelectionChanged?.({ tid: tid, mid: mid, newValue: joinAppendedValues(newAppendedValues), isAppendMode: isAppendMode });
     }, [focusedItem]);
+    const joinAppendedValues = (values) => Array.from(values).join(separator);
+    const onAppendModeChanged = () => {
+        const newIsAppendMode = !isAppendMode;
+        // Disattivando l'accodamento si riparte da zero: il prossimo click sostituirà il valore
+        if (!newIsAppendMode)
+            setAppendedValues(new Set());
+        setIsAppendMode(newIsAppendMode);
+    };
     const getDistictValuesAsync = async () => {
         if (!tid)
             return;
+        const requestId = ++requestIdRef.current;
+        // Svuota subito la griglia: evita di mostrare i valori del tid/mid precedente durante il caricamento
+        setDataSource([]);
         try {
             TMSpinner.show({ description: 'Caricamento dei valori distinti...' });
             let dtd = await DcmtTypeListCacheService.GetAsync(tid, true);
             const currentMd = dtd?.metadata?.find(o => o.id === mid);
-            setMd(currentMd);
             let result = await SDK_Globals.tmSession?.NewSearchEngine().GetDistinctValuesAsync(tid, mid, 10000);
+            if (requestId !== requestIdRef.current)
+                return;
             // Load DataList or UserID cache based on metadata domain
             if (currentMd?.dataDomain === MetadataDataDomains.DataList && currentMd.dataListID) {
                 await loadDataListsAsync(new Set([currentMd.dataListID]));
@@ -77,9 +93,17 @@ const TMDistinctValues = ({ tid, mid, layoutMode = LayoutModes.None, allowAppend
                 });
                 await loadUsersAsync(userIDs);
             }
+            // Nel frattempo tid/mid sono cambiati: questa risposta (e le cache appena caricate) non è più valida
+            if (requestId !== requestIdRef.current)
+                return;
+            // md e dataSource vengono impostati insieme, dopo il popolamento delle cache,
+            // così il render delle celle usa sempre metadato e cache coerenti con i dati
+            setMd(currentMd);
             setDataSource(convertDataTableToObject(result?.dtdResult));
         }
         catch (e) {
+            if (requestId !== requestIdRef.current)
+                return;
             let err = e;
             TMExceptionBoxManager.show({ exception: err });
         }
@@ -101,13 +125,32 @@ const TMDistinctValues = ({ tid, mid, layoutMode = LayoutModes.None, allowAppend
         }
         return _jsx("div", { children: cellData.text });
     }, [md, renderDataListCell, renderUserIdViewer]);
+    // Per DataList e UserID il testo mostrato in cella (descrizione, nome utente) è diverso dal valore
+    // grezzo del dataSource (codice, id): senza questa funzione la ricerca di DevExtreme filtrerebbe
+    // sul valore grezzo e non troverebbe quello che l'utente vede scritto nella griglia
+    const calculateValueDisplayValue = useCallback((rowData) => {
+        const value = rowData?.value;
+        if (stringIsNullOrEmpty(value))
+            return value;
+        if (md?.dataDomain === MetadataDataDomains.DataList && md.dataListID) {
+            return getDataListItem(md.dataListID, value)?.name ?? value;
+        }
+        if (md?.dataDomain === MetadataDataDomains.UserID) {
+            const userId = Number(value);
+            if (userId === 0)
+                return SDKUI_Localizator.SystemUser;
+            const ud = getUserItem(userId);
+            return ud ? getCompleteUserName(ud.domain, ud.name) ?? value : value;
+        }
+        return value;
+    }, [md, getDataListItem, getUserItem, getCompleteUserName]);
     const customColumns = useMemo(() => {
         const needsCellRender = md?.dataDomain === MetadataDataDomains.DataList || md?.dataDomain === MetadataDataDomains.UserID;
         return ([
-            { dataField: 'value', dataType: md?.dataType === MetadataDataTypes.DateTime ? 'date' : 'string', caption: md?.nameLoc, width: 'min-content', ...(needsCellRender && { cellRender: valueCellRender }) },
+            { dataField: 'value', dataType: md?.dataType === MetadataDataTypes.DateTime ? 'date' : 'string', caption: md?.nameLoc, width: 'min-content', ...(needsCellRender && { cellRender: valueCellRender, calculateDisplayValue: calculateValueDisplayValue }) },
             { dataField: 'Count', dataType: 'number', caption: 'N°' }
         ]);
-    }, [md, valueCellRender]);
+    }, [md, valueCellRender, calculateValueDisplayValue]);
     const customSummary = useMemo(() => {
         return ({
             totalItems: [
@@ -119,17 +162,29 @@ const TMDistinctValues = ({ tid, mid, layoutMode = LayoutModes.None, allowAppend
     const convertDataTableToObject = (dtdResult) => {
         if (!dtdResult?.columns?.length || !dtdResult?.rows?.length)
             return [];
-        return dtdResult.rows.map((row, index) => {
-            let rowObject = { rowIndex: index };
-            dtdResult.columns && dtdResult.columns.forEach((col, colIndex) => {
-                if (col?.caption) {
-                    rowObject[colIndex === 0 ? "value" : col.caption] = col.dataType === DataColumnTypes.Number
-                        ? row?.[colIndex]?.replace('.', ',')
-                        : row?.[colIndex] ?? null;
-                }
-            });
+        // Descrittori di colonna calcolati una sola volta invece che per ogni riga
+        const columns = [];
+        dtdResult.columns.forEach((col, colIndex) => {
+            if (col?.caption) {
+                columns.push({ index: colIndex, key: colIndex === 0 ? "value" : col.caption, isNumber: col.dataType === DataColumnTypes.Number });
+            }
+        });
+        // Il conteggio delle occorrenze è la seconda colonna del risultato:
+        // la chiave di ordinamento viene calcolata una volta per riga, non a ogni confronto
+        const COUNT_COL_INDEX = 1;
+        const rows = dtdResult.rows.map((row) => {
+            let rowObject = { rowIndex: 0, sortValue: 0 };
+            for (let i = 0; i < columns.length; i++) {
+                const col = columns[i];
+                rowObject[col.key] = col.isNumber ? row?.[col.index]?.replace('.', ',') : row?.[col.index] ?? null;
+            }
+            rowObject.sortValue = Number(row?.[COUNT_COL_INDEX]) || 0;
             return rowObject;
         });
+        rows.sort((a, b) => b.sortValue - a.sortValue);
+        for (let i = 0; i < rows.length; i++)
+            rows[i].rowIndex = i;
+        return rows;
     };
     const isVisibleAppend = () => {
         if (!allowAppendMode)
@@ -145,7 +200,7 @@ const TMDistinctValues = ({ tid, mid, layoutMode = LayoutModes.None, allowAppend
         return md.dataDomain === undefined || md.dataDomain === MetadataDataDomains.None;
     };
     const renderContent = () => {
-        return (_jsxs(StyledDistinctValues, { children: [isVisibleAppend() && _jsx(TMCheckBox, { elementStyle: { position: 'absolute', right: '15px', top: '15px', zIndex: 10000 }, label: 'Accoda', value: isAppendMode, onValueChanged: () => { setIsAppendMode(!isAppendMode); } }), _jsx(TMDataGrid, { focusedRowKey: focusedItem ? focusedItem.rowIndex : undefined, selection: { showCheckBoxesMode: 'none' }, searchPanel: { highlightCaseSensitive: true, visible: true }, dataColumns: customColumns, dataSource: dataSource, keyExpr: 'rowIndex', height: 'calc(100%)', onFocusedRowChanged: onFocusedRowChanged, paging: { pageSize: 30 }, summary: customSummary, onRowDblClick: () => !isAppendMode && onClosePanelCallback?.(), pageSize: TMDataGridPageSize.Medium })] }));
+        return (_jsxs(StyledDistinctValues, { children: [isVisibleAppend() && _jsxs(StyledAppendBar, { children: [_jsx(TMCheckBox, { label: 'Accoda e separa con', value: isAppendMode, onValueChanged: onAppendModeChanged }), _jsx(TMTextBox, { width: '30px', readOnly: true, disabled: !isAppendMode, value: separator })] }), _jsx(TMDataGrid, { focusedRowKey: focusedItem ? focusedItem.rowIndex : undefined, selection: { showCheckBoxesMode: 'none' }, searchPanel: { highlightCaseSensitive: true, visible: true }, dataColumns: customColumns, dataSource: dataSource, keyExpr: 'rowIndex', height: 'calc(100%)', onFocusedRowChanged: onFocusedRowChanged, paging: { pageSize: 30 }, summary: customSummary, onRowDblClick: () => onClosePanelCallback?.(), pageSize: TMDataGridPageSize.Medium })] }));
     };
     return (_jsx(_Fragment, { children: isModal
             ? _jsx(TMModal, { title: SDKUI_Localizator.DistinctValues + (md?.nameLoc ? ` (${md?.nameLoc})` : ''), height: '600px', width: '500px', resizable: true, onClose: onClosePanelCallback, children: renderContent() })

package/lib/components/features/search/TMSearchQueryEditor.js

@@ -58,10 +58,12 @@ const TMSearchQueryEditor = ({ qd, dcmtTypesList = [], isExpertMode = SDKUI_Glob
     const handleItemSelect = useCallback((tid, mid) => {
         if (currentEditingMID !== mid)
             setCurrentEditingMID(mid);
-        if (!focusedTidMid || mid !== focusedTidMid.mid) {
-            setFocusedTidMid({ tid: tid, mid: mid });
+        if (!focusedTidMid || mid !== focusedTidMid.mid || tid !== focusedTidMid.tid) {
+            const newFocusedTidMid = { tid: tid, mid: mid };
+            setFocusedTidMid(newFocusedTidMid);
+            onFocusedMetadataChanged?.(newFocusedTidMid);
         }
-    }, [currentEditingMID, focusedTidMid]);
+    }, [currentEditingMID, focusedTidMid, onFocusedMetadataChanged]);
     const handleAdvancedMenuClick = useCallback((e) => {
         if (e.button === AdvancedMenuButtons.MakeEditable && e.mid) {
             addOrRemoveEditableList(e.mid);

package/lib/hooks/useDataUserIdItem.d.ts

@@ -3,6 +3,7 @@ import { UserDescriptor } from '@topconsultnpm/sdk-ts';
 export declare const useDataUserIdItem: () => {
     loadUsersAsync: (userIDs: Set<number>) => Promise<void>;
     getUserItem: (userId: number) => UserDescriptor | undefined;
+    getCompleteUserName: (domain: string | undefined, name: string | undefined) => string | undefined;
     clearCache: () => void;
     hasUser: (userId: number) => boolean;
     usersCache: React.MutableRefObject<Map<number, UserDescriptor>>;

package/lib/hooks/useDataUserIdItem.js

@@ -90,6 +90,7 @@ export const useDataUserIdItem = () => {
     return {
         loadUsersAsync,
         getUserItem,
+        getCompleteUserName,
         clearCache,
         hasUser,
         usersCache: usersCacheRef,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@topconsultnpm/sdkui-react",
-    "version": "6.22.0-dev2.14",
+    "version": "6.22.0-dev2.15",
     "description": "",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",