@topconsultnpm/sdkui-react 6.20.0-dev1.60 → 6.20.0-dev1.62

package/lib/components/base/TMDropDownMenu.js

@@ -1,8 +1,8 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState, forwardRef, useRef, useImperativeHandle } from 'react';
 import styled from 'styled-components';
-import ContextMenu from 'devextreme-react/context-menu';
-import { FontSize, TMColors } from '../../utils/theme';
+import { ContextMenu as TMContextMenu } from '../NewComponents/ContextMenu';
+import { TMColors } from '../../utils/theme';
 import { genUniqueId } from '../../helper';
 const StyledContent = styled.div `
     cursor: pointer;
@@ -22,14 +22,6 @@ const StyledContent = styled.div `
         border-bottom-color: ${TMColors.primary};
     }
 `;
-const StyledMenuItem = styled.div `
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 6px;
-    width: 100%;
-    font-size: ${FontSize.defaultFontSize};
-`;
 const TMDropDownMenu = forwardRef(({ content, items, disabled = false, color = TMColors.text_normal, backgroundColor = TMColors.default_background, borderRadius, onMenuShown }, ref) => {
     const [id, setID] = useState('');
     const dropDownMenuElementRef = useRef(null); // Ref all'elemento DOM div principale
@@ -39,7 +31,32 @@ const TMDropDownMenu = forwardRef(({ content, items, disabled = false, color = T
             dropDownMenuElementRef.current?.focus();
         },
     }));
-    const renderItemTemplate = (itemData) => (_jsxs(StyledMenuItem, { children: [itemData.icon && _jsx("div", { style: { display: 'flex', alignItems: 'center' }, children: itemData.icon }), _jsx("span", { style: { flexGrow: 1 }, children: itemData.text }), itemData.items && _jsx("span", { className: "dx-icon-spinright dx-icon", style: { marginLeft: '10px' } })] }));
-    return (_jsxs(_Fragment, { children: [_jsx(StyledContent, { id: `idContainer${id}`, ref: dropDownMenuElementRef, tabIndex: disabled ? -1 : 0, "$disabled": disabled, "$color": color, "$backgroundColor": backgroundColor, "$borderRadius": borderRadius, children: content }), _jsx(ContextMenu, { target: `#idContainer${id}`, dataSource: items, showEvent: 'click', itemRender: renderItemTemplate, onShown: (e) => onMenuShown?.(), onHidden: (e) => dropDownMenuElementRef.current?.focus() })] }));
+    // Converter function: ITMDropDownMenuItem -> TMContextMenuItemProps
+    const convertToContextMenuItems = (dropDownItems) => {
+        if (!dropDownItems)
+            return [];
+        return dropDownItems.map(item => ({
+            name: item.text,
+            icon: item.icon,
+            disabled: item.disabled,
+            beginGroup: item.beginGroup,
+            onClick: item.onClick,
+            submenu: item.items ? convertToContextMenuItems(item.items) : undefined,
+        }));
+    };
+    const [menuVisible, setMenuVisible] = useState(false);
+    const handleMenuOpen = () => {
+        setMenuVisible(true);
+        onMenuShown?.();
+    };
+    const handleMenuClose = () => {
+        setMenuVisible(false);
+        dropDownMenuElementRef.current?.focus();
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(StyledContent, { id: `idContainer${id}`, ref: dropDownMenuElementRef, tabIndex: disabled ? -1 : 0, "$disabled": disabled, "$color": color, "$backgroundColor": backgroundColor, "$borderRadius": borderRadius, onClick: !disabled ? handleMenuOpen : undefined, children: content }), _jsx(TMContextMenu, { items: convertToContextMenuItems(items), target: `#idContainer${id}`, trigger: "left", externalControl: {
+                    visible: menuVisible,
+                    position: { x: 0, y: 0 },
+                    onClose: handleMenuClose,
+                } })] }));
 });
 export default TMDropDownMenu;

package/lib/components/base/TMPanel.js

@@ -133,7 +133,7 @@ onActivate, onBack, onClose, onHeaderDoubleClick, onMaximize, onActiveChanged },
     };
     return (_jsxs(StyledPanelContainer, { ref: panelRef, "$isMaximized": onMaximize ? false : isMaximized, style: {
             visibility: isVisible ? 'visible' : 'hidden',
-        }, tabIndex: -1, onFocus: !isControlled ? handleFocusUncontrolled : undefined, onBlur: !isControlled ? handleBlurUncontrolled : undefined, onClick: handleActivation, children: [showHeader &&
+        }, tabIndex: -1, onFocus: !isControlled ? handleFocusUncontrolled : undefined, onBlur: !isControlled ? handleBlurUncontrolled : undefined, onClick: handleActivation, onContextMenu: (e) => e.preventDefault(), children: [showHeader &&
                 _jsx(StyledPanelHeader, { "$backgroundColor": backgroundColor, "$color": color, "$isActive": currentIsActive, onDoubleClick: () => {
                         if (onHeaderDoubleClick)
                             onHeaderDoubleClick();

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

@@ -30,11 +30,6 @@ interface ITMUserChooserFormProps extends ITMChooserFormProps<UserDescriptor> {
     allowShowAllUsers?: boolean;
 }
 export declare const TMUserChooserForm: React.FunctionComponent<ITMUserChooserFormProps>;
-export declare const TMUserIdViewer: ({ userId, showIcon, noneSelectionText }: {
-    userId?: number;
-    showIcon?: boolean;
-    noneSelectionText?: string;
-}) => import("react/jsx-runtime").JSX.Element;
 export declare const TMUserIcon: ({ ud }: {
     ud?: UserDescriptor;
 }) => import("react/jsx-runtime").JSX.Element | null;

package/lib/components/choosers/TMUserChooser.js

@@ -1,15 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { OwnershipLevels, SDK_Localizator, UserLevels, UserListCacheService } from '@topconsultnpm/sdk-ts';
-import { SDKUI_Localizator, IconSearch, IconUserLevelMember, IconUserLevelAdministrator, IconUserLevelSystemAdministrator, IconUserLevelAutonomousAdministrator, IconWarning, LocalizeOwnershipLevels, LocalizeUserLevels, IconShowAllUsersOff, IconShowAllUsers } from '../../helper';
-import { StyledDivHorizontal, StyledTooltipContainer, StyledTooltipSeparatorItem } from '../base/Styled';
+import { SDKUI_Localizator, IconSearch, IconUserLevelMember, IconUserLevelAdministrator, IconUserLevelSystemAdministrator, IconUserLevelAutonomousAdministrator, LocalizeOwnershipLevels, LocalizeUserLevels, IconShowAllUsersOff, IconShowAllUsers } from '../../helper';
+import { StyledDivHorizontal } from '../base/Styled';
 import TMSpinner from '../base/TMSpinner';
-import TMTooltip from '../base/TMTooltip';
 import TMSummary from '../editors/TMSummary';
 import TMChooserForm from '../forms/TMChooserForm';
-import { TMColors } from '../../utils/theme';
-import { TMExceptionBoxManager } from '../base/TMPopUp';
 import TMButton from '../base/TMButton';
+import TMDataUserIdItemViewer from '../viewers/TMDataUserIdItemViewer';
 const TMUserChooser = ({ labelColor, titleForm, filter, readOnly = false, icon, width, dataSource, backgroundColor, openChooserBySingleClick, buttons = [], disabled = false, showBorder = true, hideRefresh = false, hideShowId = false, elementStyle, allowMultipleSelection, values, isModifiedWhen, label, placeHolder, validationItems = [], onValueChanged, showClearButton, initialShowChooser = false, allowShowAllUsers = false }) => {
     const [showChooser, setShowChooser] = useState(initialShowChooser);
     useEffect(() => {
@@ -18,7 +16,7 @@ const TMUserChooser = ({ labelColor, titleForm, filter, readOnly = false, icon,
     const summaryInputRef = useRef(null);
     const renderTemplate = () => {
         const isPlaceholder = values?.[0] === placeHolder;
-        return (_jsxs(StyledDivHorizontal, { style: { minWidth: '125px', color: isPlaceholder ? '#a9a9a9' : 'inherit' }, children: [values && values.length > 0 && _jsx(TMUserIdViewer, { userId: values?.[0], showIcon: true, noneSelectionText: '' }), values && values.length > 1 && _jsx("p", { style: { marginLeft: '10px' }, children: `(+${values.length - 1} ${values.length == 2 ? 'altro' : 'altri'})` })] }));
+        return (_jsxs(StyledDivHorizontal, { style: { minWidth: '125px', color: isPlaceholder ? '#a9a9a9' : 'inherit' }, children: [values && values.length > 0 && _jsx(TMDataUserIdItemViewer, { userId: values?.[0], showIcon: true }), values && values.length > 1 && _jsx("p", { style: { marginLeft: '10px' }, children: `(+${values.length - 1} ${values.length == 2 ? 'altro' : 'altri'})` })] }));
     };
     return (_jsxs(_Fragment, { children: [_jsx(TMSummary, { ref: summaryInputRef, width: width, disabled: disabled, placeHolder: placeHolder, readOnly: readOnly, labelColor: labelColor, icon: icon, backgroundColor: backgroundColor, buttons: buttons, showBorder: showBorder, hasValue: values && values.length > 0, showClearButton: showClearButton, iconEditButton: _jsx(IconSearch, { fontSize: 16 }), onEditorClick: () => !readOnly && setShowChooser(true), elementStyle: elementStyle, isModifiedWhen: isModifiedWhen, openEditorOnSummaryClick: openChooserBySingleClick, label: label, template: renderTemplate(), onClearClick: showClearButton ? () => { onValueChanged?.([]); } : undefined, validationItems: validationItems }), showChooser &&
                 _jsx(TMUserChooserForm, { title: titleForm, allowMultipleSelection: allowMultipleSelection, hasShowOnlySelectedItems: true, dataSource: dataSource, filter: filter, selectedIDs: values, hideRefresh: hideRefresh, hideShowId: hideShowId, allowShowAllUsers: allowShowAllUsers, onClose: () => {
@@ -67,40 +65,6 @@ export const TMUserChooserForm = ({ allowMultipleSelection, columns, hideRefresh
     const customButton = (allowShowAllUsers && dataSource) ? (_jsx(TMButton, { btnStyle: 'toolbar', caption: showingAllUsers ? SDKUI_Localizator.HideAll : SDKUI_Localizator.ShowAll, onClick: handleToggleAllUsers, icon: showingAllUsers ? _jsx(IconShowAllUsersOff, {}) : _jsx(IconShowAllUsers, {}) })) : undefined;
     return (_jsx(TMChooserForm, { title: getTitle(), allowMultipleSelection: allowMultipleSelection, startWithShowOnlySelectedItems: startWithShowOnlySelectedItems, hasShowOnlySelectedItems: hasShowOnlySelectedItems, width: width, height: height, manageUseLocalizedName: false, columns: columns ?? dataColumns, showDefaultColumns: false, selectedIDs: selectedIDs, cellRenderIcon: cellRenderIcon, dataSource: currentDataSource, getItems: getItems, hasShowId: !hideShowId, hideRefresh: hideRefresh, customButtons: customButton, onClose: onClose, onChoose: (IDs) => onChoose?.(IDs) }));
 };
-export const TMUserIdViewer = ({ userId, showIcon = false, noneSelectionText = `<${SDKUI_Localizator.NoneSelection}>` }) => {
-    const [ud, setUd] = useState();
-    useEffect(() => {
-        if (!userId || userId <= 0) {
-            setUd(undefined);
-            return;
-        }
-        TMSpinner.show({ description: `${SDKUI_Localizator.Loading} - ${SDK_Localizator.Users} ...` });
-        UserListCacheService.GetAsync(userId).then((ud) => { setUd(ud); TMSpinner.hide(); }).catch((err) => { TMExceptionBoxManager.show({ exception: err }); });
-    }, [userId]);
-    const getIcon = () => {
-        if (!showIcon)
-            return null;
-        if (!userId)
-            return null;
-        return ud ?
-            _jsx(TMUserIcon, { ud: ud })
-            :
-                _jsx(TMTooltip, { content: SDKUI_Localizator.ValueNotPresent, children: _jsx(IconWarning, { color: TMColors.warning }) });
-    };
-    const getDescription = () => {
-        if (!userId)
-            return undefined;
-        return ud ? getCompleteUserName(ud.domain, ud.name) : userId.toString() ?? noneSelectionText;
-    };
-    return (_jsxs("span", { style: { display: 'flex', alignItems: 'center', gap: '4px' }, children: [getIcon(), _jsx("span", { children: getDescription() })] })
-    // <StyledDivHorizontal>
-    //     {getIcon()}
-    //     <p style={{ textAlign: 'left', marginLeft: showIcon ? '5px' : '', opacity: ud ? 1 : 0.5 }}>
-    //         {getDescription()}
-    //     </p>
-    // </StyledDivHorizontal>
-    );
-};
 export const TMUserIcon = ({ ud }) => {
     if (!ud)
         return null;
@@ -109,12 +73,28 @@ export const TMUserIcon = ({ ud }) => {
     return (_jsx(TMUserTooltip, { ud: ud, children: icon }));
 };
 export const TMUserTooltip = ({ ud, children }) => {
-    const renderTooltipContent = (ud) => {
-        let isExpired = User_IsExpired(ud);
-        return (!ud ? null
-            : _jsxs(StyledTooltipContainer, { children: [_jsx("div", { children: `ID: ${ud.id}` }), _jsx("div", { children: `${SDKUI_Localizator.Name}: ${getCompleteUserName(ud.domain, ud.name)}` }), ud.description && _jsx("div", { children: `${SDKUI_Localizator.Description}: ${ud.description}` }), ud.type && _jsxs("div", { children: [SDKUI_Localizator.Type, ": ", ud.type] }), ud.level && _jsxs("div", { children: [SDKUI_Localizator.UserLevel, ": ", LocalizeUserLevels(ud.level)] }), _jsxs("div", { children: [SDKUI_Localizator.Valid, ": ", isExpired ? SDKUI_Localizator.No : SDKUI_Localizator.Yes, " - ", SDKUI_Localizator.Disabled, ": ", ud.disabled ? SDKUI_Localizator.Yes : SDKUI_Localizator.No] }), _jsx(StyledTooltipSeparatorItem, {}), _jsxs("div", { children: [SDKUI_Localizator.OwnerName, ": ", ud.ownerName, " (", ud.ownerID, ")"] }), _jsxs("div", { children: [SDKUI_Localizator.OwnershipLevel, ": ", LocalizeOwnershipLevels(ud.ownershipLevel)] }), _jsxs("div", { children: [SDKUI_Localizator.CreationTime, ": ", ud.creationTime?.toDateString()] }), _jsxs("div", { children: [SDKUI_Localizator.LastUpdateTime, ": ", ud.lastUpdateTime?.toDateString()] })] }));
+    const buildTitle = (ud) => {
+        if (!ud)
+            return '';
+        const isExpired = User_IsExpired(ud);
+        return [
+            `ID: ${ud.id ?? ''}`,
+            `${SDKUI_Localizator.Name}: ${getCompleteUserName(ud.domain, ud.name) ?? ''}`,
+            ud.description && `${SDKUI_Localizator.Description}: ${ud.description}`,
+            ud.type && `${SDKUI_Localizator.Type}: ${ud.type}`,
+            ud.level && `${SDKUI_Localizator.UserLevel}: ${LocalizeUserLevels(ud.level) ?? ''}`,
+            `${SDKUI_Localizator.Valid}: ${isExpired ? SDKUI_Localizator.No : SDKUI_Localizator.Yes}`,
+            `${SDKUI_Localizator.Disabled}: ${ud.disabled ? SDKUI_Localizator.Yes : SDKUI_Localizator.No}`,
+            `---`,
+            `${SDKUI_Localizator.OwnerName}: ${ud.ownerName ?? ''} (${ud.ownerID ?? ''})`,
+            `${SDKUI_Localizator.OwnershipLevel}: ${LocalizeOwnershipLevels(ud.ownershipLevel) ?? ''}`,
+            `${SDKUI_Localizator.CreationTime}: ${ud.creationTime?.toDateString() ?? ''}`,
+            `${SDKUI_Localizator.LastUpdateTime}: ${ud.lastUpdateTime?.toDateString() ?? ''}`
+        ]
+            .filter(Boolean)
+            .join('\n');
     };
-    return (_jsx(TMTooltip, { content: renderTooltipContent(ud), children: children }));
+    return (_jsx("div", { title: buildTitle(ud), children: children }));
 };
 const getCompleteUserName = (domain, name) => {
     if (!name)

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

@@ -65,7 +65,7 @@ export interface TMRelationViewerProps {
     /**
      * Show metadata names before values (default: false).
      * When true, displays "MetadataName: Value", otherwise just "Value".
-     * Value rendering respects DataDomain (uses TMDataListItemViewer for lists, TMUserIdViewer for users, etc.)
+     * Value rendering respects DataDomain (uses TMDataListItemViewer for lists, TMDataUserIdItemViewer for users, etc.)
      */
     showMetadataNames?: boolean;
     /** Maximum depth level for recursive loading (default: 2) */

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

@@ -6,9 +6,9 @@ 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';
+import TMDataUserIdItemViewer from '../../viewers/TMDataUserIdItemViewer';
 /**
  * Check if document type has detail relations
  */
@@ -685,7 +685,7 @@ const TMRelationViewer = ({ inputDcmts, isForMaster = false, showCurrentDcmtIndi
                         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: {
+                    }, 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(TMDataUserIdItemViewer, { userId: value, showIcon: true })) : (_jsx("span", { style: {
                                 fontWeight: 500,
                                 overflow: isLast ? 'hidden' : 'visible',
                                 textOverflow: isLast ? 'ellipsis' : 'clip',

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

@@ -16,9 +16,7 @@ import { useDeviceType, DeviceType } from '../../base/TMDeviceProvider';
 import { TMSplitterLayout, TMLayoutItem } from '../../base/TMLayout';
 import { TMMessageBoxManager, ButtonNames, TMExceptionBoxManager } from '../../base/TMPopUp';
 import { TMLayoutWaitingContainer } from '../../base/TMWaitPanel';
-import { TMUserIdViewer } from '../../choosers/TMUserChooser';
 import TMMetadataValues from '../../editors/TMMetadataValues';
-import TMDataListItemViewer from '../../viewers/TMDataListItemViewer';
 import TMTidViewer from '../../viewers/TMTidViewer';
 import TMDcmtPreview from '../documents/TMDcmtPreview';
 import TMFloatingMenuBar from '../../NewComponents/FloatingMenuBar/TMFloatingMenuBar';
@@ -48,6 +46,8 @@ import TMViewHistoryDcmt from './TMViewHistoryDcmt';
 import TMBlogCommentForm from '../blog/TMBlogCommentForm';
 import { useCheckInOutOperations } from '../../../hooks/useCheckInOutOperations';
 import TMDcmtCheckoutInfoForm from './TMDcmtCheckoutInfoForm';
+import { useDataListItem } from '../../../hooks/useDataListItem';
+import { useDataUserIdItem } from '../../../hooks/useDataUserIdItem';
 let abortControllerLocal = new AbortController();
 //#region Helper Methods
 export const getSearchResultCountersSingleCategory = (searchResults) => {
@@ -593,7 +593,7 @@ const TMSearchResult = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallback, a
         currentTIDHasDetailRelations, canArchiveMasterRelation, canArchiveDetailRelation,
         hasManyToManyRelation, customButtonsLayout
     ]);
-    const searchResutlToolbar = _jsxs(_Fragment, { children: [(dcmtsReturned != dcmtsFound) && _jsx("p", { style: { backgroundColor: `white`, color: TMColors.primaryColor, textAlign: 'center', padding: '1px 4px', borderRadius: '3px', display: 'flex' }, children: `${dcmtsReturned}/${dcmtsFound} restituiti` }), context === SearchResultContext.FAVORITES_AND_RECENTS &&
+    const searchResutlToolbar = _jsxs(_Fragment, { children: [(dcmtsReturned != dcmtsFound) && _jsx("p", { style: { textAlign: 'center', padding: '1px 4px', borderRadius: '3px', display: 'flex' }, children: `${dcmtsReturned}/${dcmtsFound} restituiti` }), context === SearchResultContext.FAVORITES_AND_RECENTS &&
                 _jsx("div", { style: { display: 'flex', alignItems: 'center', gap: '5px' }, children: _jsx(TMButton, { btnStyle: 'icon', icon: _jsx(IconDelete, { color: 'white' }), caption: "Rimuovi da " + (selectedSearchResult?.category === "Favorites" ? '"Preferiti"' : '"Recenti"'), disabled: getSelectedDcmtsOrFocused(selectedItems, focusedItem).length <= 0, onClick: removeDcmtFromFavsOrRecents }) }), _jsx(TMButton, { btnStyle: 'icon', icon: _jsx(IconRefresh, { color: 'white' }), caption: SDKUI_Localizator.Refresh, onClick: onRefreshSearchAsync }), _jsx(TMContextMenu, { items: floatingMenuItems, trigger: "left", children: _jsx(IconMenuVertical, { color: 'white', cursor: 'pointer' }) })] });
     const tmSearchResult = useMemo(() => (!searchResults || searchResults.length <= 0)
         ? _jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', width: '100%' }, children: [_jsx(IconBoard, { fontSize: 96 }), _jsx("div", { style: { fontSize: "15px", marginTop: "10px" }, children: SDKUI_Localizator.NoDcmtFound }), openAddDocumentForm && _jsx("div", { style: { marginTop: "10px" }, children: _jsx(TMButton, { fontSize: "15px", icon: _jsx("i", { className: 'dx-icon-share' }), caption: SDKUI_Localizator.Share, onClick: openAddDocumentForm }) })] })
@@ -805,6 +805,8 @@ const TMSearchResultGrid = ({ openInOffice, fromDTD, allUsers, inputFocusedItem,
     const [selectedRowKeys, setSelectedRowKeys] = useState([]);
     const [focusedItem, setFocusedItem] = useState();
     const [visibleItems, setVisibleItems] = useState([]);
+    const { loadDataListsAsync, renderDataListCell } = useDataListItem();
+    const { loadUsersAsync, renderUserIdViewer } = useDataUserIdItem();
     useEffect(() => {
         if (deepCompare(inputFocusedItem, focusedItem))
             return;
@@ -894,10 +896,10 @@ const TMSearchResultGrid = ({ openInOffice, fromDTD, allUsers, inputFocusedItem,
         }
         let child = _jsx("div", { children: cellData.text });
         if (dataDomain === MetadataDataDomains.DataList) {
-            child = _jsx(TMDataListItemViewer, { dataListId: dataListID, viewMode: dataListViewMode, value: cellData.value });
+            child = renderDataListCell(cellData.value, dataListID, dataListViewMode);
         }
         if (dataDomain === MetadataDataDomains.UserID) {
-            child = _jsx(TMUserIdViewer, { userId: cellData.value, showIcon: true, noneSelectionText: '' });
+            child = renderUserIdViewer(cellData.value, true);
         }
         return (_jsxs("div", { style: style, children: [shouldShowCheckoutIcon && checkoutStatus.icon, child] }));
     }, [fromDTD, allUsers]);
@@ -953,29 +955,55 @@ const TMSearchResultGrid = ({ openInOffice, fromDTD, allUsers, inputFocusedItem,
     useEffect(() => {
         if (fromDTD === undefined || searchResult === undefined)
             return;
-        setFocusedItem(undefined); // resetta sempre prima
-        let cols = [];
-        // Generate unique keys for all columns
-        const uniqueKeys = generateUniqueColumnKeys(searchResult?.dtdResult?.columns, searchResult?.fromTID);
-        searchResult?.dtdResult?.columns?.map((col, index) => {
-            const isVisible = col.extendedProperties?.["Visibility"] != "Hidden";
-            const dataDomain = MetadataDataDomains[(col.extendedProperties?.["DataDomain"] ?? "None")];
-            const dataListID = Number(col.extendedProperties?.["DataListID"]);
-            const dataListViewMode = DataListViewModes[(col.extendedProperties?.["DataListViewMode"] ?? "None")];
-            cols.push({
-                dataField: uniqueKeys[index],
-                dataType: dataType(col),
-                visible: isVisible,
-                cellRender: (cellData) => cellRender(cellData, dataDomain, dataListID, dataListViewMode),
-                caption: col.caption,
-                format: getDisplayFormat(col),
+        const loadColumnsAndData = async () => {
+            setFocusedItem(undefined); // resetta sempre prima
+            let cols = [];
+            // Generate unique keys for all columns
+            const uniqueKeys = generateUniqueColumnKeys(searchResult?.dtdResult?.columns, searchResult?.fromTID);
+            const dataListIDs = new Set();
+            const userIDs = new Set();
+            searchResult?.dtdResult?.columns?.forEach((col) => {
+                const dataDomain = MetadataDataDomains[(col.extendedProperties?.["DataDomain"] ?? "None")];
+                const dataListID = Number(col.extendedProperties?.["DataListID"]);
+                if (dataDomain === MetadataDataDomains.DataList && dataListID) {
+                    dataListIDs.add(dataListID);
+                }
             });
-        });
-        setColumns(cols);
-        let newDataSource = searchResultDescriptorToSimpleArray(searchResult);
-        setDataSource(newDataSource);
-        // setFocusedItem(newDataSource && newDataSource.length > 0 ? newDataSource[0] : undefined);
-    }, [searchResult, fromDTD, allUsers]);
+            await loadDataListsAsync(dataListIDs);
+            // Carica gli UserID dalle righe
+            searchResult?.dtdResult?.rows?.forEach((row) => {
+                searchResult?.dtdResult?.columns?.forEach((col, colIndex) => {
+                    const dataDomain = MetadataDataDomains[(col.extendedProperties?.["DataDomain"] ?? "None")];
+                    if (dataDomain === MetadataDataDomains.UserID) {
+                        const userId = Number(row[colIndex]);
+                        if (userId && userId > 0) {
+                            userIDs.add(userId);
+                        }
+                    }
+                });
+            });
+            await loadUsersAsync(userIDs);
+            searchResult?.dtdResult?.columns?.map((col, index) => {
+                const isVisible = col.extendedProperties?.["Visibility"] != "Hidden";
+                const dataDomain = MetadataDataDomains[(col.extendedProperties?.["DataDomain"] ?? "None")];
+                const dataListID = Number(col.extendedProperties?.["DataListID"]);
+                const dataListViewMode = DataListViewModes[(col.extendedProperties?.["DataListViewMode"] ?? "None")];
+                cols.push({
+                    dataField: uniqueKeys[index],
+                    dataType: dataType(col),
+                    visible: isVisible,
+                    cellRender: (cellData) => cellRender(cellData, dataDomain, dataListID, dataListViewMode),
+                    caption: col.caption,
+                    format: getDisplayFormat(col),
+                });
+            });
+            setColumns(cols);
+            let newDataSource = searchResultDescriptorToSimpleArray(searchResult);
+            setDataSource(newDataSource);
+            // setFocusedItem(newDataSource && newDataSource.length > 0 ? newDataSource[0] : undefined);
+        };
+        loadColumnsAndData();
+    }, [searchResult, fromDTD, allUsers, loadDataListsAsync]);
     useEffect(() => {
         let newDataSource = searchResultDescriptorToSimpleArray(searchResult);
         setDataSource(newDataSource);
@@ -1047,7 +1075,7 @@ const TMSearchResultGrid = ({ openInOffice, fromDTD, allUsers, inputFocusedItem,
         setVisibleItems(visibleRows.map((row) => { return row.data; }));
     }, []);
     useEffect(() => { onVisibleItemChanged?.(visibleItems); }, [visibleItems]);
-    return _jsxs("div", { style: { width: "100%", height: "100%" }, children: [_jsx(TMDataGrid, { id: "tm-search-result", keyExpr: "rowIndex", dataColumns: dataColumns, dataSource: dataSource, repaintChangesOnly: true, selectedRowKeys: selectedRowKeys, focusedRowKey: Number(focusedItem?.rowIndex ?? 0), showSearchPanel: showSearch, showFilterPanel: true, sorting: { mode: "multiple" }, selection: { mode: allowMultipleSelection ? 'multiple' : 'single' }, pageSize: TMDataGridPageSize.Small, onSelectionChanged: handleSelectionChange, onFocusedRowChanged: handleFocusedRowChange, onRowDblClick: onRowDblClick, onContentReady: onContentReady, showHeaderColumnChooser: true, onKeyDown: onKeyDown, customContextMenuItems: floatingMenuItems, counterConfig: { show: true } }), (showExportForm && searchResult && onCloseExportForm) && _jsx(TMDataGridExportForm, { dataColumns: dataColumns, dataSource: dataSource, selectedRowKeys: selectedRowKeys, onCloseExportForm: onCloseExportForm, searchResult: searchResult })] });
+    return _jsxs("div", { style: { width: "100%", height: "100%" }, children: [_jsx(TMDataGrid, { id: "tm-search-result", keyExpr: "rowIndex", dataColumns: dataColumns, dataSource: dataSource, repaintChangesOnly: true, selectedRowKeys: selectedRowKeys, focusedRowKey: Number(focusedItem?.rowIndex ?? 0), showSearchPanel: showSearch, showFilterPanel: true, sorting: { mode: "multiple" }, selection: { mode: allowMultipleSelection ? 'multiple' : 'single' }, pageSize: TMDataGridPageSize.Large, onSelectionChanged: handleSelectionChange, onFocusedRowChanged: handleFocusedRowChange, onRowDblClick: onRowDblClick, onContentReady: onContentReady, showHeaderColumnChooser: true, onKeyDown: onKeyDown, customContextMenuItems: floatingMenuItems, counterConfig: { show: true } }), (showExportForm && searchResult && onCloseExportForm) && _jsx(TMDataGridExportForm, { dataColumns: dataColumns, dataSource: dataSource, selectedRowKeys: selectedRowKeys, onCloseExportForm: onCloseExportForm, searchResult: searchResult })] });
 };
 //#region TMSearchResultSelector
 const StyledItemTemplate = styled.div ` 

package/lib/components/features/workflow/diagram/RecipientList.js

@@ -3,7 +3,7 @@ import { useCallback, useEffect, useState } from 'react';
 import styled from 'styled-components';
 import TMButton from '../../../base/TMButton';
 import { IconAdd, IconDelete, SDKUI_Localizator } from '../../../../helper';
-import { TMUserChooserForm, TMUserIdViewer } from '../../../choosers/TMUserChooser';
+import { TMUserChooserForm } from '../../../choosers/TMUserChooser';
 import { TMGroupChooserForm, TMGroupIdViewer } from '../../../choosers/TMGroupChooser';
 import { TMMidViewer } from '../../../viewers/TMMidViewer';
 import { SDK_Globals, SDK_Localizator } from '@topconsultnpm/sdk-ts';
@@ -13,6 +13,7 @@ import { TMMessageBoxManager, ButtonNames } from '../../../base/TMPopUp';
 import TMModal from '../../../base/TMModal';
 import { TMMetadataChooserForm } from '../../../choosers/TMMetadataChooser';
 import TMQueryEditor from '../../../query/TMQueryEditor';
+import TMDataUserIdItemViewer from '../../../viewers/TMDataUserIdItemViewer';
 export var WorkItemActorTypes;
 (function (WorkItemActorTypes) {
     WorkItemActorTypes[WorkItemActorTypes["None"] = 0] = "None";
@@ -168,7 +169,7 @@ const RecipientList = ({ recipients, title, tid, qd, onAdd, onRemove, onQDChange
         const actorId = parseInt(recipient.ActorID, 10);
         switch (recipient.ActorType) {
             case WorkItemActorTypes.UID:
-                return _jsx(TMUserIdViewer, { userId: actorId, showIcon: true });
+                return _jsx(TMDataUserIdItemViewer, { userId: actorId, showIcon: true });
             case WorkItemActorTypes.GID:
                 return _jsx(TMGroupIdViewer, { groupID: actorId, showIcon: true });
             case WorkItemActorTypes.MID:

package/lib/components/grids/TMRecentsManager.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import styled from 'styled-components';
 import { useCallback, useEffect, useState } from 'react';
-import ReactDOMServer from 'react-dom/server';
 import { DcmtTypeListCacheService } from '@topconsultnpm/sdk-ts';
-import ContextMenu from 'devextreme-react/context-menu';
+import { ContextMenu as TMContextMenu } from '../NewComponents/ContextMenu';
 import { IconDelete, SDKUI_Localizator, IconApply, IconInfo, IconCloseOutline } from '../../helper';
 import { TMColors } from '../../utils/theme';
 import { DeviceType } from '../base/TMDeviceProvider';
@@ -62,11 +61,15 @@ const StyledRecentTidItem = styled.div `
         margin-bottom: 0;
     }
 `;
-const iconDelete = () => ReactDOMServer.renderToString(_jsx(IconDelete, {}));
 const TMRecentsManager = ({ deviceType, mruTIDs, currentMruTID, accessFilter = 'all', onSelectedTID, onDeletedTID }) => {
     const [showDcmtTypeChooser, setShowDcmtTypeChooser] = useState(false);
     const [recentDcmtTypes, setRecentDcmtTypes] = useState([]);
     const [infoDTD, setInfoDTD] = useState();
+    const [contextMenuState, setContextMenuState] = useState({
+        visible: false,
+        position: { x: 0, y: 0 },
+        tid: null
+    });
     // Handler for the cache refresh event
     const handleCacheRefresh = useCallback(async () => {
         // Retrieve all document types without metadata from the refreshed cache
@@ -114,7 +117,10 @@ const TMRecentsManager = ({ deviceType, mruTIDs, currentMruTID, accessFilter = '
                                     textOverflow: 'ellipsis'
                                 }, children: `${SDKUI_Localizator.AllDcmtTypes} (${DcmtTypeListCacheService.CacheCount(true, accessFilter)})` }) }) }, 0), recentDcmtTypes.map((dtd) => {
                         const isCurrent = currentMruTID == dtd.id;
-                        return (_jsxs(StyledRecentTidItem, { id: `tid-${dtd.id}`, "$isMobile": isMobile, onClick: () => { onSelectedTID?.(dtd.id ?? 0); }, children: [_jsxs(StyledDivHorizontal, { style: { alignItems: 'center', gap: 8, width: '100%' }, children: [!isMobile && (_jsx("span", { className: "info-icon", style: {
+                        return (_jsxs(StyledRecentTidItem, { id: `tid-${dtd.id}`, "$isMobile": isMobile, onClick: () => { onSelectedTID?.(dtd.id ?? 0); }, onContextMenu: (e) => {
+                                e.preventDefault();
+                                setContextMenuState({ visible: true, position: { x: e.clientX, y: e.clientY }, tid: dtd.id ?? null });
+                            }, children: [_jsxs(StyledDivHorizontal, { style: { alignItems: 'center', gap: 8, width: '100%' }, children: [!isMobile && (_jsx("span", { className: "info-icon", style: {
                                                 marginRight: 4,
                                                 display: 'flex',
                                                 alignItems: 'center'
@@ -135,20 +141,24 @@ const TMRecentsManager = ({ deviceType, mruTIDs, currentMruTID, accessFilter = '
                                                 fontWeight: 'bold',
                                                 marginLeft: 8,
                                                 visibility: isCurrent ? 'visible' : 'hidden'
-                                            }, children: _jsx(IconApply, { fontSize: 24, color: 'green' }) })] }), _jsx(ContextMenu, { dataSource: [
+                                            }, children: _jsx(IconApply, { fontSize: 24, color: 'green' }) })] }), contextMenuState.tid === dtd.id && (_jsx(TMContextMenu, { items: [
                                         {
-                                            text: SDKUI_Localizator.Remove,
-                                            icon: iconDelete(),
+                                            name: SDKUI_Localizator.Remove,
+                                            icon: _jsx(IconDelete, {}),
                                             onClick: () => { onDeletedTID?.(dtd.id ?? 0); }
                                         },
                                         ...(isMobile ? [
                                             {
-                                                text: SDKUI_Localizator.About,
-                                                icon: ReactDOMServer.renderToString(_jsx(IconInfo, { color: TMColors.info })),
+                                                name: SDKUI_Localizator.About,
+                                                icon: _jsx(IconInfo, { color: TMColors.info }),
                                                 onClick: () => { setInfoDTD(dtd); }
                                             }
                                         ] : [])
-                                    ], target: `#tid-${dtd.id}` })] }, dtd.id));
+                                    ], target: `#tid-${dtd.id}`, externalControl: {
+                                        visible: contextMenuState.visible,
+                                        position: contextMenuState.position,
+                                        onClose: () => setContextMenuState({ visible: false, position: { x: 0, y: 0 }, tid: null })
+                                    } }))] }, dtd.id));
                     })] }), showDcmtTypeChooser &&
                 _jsx(TMDcmtTypeChooserForm, { accessFilter: accessFilter, onClose: () => setShowDcmtTypeChooser(false), onChoose: (tids) => { onSelectedTID?.(tids?.[0] ?? 0); } }), _jsxs(StyledOffCanvasPanel, { ref: panelRef, "$isOpen": isMobile && infoDTD !== undefined, children: [_jsxs(StyledDivHorizontal, { style: { gap: 10, padding: '10px 8px', width: '100%', alignItems: 'center' }, children: [_jsx("p", { style: { fontSize: '1.1rem', fontWeight: 'bold' }, children: `${SDKUI_Localizator.DcmtType} - ${SDKUI_Localizator.About}` }), _jsx(IconCloseOutline, { style: { marginLeft: 'auto', cursor: 'pointer' }, onClick: () => setInfoDTD(undefined) })] }), renderDTDTooltipContent(infoDTD)] })] }));
 };

package/lib/components/index.d.ts

@@ -16,6 +16,7 @@ export * from './base/TMTreeView';
 export * from './base/TMPanel';
 export * from './base/TMResizableMenu';
 export * from './base/TMAccordionNew';
+export * from './NewComponents/ContextMenu';
 export { default as CounterBar } from './base/TMCounterBar';
 export { default as TMProgressBar } from './base/TMProgressBar';
 export { default as TMSpinner } from './base/TMSpinner';
@@ -92,6 +93,7 @@ export { default as SettingsAppearance } from "./settings/SettingsAppearance";
 export * from "./viewers/TMTidViewer";
 export * from "./viewers/TMMidViewer";
 export * from "./viewers/TMDataListItemViewer";
+export * from "./viewers/TMDataUserIdItemViewer";
 export * from "./base/TMDeviceProvider";
 export { default as TMDataGrid } from "./base/TMDataGrid";
 export { default as TMFileManager } from "./base/TMFileManager";

package/lib/components/index.js

@@ -17,6 +17,7 @@ export * from './base/TMTreeView';
 export * from './base/TMPanel';
 export * from './base/TMResizableMenu';
 export * from './base/TMAccordionNew';
+export * from './NewComponents/ContextMenu';
 export { default as CounterBar } from './base/TMCounterBar';
 export { default as TMProgressBar } from './base/TMProgressBar';
 export { default as TMSpinner } from './base/TMSpinner';
@@ -110,6 +111,7 @@ export { default as SettingsAppearance } from "./settings/SettingsAppearance";
 export * from "./viewers/TMTidViewer";
 export * from "./viewers/TMMidViewer";
 export * from "./viewers/TMDataListItemViewer";
+export * from "./viewers/TMDataUserIdItemViewer";
 //TMDeviceProvider
 export * from "./base/TMDeviceProvider";
 export { default as TMDataGrid } from "./base/TMDataGrid";

package/lib/components/viewers/TMDataListItemViewer.d.ts

@@ -6,6 +6,6 @@ interface ITMDataListItemViewerProps {
     viewMode?: DataListViewModes;
     showTooltip?: boolean;
 }
-declare const TMDataListItemViewer: ({ dataListId, value, viewMode, showTooltip }: ITMDataListItemViewerProps) => import("react/jsx-runtime").JSX.Element;
+declare const TMDataListItemViewer: ({ dataListId, value, viewMode, showTooltip }: ITMDataListItemViewerProps) => import("react/jsx-runtime").JSX.Element | null;
 export default TMDataListItemViewer;
 export declare const cellRenderDataListItem: (data: DataGridTypes.ColumnCellTemplateData, dataListId?: number, viewMode?: DataListViewModes) => import("react/jsx-runtime").JSX.Element;

package/lib/components/viewers/TMDataListItemViewer.js

@@ -1,78 +1,41 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
-import { DataListCacheService, DataListViewModes } from '@topconsultnpm/sdk-ts';
-import { IconWarning, SDKUI_Localizator, TMImageLibrary } from '../../helper';
-import { StyledDivHorizontal } from '../base/Styled';
+import { DataListViewModes } from '@topconsultnpm/sdk-ts';
+import { SDKUI_Localizator } from '../../helper';
 import TMTooltip from '../base/TMTooltip';
-import { TMColors } from '../../utils/theme';
 import { TMExceptionBoxManager } from '../base/TMPopUp';
-import { FormulaHelper } from '../editors/TMFormulaEditor';
+import { useDataListItem } from '../../hooks/useDataListItem';
 const TMDataListItemViewer = ({ dataListId, value, viewMode = DataListViewModes.ImageAndDescription, showTooltip = true }) => {
-    const [dataListItem, setDataListItem] = useState();
+    const { loadDataListsAsync, getDataListItem, renderDataListCell, convertToDataListValue } = useDataListItem();
+    const [dataListItem, setDataListItem] = useState(undefined);
     useEffect(() => {
-        if (!dataListId || value === undefined || value === null) {
-            setDataListItem(undefined);
-            return;
-        }
-        let stringValue;
-        if (value instanceof Date) {
-            stringValue = value.toISOString();
-        }
-        else if (typeof value === 'number') {
-            stringValue = value.toString();
-        }
-        else {
-            stringValue = value;
-        }
-        DataListCacheService.GetAsync(dataListId).then((dl) => { setDataListItem(dl?.items?.find(o => o.value == stringValue)); }).catch((err) => { TMExceptionBoxManager.show({ exception: err }); });
-    }, [dataListId, value]);
-    let showIcon = viewMode != DataListViewModes.Description;
-    const getIcon = () => {
-        if (!showIcon)
-            return null;
-        if (value === undefined || value === null)
-            return null;
-        let stringValue;
-        if (value instanceof Date) {
-            stringValue = value.toISOString();
-        }
-        else if (typeof value === 'number') {
-            stringValue = value.toString();
-        }
-        else {
-            stringValue = value;
-        }
-        if (FormulaHelper.isFormula(stringValue))
-            return null;
-        return dataListItem ? _jsx(TMImageLibrary, { imageID: dataListItem.imageID }) : _jsx(IconWarning, { color: TMColors.warning });
-    };
-    const getDescription = () => {
-        if (!dataListId)
-            return undefined;
-        if (value === undefined || value === null)
-            return undefined;
-        let displayValue;
-        if (value instanceof Date) {
-            displayValue = value.toLocaleDateString();
-        }
-        else if (typeof value === 'number') {
-            displayValue = value.toString();
-        }
-        else {
-            displayValue = value;
-        }
-        return dataListItem ? dataListItem.name : displayValue;
-    };
-    const content = (_jsxs(StyledDivHorizontal, { style: { width: '100%' }, children: [getIcon(), _jsx("p", { style: {
-                    textAlign: 'left',
-                    marginLeft: showIcon ? '5px' : '',
-                    opacity: dataListItem ? 1 : 0.5,
-                    whiteSpace: 'nowrap',
-                    overflow: 'hidden',
-                    textOverflow: 'ellipsis',
-                    flexGrow: 1,
-                    minWidth: 0
-                }, children: getDescription() })] }));
+        const loadData = async () => {
+            if (dataListId) {
+                try {
+                    await loadDataListsAsync(new Set([dataListId]));
+                    if (value !== undefined && value !== null) {
+                        const stringValue = convertToDataListValue(value);
+                        const item = getDataListItem(dataListId, stringValue);
+                        setDataListItem(item);
+                    }
+                    else {
+                        setDataListItem(undefined);
+                    }
+                }
+                catch (err) {
+                    TMExceptionBoxManager.show({ exception: err });
+                }
+            }
+            else {
+                setDataListItem(undefined);
+            }
+        };
+        loadData();
+    }, [dataListId, value, loadDataListsAsync, getDataListItem, convertToDataListValue]);
+    if (!dataListId || value === undefined || value === null) {
+        return null;
+    }
+    const content = renderDataListCell(value, dataListId, viewMode);
     return showTooltip ? (_jsx(TMTooltip, { content: dataListItem ? dataListItem.value : SDKUI_Localizator.ValueNotPresent, parentStyle: { width: '100%' }, childStyle: { width: '100%' }, children: content })) : content;
 };
 export default TMDataListItemViewer;

package/lib/components/viewers/TMDataUserIdItemViewer.d.ts

@@ -0,0 +1,8 @@
+import { DataGridTypes } from 'devextreme-react/data-grid';
+interface ITMDataUserIdItemViewerProps {
+    userId?: number;
+    showIcon?: boolean;
+}
+declare const TMDataUserIdItemViewer: ({ userId, showIcon }: ITMDataUserIdItemViewerProps) => import("react/jsx-runtime").JSX.Element | null;
+export default TMDataUserIdItemViewer;
+export declare const cellRenderUserIdItem: (data: DataGridTypes.ColumnCellTemplateData, showIcon?: boolean) => import("react/jsx-runtime").JSX.Element;

package/lib/components/viewers/TMDataUserIdItemViewer.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { IconWarning, SDKUI_Localizator } from '../../helper';
+import TMTooltip from '../base/TMTooltip';
+import { TMExceptionBoxManager } from '../base/TMPopUp';
+import { useDataUserIdItem } from '../../hooks/useDataUserIdItem';
+import { TMColors } from '../../utils/theme';
+const TMDataUserIdItemViewer = ({ userId, showIcon = false }) => {
+    const { loadUsersAsync, getUserItem, renderUserIdViewer } = useDataUserIdItem();
+    const [userItem, setUserItem] = useState(undefined);
+    useEffect(() => {
+        const loadData = async () => {
+            if (userId && userId > 0) {
+                try {
+                    await loadUsersAsync(new Set([userId]));
+                    const item = getUserItem(userId);
+                    setUserItem(item);
+                }
+                catch (err) {
+                    TMExceptionBoxManager.show({ exception: err });
+                }
+            }
+            else {
+                setUserItem(undefined);
+            }
+        };
+        loadData();
+    }, [userId, loadUsersAsync, getUserItem]);
+    if (!userId || userId <= 0) {
+        return null;
+    }
+    const content = renderUserIdViewer(userId, showIcon);
+    return userItem ? content :
+        _jsx(TMTooltip, { content: SDKUI_Localizator.ValueNotPresent, children: _jsx(IconWarning, { color: TMColors.warning }) });
+};
+export default TMDataUserIdItemViewer;
+export const cellRenderUserIdItem = (data, showIcon) => {
+    return (_jsx(TMDataUserIdItemViewer, { userId: data.value, showIcon: showIcon }));
+};

package/lib/helper/TMPdfViewer.js

@@ -75,16 +75,21 @@ const TMPdfViewer = (props) => {
     const observerRef = useRef(null);
     useEffect(() => {
         const checkIsMobile = () => {
-            const userAgent = navigator.userAgent || navigator.vendor || window.opera;
-            // Detect actual mobile/tablet devices
-            const isMobileDevice = 
-            // User agent detection (phones and tablets)
-            /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(userAgent) ||
-                // Media query for touch devices with coarse pointer (more reliable than screen width)
-                (window.matchMedia?.('(hover: none) and (pointer: coarse)').matches ?? false) ||
-                // Touch-capable devices excluding desktop OS
-                (navigator.maxTouchPoints > 1 && !/Win|Mac|Linux x86_64/i.test(userAgent));
-            setIsMobile(isMobileDevice);
+            try {
+                const userAgent = navigator.userAgent || window.opera;
+                // Detect actual mobile/tablet devices
+                const isMobileDevice = 
+                // User agent detection (phones and tablets)
+                /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(userAgent) ||
+                    // Media query for touch devices with coarse pointer (more reliable than screen width)
+                    (window.matchMedia?.('(hover: none) and (pointer: coarse)').matches ?? false) ||
+                    // Touch-capable devices excluding desktop OS
+                    (navigator.maxTouchPoints > 1 && !/Win|Mac|Linux x86_64/i.test(userAgent));
+                setIsMobile(isMobileDevice);
+            }
+            catch (error) {
+                setIsMobile(false);
+            }
         };
         const checkPdfForJavaScript = async () => {
             setIsCheckingPdf(true);

package/lib/hooks/useDataListItem.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { DataListItemDescriptor, DataListViewModes } from '@topconsultnpm/sdk-ts';
+export declare const useDataListItem: () => {
+    loadDataListsAsync: (dataListIDs: Set<number>) => Promise<void>;
+    getDataListItem: (dataListID: number, value: string | number | Date) => DataListItemDescriptor | undefined;
+    clearCache: () => void;
+    hasDataList: (dataListID: number) => boolean;
+    renderDataListCell: (value: string | Date | number | undefined, dataListID: number, dataListViewMode: DataListViewModes) => React.ReactElement;
+    dataListsCache: React.MutableRefObject<Map<number, DataListItemDescriptor[]>>;
+    convertToDataListValue: (value: string | Date | number | undefined) => string;
+    convertToDataListDisplayValue: (value: string | Date | number | undefined) => string;
+};

package/lib/hooks/useDataListItem.js

@@ -0,0 +1,131 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useCallback } from 'react';
+import { DataListCacheService, DataListViewModes } from '@topconsultnpm/sdk-ts';
+import { IconWarning, SDKUI_Localizator, TMImageLibrary } from '../helper';
+import { FormulaHelper, StyledDivHorizontal } from '../components';
+import { TMColors } from '../utils/theme';
+export const useDataListItem = () => {
+    const dataListsCacheRef = useRef(new Map());
+    /**
+     * Converte un valore in formato stringa per DataList
+     * @param value Valore da convertire
+     * @returns Stringa rappresentante il valore
+     */
+    const convertToDataListValue = useCallback((value) => {
+        if (value instanceof Date) {
+            return value.toISOString();
+        }
+        else if (typeof value === 'number') {
+            return value.toString();
+        }
+        else {
+            return value ?? '';
+        }
+    }, []);
+    /**
+     * Converte un valore in formato stringa per visualizzazione in DataList
+     * @param value Valore da convertire
+     * @returns Stringa formattata per visualizzazione
+     */
+    const convertToDataListDisplayValue = useCallback((value) => {
+        if (value instanceof Date) {
+            return value.toLocaleDateString();
+        }
+        else if (typeof value === 'number') {
+            return value.toString();
+        }
+        else {
+            return value ?? '';
+        }
+    }, []);
+    /**
+     * Carica tutte le DataList necessarie in parallelo e popola la cache
+     * @param dataListIDs Set di ID delle DataList da caricare
+     * @returns Promise che si risolve quando tutte le DataList sono state caricate
+     */
+    const loadDataListsAsync = useCallback(async (dataListIDs) => {
+        if (dataListIDs.size === 0)
+            return;
+        try {
+            const results = await Promise.all(Array.from(dataListIDs).map(id => DataListCacheService.GetAsync(id).then(dl => ({
+                id,
+                items: dl?.items ?? []
+            }))));
+            const newCache = new Map();
+            results.forEach(({ id, items }) => newCache.set(id, items));
+            dataListsCacheRef.current = newCache;
+        }
+        catch (err) {
+            console.error('Error loading DataLists:', err);
+            dataListsCacheRef.current = new Map();
+        }
+    }, []);
+    /**
+     * Recupera un item dalla cache della DataList
+     * @param dataListID ID della DataList
+     * @param value Valore dell'item da cercare
+     * @returns DataListItemDescriptor se trovato, undefined altrimenti
+     */
+    const getDataListItem = useCallback((dataListID, value) => {
+        const stringValue = convertToDataListValue(value);
+        const dataListItems = dataListsCacheRef.current.get(dataListID);
+        return dataListItems?.find(o => o.value == stringValue);
+    }, []);
+    /**
+     * Svuota completamente la cache
+     */
+    const clearCache = useCallback(() => {
+        dataListsCacheRef.current = new Map();
+    }, []);
+    /**
+     * Verifica se una DataList è presente nella cache
+     * @param dataListID ID della DataList
+     * @returns true se la DataList è in cache, false altrimenti
+     */
+    const hasDataList = useCallback((dataListID) => {
+        return dataListsCacheRef.current.has(dataListID);
+    }, []);
+    /**
+     * Renderizza una cella DataList con icona e testo formattato
+     * @param value Valore della cella
+     * @param dataListID ID della DataList
+     * @param dataListViewMode Modalità di visualizzazione della DataList
+     * @returns Elemento React per la cella DataList
+     */
+    const renderDataListCell = useCallback((value, dataListID, dataListViewMode) => {
+        const stringValue = convertToDataListValue(value);
+        const showIcon = dataListViewMode !== DataListViewModes.Description;
+        const dataListItem = getDataListItem(dataListID, stringValue);
+        const getIcon = () => {
+            if (!showIcon)
+                return null;
+            if (value === undefined || value === null)
+                return null;
+            if (FormulaHelper.isFormula(stringValue))
+                return null;
+            return dataListItem
+                ? _jsx(TMImageLibrary, { imageID: dataListItem.imageID })
+                : _jsx(IconWarning, { color: TMColors.warning });
+        };
+        return (_jsxs(StyledDivHorizontal, { style: { width: '100%' }, title: dataListItem ? dataListItem.value : SDKUI_Localizator.ValueNotPresent, children: [getIcon(), _jsx("p", { style: {
+                        textAlign: 'left',
+                        marginLeft: showIcon ? '5px' : '',
+                        opacity: dataListItem ? 1 : 0.5,
+                        whiteSpace: 'nowrap',
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        flexGrow: 1,
+                        minWidth: 0
+                    }, children: dataListItem ? dataListItem.name : convertToDataListDisplayValue(value) })] }));
+    }, [getDataListItem]);
+    return {
+        loadDataListsAsync,
+        getDataListItem,
+        clearCache,
+        hasDataList,
+        renderDataListCell,
+        dataListsCache: dataListsCacheRef,
+        convertToDataListValue,
+        convertToDataListDisplayValue
+    };
+};

package/lib/hooks/useDataUserIdItem.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { UserDescriptor } from '@topconsultnpm/sdk-ts';
+export declare const useDataUserIdItem: () => {
+    loadUsersAsync: (userIDs: Set<number>) => Promise<void>;
+    getUserItem: (userId: number) => UserDescriptor | undefined;
+    clearCache: () => void;
+    hasUser: (userId: number) => boolean;
+    usersCache: React.MutableRefObject<Map<number, UserDescriptor>>;
+    renderUserIdViewer: (userId: number | undefined, showIcon?: boolean, showTitile?: boolean) => React.ReactElement;
+};

package/lib/hooks/useDataUserIdItem.js

@@ -0,0 +1,96 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useCallback } from 'react';
+import { UserListCacheService } from '@topconsultnpm/sdk-ts';
+import { IconWarning, SDKUI_Localizator } from '../helper';
+import { TMColors } from '../utils/theme';
+import { TMUserIcon } from '../components';
+export const useDataUserIdItem = () => {
+    const usersCacheRef = useRef(new Map());
+    /**
+     * Carica tutti gli utenti necessari in parallelo e popola la cache
+     * @param userIDs Set di ID degli utenti da caricare
+     * @returns Promise che si risolve quando tutti gli utenti sono stati caricati
+     */
+    const loadUsersAsync = useCallback(async (userIDs) => {
+        if (userIDs.size === 0)
+            return;
+        try {
+            const results = await Promise.all(Array.from(userIDs).map(id => UserListCacheService.GetAsync(id).then(user => ({ id, user }))
+                .catch(() => ({ id, user: undefined }))));
+            const newCache = new Map();
+            results.forEach(({ id, user }) => {
+                if (user)
+                    newCache.set(id, user);
+            });
+            usersCacheRef.current = newCache;
+        }
+        catch (err) {
+            console.error('Error loading Users:', err);
+            usersCacheRef.current = new Map();
+        }
+    }, []);
+    /**
+     * Recupera un utente dalla cache
+     * @param userId ID dell'utente
+     * @returns UserDescriptor se trovato, undefined altrimenti
+     */
+    const getUserItem = useCallback((userId) => {
+        return usersCacheRef.current.get(userId);
+    }, []);
+    /**
+     * Svuota completamente la cache
+     */
+    const clearCache = useCallback(() => {
+        usersCacheRef.current = new Map();
+    }, []);
+    /**
+     * Verifica se un utente è presente nella cache
+     * @param userId ID dell'utente
+     * @returns true se l'utente è in cache, false altrimenti
+     */
+    const hasUser = useCallback((userId) => {
+        return usersCacheRef.current.has(userId);
+    }, []);
+    /**
+     * Helper per ottenere il nome completo dell'utente
+     */
+    const getCompleteUserName = useCallback((domain, name) => {
+        if (!name)
+            return undefined;
+        if (!domain)
+            return name;
+        return domain + "\\" + name;
+    }, []);
+    /**
+     * Renderizza un componente UserIdViewer
+     * @param userId ID dell'utente
+     * @param showIcon Se mostrare l'icona
+     * @param noneSelectionText Testo da mostrare quando non c'è selezione
+     * @param TMUserIcon Componente per l'icona utente
+     * @returns Elemento React per visualizzare l'utente
+     */
+    const renderUserIdViewer = useCallback((userId, showIcon = false, showTitile = true) => {
+        const ud = userId && userId > 0 ? getUserItem(userId) : undefined;
+        const getIcon = () => {
+            if (!showIcon)
+                return null;
+            if (!userId)
+                return null;
+            return ud ? _jsx(TMUserIcon, { ud: ud }) : _jsx("div", { title: showTitile ? SDKUI_Localizator.ValueNotPresent : undefined, children: _jsx(IconWarning, { color: TMColors.warning }) });
+        };
+        const getDescription = () => {
+            if (!userId)
+                return undefined;
+            return ud ? getCompleteUserName(ud.domain, ud.name) : userId.toString() ?? SDKUI_Localizator.NoneSelection;
+        };
+        return (_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '4px' }, children: [getIcon(), _jsx("span", { children: getDescription() })] }));
+    }, [getUserItem, getCompleteUserName]);
+    return {
+        loadUsersAsync,
+        getUserItem,
+        clearCache,
+        hasUser,
+        usersCache: usersCacheRef,
+        renderUserIdViewer
+    };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@topconsultnpm/sdkui-react",
-  "version": "6.20.0-dev1.60",
+  "version": "6.20.0-dev1.62",
   "description": "",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",