@topconsultnpm/sdkui-react 6.22.0-dev2.5 → 6.22.0-dev2.50

package/lib/components/NewComponents/ContextMenu/TMContextMenu.js

@@ -500,6 +500,6 @@ const TMContextMenu = ({ items, trigger = 'right', children, target, externalCon
                     // display: 'inline-block',
                     WebkitTouchCallout: isIOS ? 'none' : undefined,
                     WebkitUserSelect: isIOS ? 'none' : undefined,
-                }, children: children })), menuState.visible && createPortal(_jsxs(_Fragment, { children: [_jsxs(S.MenuContainer, { ref: menuRef, "$x": menuState.position.x, "$y": menuState.position.y, "$openLeft": openLeft, "$openUp": openUp, "$isPositioned": isCalculated, "$externalControl": !!externalControl, "$needsScroll": needsScroll, "$maxHeight": maxHeight, children: [isMobile && menuState.parentNames.length > 0 && (_jsxs(S.MobileMenuHeader, { children: [_jsx(S.BackButton, { onClick: handleBack, "aria-label": "Go back", children: _jsx(IconArrowLeft, {}) }), _jsx(S.HeaderTitle, { children: currentParentName })] })), renderMenuItems(currentMenu, 0)] }), !isMobile && hoveredSubmenus.map((submenu, idx) => (_jsx(S.Submenu, { "$parentRect": submenu.parentRect, "$openUp": submenu.openUp, "data-submenu": "true", "data-open-up": submenu.openUp ? 'true' : 'false', onMouseEnter: handleSubmenuMouseEnter, onMouseLeave: () => handleMouseLeave(submenu.depth), children: renderMenuItems(submenu.items, submenu.depth) }, `submenu-${submenu.depth}-${idx}`)))] }), document.body)] }));
+                }, children: children })), menuState.visible && createPortal(_jsxs(_Fragment, { children: [_jsxs(S.MenuContainer, { ref: menuRef, className: "notranslate", translate: "no", "$x": menuState.position.x, "$y": menuState.position.y, "$openLeft": openLeft, "$openUp": openUp, "$isPositioned": isCalculated, "$externalControl": !!externalControl, "$needsScroll": needsScroll, "$maxHeight": maxHeight, children: [isMobile && menuState.parentNames.length > 0 && (_jsxs(S.MobileMenuHeader, { children: [_jsx(S.BackButton, { onClick: handleBack, "aria-label": "Go back", children: _jsx(IconArrowLeft, {}) }), _jsx(S.HeaderTitle, { children: currentParentName })] })), renderMenuItems(currentMenu, 0)] }), !isMobile && hoveredSubmenus.map((submenu, idx) => (_jsx(S.Submenu, { className: "notranslate", translate: "no", "$parentRect": submenu.parentRect, "$openUp": submenu.openUp, "data-submenu": "true", "data-open-up": submenu.openUp ? 'true' : 'false', onMouseEnter: handleSubmenuMouseEnter, onMouseLeave: () => handleMouseLeave(submenu.depth), children: renderMenuItems(submenu.items, submenu.depth) }, `submenu-${submenu.depth}-${idx}`)))] }), document.body)] }));
 };
 export default TMContextMenu;

package/lib/components/NewComponents/FloatingMenuBar/TMFloatingMenuBar.js

@@ -837,7 +837,7 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
         setState(s => ({ ...s, draggedItemIndex: null }));
         setDragOverIndex(null);
     };
-    return (_jsxs(S.FloatingContainer, { ref: floatingRef, "$x": pixelPosition.x, "$y": pixelPosition.y, "$orientation": state.orientation, "$verticalDirection": state.verticalDirection, "$isDragging": state.isDragging, "$isConfigMode": false, "$isConstrained": isConstrained, "$isHidden": isOrientationChanging, "$bgColor": bgColor, onContextMenu: undefined, children: [_jsx(ContextMenu, { items: [
+    return (_jsxs(S.FloatingContainer, { ref: floatingRef, className: "notranslate", translate: "no", "$x": pixelPosition.x, "$y": pixelPosition.y, "$orientation": state.orientation, "$verticalDirection": state.verticalDirection, "$isDragging": state.isDragging, "$isConfigMode": false, "$isConstrained": isConstrained, "$isHidden": isOrientationChanging, "$bgColor": bgColor, onContextMenu: undefined, children: [_jsx(ContextMenu, { items: [
                     {
                         name: state.orientation === 'horizontal' ? 'Floating bar verticale' : 'Floating bar orizzontale',
                         icon: _jsx(IconRotate, { fontSize: 16, style: { transform: state.orientation === 'horizontal' ? 'rotate(90deg)' : 'rotate(0deg)' } }),

package/lib/components/base/TMDataGrid.d.ts

@@ -46,6 +46,8 @@ export interface TMDataGridProps<T> extends IDataGridOptions {
     showSearchPanel?: boolean;
     /** Show the group panel */
     showGroupPanel?: boolean;
+    /** Rende il paginatore compatto (meno alto, font e pulsanti ridotti, page numbers sostituiti da "pagina / totale"): utile quando la griglia è dentro pannelli bassi */
+    compactPager?: boolean;
     /** Counter configuration */
     counterConfig?: ITMCounterContainerProps;
     /** Master Detail */

package/lib/components/base/TMDataGrid.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import styled, { createGlobalStyle, css } from 'styled-components';
 import DataGrid, { Column, HeaderFilter, Selection, Scrolling, LoadPanel, SearchPanel, Pager, Sorting, Paging, FilterPanel, ColumnChooser, Grouping, GroupPanel, Summary, Editing, FilterRow, StateStoring, RowDragging, MasterDetail, Position, ColumnChooserSearch, ColumnChooserSelection } from 'devextreme-react/data-grid';
 import DataSource from 'devextreme/data/data_source';
 import { IconAll, IconSelected, IconVisible, SDKUI_Globals, SDKUI_Localizator } from '../../helper';
@@ -18,7 +19,7 @@ const TMDataGrid = React.forwardRef((props, ref) => {
     // main properties
     keyExpr = 'id', dataSource, focusedRowEnabled = true, hoverStateEnabled = true, focusedRowKey, selectedRowKeys = [], 
     // custom options
-    dataColumns = [], pageSize = TMDataGridPageSize.Large, showHeaderFilter = true, showFilterPanel = true, showHeaderColumnChooser = false, showLoadPanel = true, showSearchPanel = true, searchPanelToolbarPosition = 'before', searchPanelFocusTrigger = 0, counterConfig = { show: false, items: new Map() }, onHasFiltersChange, customContextMenuItems, 
+    dataColumns = [], pageSize = TMDataGridPageSize.Large, showHeaderFilter = true, showFilterPanel = true, showHeaderColumnChooser = false, showLoadPanel = true, showSearchPanel = true, searchPanelToolbarPosition = 'before', searchPanelFocusTrigger = 0, counterConfig = { show: false, items: new Map() }, compactPager = false, onHasFiltersChange, customContextMenuItems, 
     // events and callbacks
     onSelectionChanged, onFocusedRowChanged, onRowDblClick, onRowClick, onCellClick, onCellDblClick, onOptionChanged, onContentReady, onContextMenuPreparing, onInitialized, onEditorPreparing, onCellPrepared, onRowPrepared, onRowUpdating, onRowExpanded, onRowCollapsed, onRowUpdated, onSaved, onEditCanceled, onEditingStart, onEditingChange, customizeColumns, onKeyDown, scrolling = { mode: 'standard', useNative: SDKUI_Globals.userSettings?.themeSettings.gridSettings.useNativeScrollbar === 1 }, paging = { enabled: true, pageSize: pageSize }, pager = { visible: true, showInfo: true, showNavigationButtons: true }, selection = { mode: 'multiple', showCheckBoxesMode: "always", selectAllMode: "allPages" }, sorting, summary, stateStoring, grouping, groupPanel, filterRow, headerFilter, editing, rowDragging, masterDetail, 
     // other properties
@@ -35,6 +36,9 @@ const TMDataGrid = React.forwardRef((props, ref) => {
     const [customContextMenuVisible, setCustomContextMenuVisible] = useState(false);
     const [customContextMenuPosition, setCustomContextMenuPosition] = useState({ x: 0, y: 0 });
     const [customContextMenuRowKey, setCustomContextMenuRowKey] = useState(undefined);
+    // true quando il menu contestuale viene aperto su spazio vuoto senza alcuna riga di riferimento:
+    // in tal caso i comandi legati alla riga (singleRow/multiRow) devono risultare disabilitati
+    const [customContextMenuOnEmptyArea, setCustomContextMenuOnEmptyArea] = useState(false);
     const gridContainerRef = useRef(null);
     // Ref per evitare focus ripetuti sulla search panel
     const searchPanelFocusedRef = useRef(false);
@@ -75,9 +79,17 @@ const TMDataGrid = React.forwardRef((props, ref) => {
                 const rowKey = internalRef.current.instance().getKeyByRowIndex(rowIndex);
                 internalRef.current.instance().option('focusedRowKey', rowKey);
                 setCustomContextMenuRowKey(rowKey);
+                setCustomContextMenuOnEmptyArea(false);
             }
             else {
-                setCustomContextMenuRowKey(focusedRowKey);
+                // Right-click su spazio vuoto: ricade sulla riga focalizzata solo se esiste ancora.
+                // Se non c'è una riga focalizzata (es. primo click dopo l'apertura) o se focusedRowKey punta a
+                // una riga non più presente (dopo un'eliminazione), il menu viene comunque mostrato ma senza
+                // riga di riferimento: i comandi di riga restano disabilitati, quelli generali utilizzabili
+                const grid = internalRef.current?.instance();
+                const focusedRowExists = focusedRowKey !== undefined && !!grid && grid.getRowIndexByKey(focusedRowKey) >= 0;
+                setCustomContextMenuRowKey(focusedRowExists ? focusedRowKey : undefined);
+                setCustomContextMenuOnEmptyArea(!focusedRowExists);
             }
             setCustomContextMenuVisible(true);
             setCustomContextMenuPosition({ x: e.clientX, y: e.clientY });
@@ -114,6 +126,7 @@ const TMDataGrid = React.forwardRef((props, ref) => {
             setCustomContextMenuVisible(true);
             setCustomContextMenuPosition({ x: clientX, y: clientY });
             setCustomContextMenuRowKey(rowKey);
+            setCustomContextMenuOnEmptyArea(false);
         },
     });
     // Creating a ref to store the timestamp of the last selection change
@@ -222,7 +235,8 @@ const TMDataGrid = React.forwardRef((props, ref) => {
         return items.map(item => {
             let disabled = item.disabled ?? false;
             let disabledCalculation = false;
-            const id = focusedRowEnabled ? focusedRowKey : rowID;
+            // Menu aperto su spazio vuoto senza riga di riferimento: nessun id, i comandi di riga sono disabilitati
+            const id = customContextMenuOnEmptyArea ? undefined : (focusedRowEnabled ? focusedRowKey : rowID);
             if (item.operationType === 'singleRow') {
                 disabledCalculation = selectedRowKeys.length > 1 || id === undefined;
             }
@@ -237,7 +251,10 @@ const TMDataGrid = React.forwardRef((props, ref) => {
                     if (item.operationType === 'singleRow' && id !== undefined) {
                         originalOnClick(id);
                     }
-                    else if (item.operationType === 'multiRow' && id !== undefined) {
+                    else if (item.operationType === 'multiRow' && (selectedRowKeys.length > 0 || id !== undefined)) {
+                        // Condizione allineata a quella di disabilitazione: con righe selezionate il comando è
+                        // attivo anche senza riga di riferimento (es. menu aperto su spazio vuoto), quindi qui
+                        // devono comunque essere passate le chiavi selezionate e non un onClick senza argomenti
                         if (selectedRowKeys.length > 0) {
                             originalOnClick(selectedRowKeys);
                         }
@@ -252,7 +269,7 @@ const TMDataGrid = React.forwardRef((props, ref) => {
                 submenu: item.submenu ? processCustomContextMenuItems(item.submenu, id) : undefined,
             };
         });
-    }, [focusedRowEnabled, focusedRowKey, selectedRowKeys]);
+    }, [focusedRowEnabled, focusedRowKey, selectedRowKeys, customContextMenuOnEmptyArea]);
     // Gestisce la preparazione del menu contestuale della griglia (header e righe)
     const onContextMenuPreparingCallback = useCallback((e) => {
         if (e === undefined)
@@ -358,7 +375,14 @@ const TMDataGrid = React.forwardRef((props, ref) => {
         // Propaga l'evento originale
         onOptionChanged?.(e);
     }, [onOptionChanged, onHasFiltersChange]);
-    return _jsxs("div", { style: { width: "100%", height: "100%" }, children: [_jsx("div", { ref: gridContainerRef, style: { width: "100%", height: counterConfig.show ? "calc(100% - 25px)" : "100%" }, children: _jsxs(DataGrid, { ref: internalRef, id: id, className: `tm-datagrid ${hasFilters ? 'has-filters' : ''}`, 
+    // In modalità compatta il pager usa il displayMode 'compact' di DevExtreme (page numbers sostituiti da "pagina / totale"),
+    // salvo displayMode esplicito passato dal chiamante
+    const effectivePager = useMemo(() => {
+        if (!pager || !compactPager)
+            return pager;
+        return { ...pager, displayMode: pager.displayMode ?? 'compact' };
+    }, [pager, compactPager]);
+    return _jsxs(StyledDataGridContainer, { "$compactPager": compactPager, style: { width: "100%", height: "100%" }, children: [_jsx(HeaderFilterMenuGlobalStyle, {}), _jsx("div", { ref: gridContainerRef, style: { width: "100%", height: counterConfig.show ? "calc(100% - 25px)" : "100%" }, children: _jsxs(DataGrid, { ref: internalRef, id: id, className: `tm-datagrid ${hasFilters ? 'has-filters' : ''}`, 
                     // main properties
                     keyExpr: keyExpr, dataSource: dataSource, selectedRowKeys: selectedRowKeys, focusedRowEnabled: focusedRowEnabled, hoverStateEnabled: hoverStateEnabled, 
                     // events and callbacks
@@ -371,13 +395,241 @@ const TMDataGrid = React.forwardRef((props, ref) => {
                         // Temporary: iOS-specific styles to prevent default long-press menu and text selection
                         WebkitTouchCallout: 'none',
                         WebkitUserSelect: 'none'
-                    }, children: [dataColumns.map((column, index) => (_jsx(Column, { ...column }, column.caption + index.toString()))), sorting && _jsx(Sorting, { ...sorting }), selection && _jsx(Selection, { ...selection }), scrolling && _jsx(Scrolling, { ...scrolling }), summary && _jsx(Summary, { ...summary }), showHeaderFilter && _jsx(HeaderFilter, { visible: true, ...headerFilter }), rowDragging && _jsx(RowDragging, { ...rowDragging }), filterRow && _jsx(FilterRow, { ...filterRow }), showFilterPanel && _jsx(FilterPanel, { visible: true }), showHeaderColumnChooser && _jsxs(ColumnChooser, { height: "400px", enabled: !showHeaderColumnChooser, mode: "select", children: [_jsx(Position, { my: "center", at: "center", of: window }), _jsx(ColumnChooserSearch, { enabled: true }), _jsx(ColumnChooserSelection, { allowSelectAll: false, selectByClick: true, recursive: true })] }), stateStoring && _jsx(StateStoring, { ...stateStoring }), groupPanel && _jsx(GroupPanel, { ...groupPanel }), _jsx(Grouping, { contextMenuEnabled: true, ...grouping }), _jsx(LoadPanel, { enabled: showLoadPanel }), _jsx(SearchPanel, { visible: showSearchPanel, searchVisibleColumnsOnly: true, highlightSearchText: true }), editing && _jsx(Editing, { ...editing }), paging && _jsx(Paging, { ...paging }), pager && _jsx(Pager, { ...pager, visible: totalRecordCount > pageSize }), masterDetail && _jsx(MasterDetail, { ...masterDetail })] }) }), counterConfig.show && _jsx("div", { style: { width: "100%", height: "25px", display: "flex", alignItems: "center", gap: "15px", backgroundColor: "#e0e0e0" }, children: _jsx(TMCounterContainer, { items: counterValues, bgColorContainer: counterConfig.bgColorContainer, bgColorItem: counterConfig.bgColorItem, hoverColorItem: counterConfig.hoverColorItem, textColorItem: counterConfig.textColorItem }) }), customContextMenuItems && (_jsx(TMContextMenu, { target: ".dx-data-row", items: processCustomContextMenuItems(customContextMenuItems, customContextMenuRowKey), externalControl: {
+                    }, children: [dataColumns.map((column, index) => (_jsx(Column, { ...column, alignment: column.alignment ?? 'left' }, column.caption + index.toString()))), sorting && _jsx(Sorting, { ...sorting }), selection && _jsx(Selection, { ...selection }), scrolling && _jsx(Scrolling, { ...scrolling }), summary && _jsx(Summary, { ...summary }), showHeaderFilter && _jsx(HeaderFilter, { visible: true, ...headerFilter, search: { enabled: true, ...headerFilter?.search } }), rowDragging && _jsx(RowDragging, { ...rowDragging }), filterRow && _jsx(FilterRow, { ...filterRow }), showFilterPanel && _jsx(FilterPanel, { visible: true }), showHeaderColumnChooser && _jsxs(ColumnChooser, { height: "400px", enabled: !showHeaderColumnChooser, mode: "select", children: [_jsx(Position, { my: "center", at: "center", of: window }), _jsx(ColumnChooserSearch, { enabled: true }), _jsx(ColumnChooserSelection, { allowSelectAll: false, selectByClick: true, recursive: true })] }), stateStoring && _jsx(StateStoring, { ...stateStoring }), groupPanel && _jsx(GroupPanel, { ...groupPanel }), _jsx(Grouping, { contextMenuEnabled: true, ...grouping }), _jsx(LoadPanel, { enabled: showLoadPanel }), _jsx(SearchPanel, { visible: showSearchPanel, searchVisibleColumnsOnly: true, highlightSearchText: true }), editing && _jsx(Editing, { ...editing }), paging && _jsx(Paging, { ...paging }), effectivePager && _jsx(Pager, { ...effectivePager, visible: totalRecordCount > pageSize }), masterDetail && _jsx(MasterDetail, { ...masterDetail })] }) }), counterConfig.show && _jsx("div", { style: { width: "100%", height: "25px", display: "flex", alignItems: "center", gap: "15px", backgroundColor: "#e0e0e0" }, children: _jsx(TMCounterContainer, { items: counterValues, bgColorContainer: counterConfig.bgColorContainer, bgColorItem: counterConfig.bgColorItem, hoverColorItem: counterConfig.hoverColorItem, textColorItem: counterConfig.textColorItem }) }), customContextMenuItems && (_jsx(TMContextMenu, { target: ".dx-data-row", items: processCustomContextMenuItems(customContextMenuItems, customContextMenuRowKey), externalControl: {
                     visible: customContextMenuVisible,
                     position: customContextMenuPosition,
                     onClose: () => setCustomContextMenuVisible(false)
                 } }))] });
 });
 export default TMDataGrid;
+// Contenitore della griglia: in modalità compatta riduce l'ingombro verticale del pager DevExtreme
+// (padding, altezza minima, font e dimensione dei pulsanti di pagina).
+// Con compactPager = false non emette nessuna regola: width/height restano inline come in precedenza,
+// così il rendering è identico a quello del div originale.
+const StyledDataGridContainer = styled.div `
+    ${({ $compactPager }) => $compactPager && css `
+        & .dx-datagrid-pager {
+            padding: 2px 4px !important;
+            min-height: 0 !important;
+            font-size: 11px;
+        }
+
+        & .dx-datagrid-pager .dx-page,
+        & .dx-datagrid-pager .dx-page-size,
+        & .dx-datagrid-pager .dx-selection,
+        & .dx-datagrid-pager .dx-navigate-button {
+            min-width: 18px !important;
+            min-height: 18px !important;
+            height: auto !important;
+            padding: 1px 5px !important;
+            line-height: 16px !important;
+            font-size: 11px;
+        }
+
+        & .dx-datagrid-pager .dx-pages,
+        & .dx-datagrid-pager .dx-page-sizes,
+        & .dx-datagrid-pager .dx-info,
+        & .dx-datagrid-pager .dx-page-index,
+        & .dx-datagrid-pager .dx-pages .dx-info {
+            font-size: 11px;
+            margin-top: 0 !important;
+            margin-bottom: 0 !important;
+        }
+
+        & .dx-datagrid-pager .dx-info {
+            margin-left: 4px !important;
+            margin-right: 4px !important;
+        }
+
+        /* Editor del numero di pagina (displayMode compact) */
+        & .dx-datagrid-pager .dx-page-index .dx-texteditor-input,
+        & .dx-datagrid-pager .dx-page-sizes .dx-texteditor-input {
+            min-height: 18px !important;
+            height: 18px !important;
+            padding: 0 4px !important;
+            font-size: 11px;
+        }
+    `}
+`;
+// Stile del pannello del filtro d'intestazione (ricerca, elenco valori, OK/Annulla).
+// Il popup è in portale sul body, fuori da StyledDataGridContainer: le regole sono globali
+// ma tutte sotto .dx-header-filter-menu, classe che DevExtreme applica solo a questo popup.
+const HeaderFilterMenuGlobalStyle = createGlobalStyle `
+    .dx-header-filter-menu {
+
+        &.dx-popup-wrapper > .dx-overlay-content.dx-popup-normal {
+            border: 1px solid #E4E8EE;
+            border-radius: 8px;
+            box-shadow: 0 2px 6px rgba(18, 44, 76, .08), 0 12px 28px rgba(18, 44, 76, .14);
+            overflow: hidden;
+        }
+
+        &.dx-popup-wrapper .dx-popup-content {
+            padding: 10px 10px 4px;
+        }
+
+        /* Campo di ricerca: TextBox mode "search" resa da List o da TreeView (filtri gerarchici) */
+        .dx-searchbox.dx-list-search,
+        .dx-searchbox.dx-treeview-search {
+            margin-bottom: 8px;
+            border-radius: 6px;
+            border: 1px solid #CDD2D8;
+            background-color: #F4F6F9;
+            box-shadow: none;
+            transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
+
+            /* fluent disegna qui la barretta di focus, sostituita da bordo + alone */
+            &::before,
+            &::after {
+                display: none;
+            }
+
+            &.dx-state-hover:not(.dx-state-focused) {
+                border-color: #AEB6C1;
+                background-color: #EEF2F7;
+            }
+
+            &.dx-state-focused {
+                border-color: #2559A5;
+                background-color: #FFFFFF;
+                box-shadow: 0 0 0 2px rgba(37, 89, 165, .16);
+            }
+
+            .dx-icon-search {
+                width: 28px;
+                color: #8A929B;
+                transition: color .15s ease;
+            }
+
+            &.dx-state-focused .dx-icon-search {
+                color: #2559A5;
+            }
+
+            .dx-texteditor-input {
+                min-height: 28px;
+                padding-inline-start: 28px;
+                padding-inline-end: 8px;
+                font-size: 12px;
+                background-color: transparent;
+            }
+
+            .dx-placeholder {
+                color: #9AA3AD;
+                font-size: 12px;
+
+                &::before {
+                    padding-inline-start: 28px;
+                    padding-inline-end: 8px;
+                }
+            }
+
+            .dx-clear-button-area .dx-icon-clear {
+                color: #8A929B;
+                transition: color .15s ease;
+            }
+
+            .dx-clear-button-area:hover .dx-icon-clear {
+                color: #2559A5;
+            }
+        }
+
+        .dx-list-item {
+            border-radius: 4px;
+            transition: background-color .12s ease;
+        }
+
+        .dx-list-item-content {
+            padding: 4px 6px;
+        }
+
+        .dx-list-item.dx-state-hover,
+        .dx-list-item.dx-state-focused {
+            background-color: #F1F6FD;
+            color: #122C4C;
+        }
+
+        .dx-list-select-all {
+            padding: 2px 0 6px;
+            margin-bottom: 4px;
+            border-bottom: 1px solid #ECEFF3;
+        }
+
+        .dx-list-select-all-label {
+            font-weight: 600;
+            color: #122C4C;
+        }
+
+        .dx-checkbox-checked .dx-checkbox-icon,
+        .dx-checkbox-indeterminate .dx-checkbox-icon {
+            border-color: #2559A5;
+            background-color: #2559A5;
+        }
+
+        .dx-checkbox.dx-state-hover:not(.dx-checkbox-checked) .dx-checkbox-icon {
+            border-color: #2559A5;
+        }
+
+        /* il :not() lascia intatto il fade-out nativo della scrollbar */
+        .dx-scrollable-scroll:not(.dx-state-invisible) .dx-scrollable-scroll-content {
+            background-color: rgba(18, 44, 76, .28);
+            border-radius: 3px;
+        }
+
+        &.dx-popup-wrapper .dx-popup-bottom.dx-toolbar {
+            padding: 8px 10px 10px;
+            border-top: 1px solid #ECEFF3;
+        }
+
+        .dx-popup-bottom .dx-button {
+            border-radius: 5px;
+            min-width: 76px;
+            margin: 0;
+        }
+
+        .dx-popup-bottom .dx-toolbar-button + .dx-toolbar-button {
+            margin-inline-start: 6px;
+
+            .dx-button {
+                margin: 0;
+            }
+        }
+
+        /* DevExtreme aggiunge prima OK e poi Annulla: individuarli per posizione li rende indipendenti dalla lingua */
+        .dx-popup-bottom .dx-toolbar-after > .dx-toolbar-button:first-child .dx-button {
+            border-color: transparent;
+            background-color: #2559A5;
+
+            .dx-button-text {
+                color: #FFFFFF;
+            }
+
+            &.dx-state-hover {
+                background-color: #1E4A8C;
+            }
+
+            &.dx-state-active {
+                background-color: #1A3F78;
+            }
+        }
+
+        .dx-popup-bottom .dx-toolbar-after > .dx-toolbar-button + .dx-toolbar-button .dx-button {
+            border-color: transparent;
+            background-color: transparent;
+
+            .dx-button-text {
+                color: #44506B;
+            }
+
+            &.dx-state-hover {
+                background-color: #F0F3F7;
+            }
+
+            &.dx-state-active {
+                background-color: #E6EBF2;
+            }
+        }
+    }
+`;
 const getRecordCount = (dataSource) => {
     if (Array.isArray(dataSource)) {
         return dataSource.length; // For array

package/lib/components/base/TMEditorBase.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import { ValidationItem } from "@topconsultnpm/sdk-ts";
 export type Colors = 'error' | 'warning' | 'success' | 'info' | 'primary' | 'secondary' | 'tertiary' | 'standard';
 type IconModes = 'outside' | 'inside' | 'none';
@@ -6,6 +7,7 @@ export type Sizes = 'small' | 'medium' | 'large';
 export type TMEditorButtonData = {
     icon: any;
     text?: string;
+    tooltipContent?: React.ReactNode;
     onClick?: () => void;
 };
 export interface ITMEditorBase {

package/lib/components/base/TMFileManager.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { extractTextsFromDirectory, findFileItems, setFolderTreeViewItems } from "./TMFileManagerUtils";
+import { extractTextsFromDirectory, findFileItems, resolveFileItemUserNames, setFolderTreeViewItems } from "./TMFileManagerUtils";
 import { DeviceType, useDeviceType } from "./TMDeviceProvider";
 import { formatBytes, Globalization, IconDashboard, IconFolder, IconHide, IconList, IconMenuVertical, IconRefresh, IconShow, SDKUI_Globals, SDKUI_Localizator, TMCommandsContextMenu, TMConditionalWrapper } from "../../helper";
 import TMContextMenu from '../NewComponents/ContextMenu/TMContextMenu';
@@ -91,10 +91,12 @@ const TMFileManager = (props) => {
                     (Globalization.getDateTimeDisplayValue(item.lastUpdateTime)?.toLowerCase().toString().includes(searchText.toLowerCase().trim())) ||
                     (Globalization.getDateTimeDisplayValue(item.creationTime)?.toLowerCase().toString().includes(searchText.toLowerCase().trim())) ||
                     (item.version?.toString().includes(searchText.toLowerCase().trim()))));
-            setFilteredFileItems(filtered);
+            // I nomi utente possono mancare quando la lista viene ricostruita senza i partecipanti
+            // (es. refresh dopo la condivisione di un file): vengono risolti qui dagli ID
+            setFilteredFileItems(filtered.map(item => resolveFileItemUserNames(item, allUsers)));
         };
         filterItems();
-    }, [searchText, selectedFolder]);
+    }, [searchText, selectedFolder, allUsers]);
     // Callback to handle the "back" action (closing the draft list view)
     const onBackCallback = useCallback(() => {
         setOpenDraftList(false);

package/lib/components/base/TMFileManagerDataGridView.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useState } from "react";
+import { getFileItemLinkUrl } from "./TMFileManagerUtils";
 import { formatBytes, Globalization, renderHighlightedText, SDKUI_Localizator } from "../../helper";
 import TMDataGrid from "./TMDataGrid";
 import TMDcmtIcon from "../features/documents/TMDcmtIcon";
@@ -43,6 +44,12 @@ const TMFileManagerDataGridView = (props) => {
     }, [handleSelectedFiles]);
     // Handler for double-click cell event
     const onCellDblClick = useCallback((e) => {
+        // i link non hanno un documento da aprire: il doppio click (anche sull'icona dell'estensione) apre l'url in un nuovo tab
+        const linkUrl = getFileItemLinkUrl(e.data);
+        if (linkUrl) {
+            window.open(linkUrl, '_blank', 'noopener,noreferrer');
+            return;
+        }
         if (e.column.dataField === "ext")
             return;
         if (onDoubleClickHandler)
@@ -62,8 +69,10 @@ const TMFileManagerDataGridView = (props) => {
     }, [searchText, findCheckOutUserName]);
     const cellExtRender = useCallback((cellData) => {
         const item = cellData.data;
-        const tooltipContent = (_jsxs("div", { style: { textAlign: 'left' }, children: [_jsxs("div", { children: [_jsx("span", { style: { fontWeight: 'bold' }, children: "ID:" }), " ", item.id ?? '-'] }), _jsxs("div", { children: [_jsx("span", { style: { fontWeight: 'bold' }, children: "DID:" }), " ", item.did ?? '-'] }), _jsxs("div", { children: [_jsx("span", { style: { fontWeight: 'bold' }, children: "TID:" }), " ", item.tid ?? '-'] }), _jsx("hr", {}), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.Name, ":"] }), " ", item.name ?? '-'] }), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.Extension, ":"] }), " ", item.ext ?? '-'] }), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.Author, ":"] }), " ", item.updaterName ?? '-'] }), _jsx("hr", {}), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.Version, ":"] }), " ", item.version] }), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.Size, ":"] }), " ", formatBytes(item.size ?? 0)] }), _jsx("hr", {}), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.CreationTime, ":"] }), " ", Globalization.getDateTimeDisplayValue(item.creationTime)] }), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.LastUpdateTime, ":"] }), " ", Globalization.getDateTimeDisplayValue(item.lastUpdateTime)] })] }));
-        return _jsx(TMDcmtIcon, { tid: item.tid, did: item.did, fileExtension: item.ext, downloadMode: 'openInNewWindow', tooltipContent: tooltipContent, isSigned: item.isSigned });
+        const tooltipContent = (_jsxs("div", { style: { textAlign: 'left' }, children: [_jsxs("div", { children: [_jsx("span", { style: { fontWeight: 'bold' }, children: "ID:" }), " ", item.id ?? '-'] }), _jsxs("div", { children: [_jsx("span", { style: { fontWeight: 'bold' }, children: "DID:" }), " ", item.did ?? '-'] }), _jsxs("div", { children: [_jsx("span", { style: { fontWeight: 'bold' }, children: "TID:" }), " ", item.tid ?? '-'] }), _jsx("hr", {}), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.Name, ":"] }), " ", item.name ?? '-'] }), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.Extension, ":"] }), " ", item.ext ?? '-'] }), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.Author, ":"] }), " ", item.updaterName ?? '-'] }), _jsx("hr", {}), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.Version, ":"] }), " ", item.version] }), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.Size, ":"] }), " ", formatBytes(item.size ?? 0)] }), _jsx("hr", {}), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.CreationTime, ":"] }), " ", Globalization.getDateTimeDisplayValue(item.creationTime)] }), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.LastUpdateTime, ":"] }), " ", Globalization.getDateTimeDisplayValue(item.lastUpdateTime)] }), item.description && _jsxs(_Fragment, { children: [_jsx("hr", {}), _jsxs("div", { style: { maxWidth: '400px', overflowWrap: 'anywhere' }, children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.Description, ":"] }), " ", item.description] })] })] }));
+        // i link non hanno un file associato: l'icona non deve avviare il download
+        const isLink = getFileItemLinkUrl(item) !== undefined;
+        return _jsx(TMDcmtIcon, { tid: item.tid, did: item.did, fileExtension: item.ext, downloadMode: isLink ? 'none' : 'openInNewWindow', tooltipContent: tooltipContent, isSigned: item.isSigned });
     }, []);
     const cellDatetimeRender = useCallback((cellData) => {
         if (!cellData.value)

package/lib/components/base/TMFileManagerThumbnailItems.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useRef } from 'react';
-import { colors, TMFileItemContainer } from './TMFileManagerUtils';
+import { colors, getFileItemLinkUrl, TMFileItemContainer } from './TMFileManagerUtils';
 import { formatBytes, Globalization, renderHighlightedText, SDKUI_Localizator } from '../../helper';
 import TMTooltip from './TMTooltip';
 import TMDcmtIcon from '../features/documents/TMDcmtIcon';
@@ -35,6 +35,16 @@ const TMFileManagerThumbnailItems = (props) => {
             }
         }
     }, [items, lastSelectedIndexRef.current]);
+    // Apre l'item: i link non hanno un documento da aprire, si apre direttamente l'url in un nuovo tab
+    const openFileItem = useCallback((item) => {
+        const linkUrl = getFileItemLinkUrl(item);
+        if (linkUrl) {
+            window.open(linkUrl, '_blank', 'noopener,noreferrer');
+            return;
+        }
+        if (onDoubleClick)
+            onDoubleClick(item);
+    }, [onDoubleClick]);
     const handleKeyDown = useCallback((event) => {
         event.preventDefault();
         if (event.key === 'ArrowDown' && lastSelectedIndexRef.current !== null) {
@@ -44,21 +54,21 @@ const TMFileManagerThumbnailItems = (props) => {
                 lastSelectedIndexRef.current = currentIndex;
             }
         }
-        if (event.key === 'Enter' && selectedFiles.length === 1 && onDoubleClick) {
+        if (event.key === 'Enter' && selectedFiles.length === 1) {
             const currentItem = items.find(item => item.id === selectedFiles[0].id);
             if (currentItem)
-                onDoubleClick(currentItem);
+                openFileItem(currentItem);
         }
-    }, [items, lastSelectedIndexRef.current, selectedFiles]);
+    }, [items, lastSelectedIndexRef.current, selectedFiles, openFileItem]);
     // Double click handler with timeout cleanup
     const onDoubleClickHandler = useCallback((item) => {
         if (clickTimeoutRef.current) {
             clearTimeout(clickTimeoutRef.current);
             clickTimeoutRef.current = null;
         }
-        if (onDoubleClick && item)
-            onDoubleClick(item);
-    }, [onDoubleClick]);
+        if (item)
+            openFileItem(item);
+    }, [openFileItem]);
     const onClickHandler = useCallback((e, item) => {
         // If a click timeout is already running, clear it (distinguish between single and double clicks)
         if (clickTimeoutRef.current) {
@@ -144,8 +154,8 @@ const TMFileManagerThumbnailItems = (props) => {
                 bgHoverColor = isSelected ? colors.PRIMARY_BLUE : "#fff59d";
             }
             const editLockTooltipText = _jsxs(_Fragment, { children: [_jsxs("div", { style: { textAlign: "center" }, children: [editMode && (_jsxs(_Fragment, { children: [_jsx("i", { style: { fontSize: "18px", color: colors.MEDIUM_GREEN, fontWeight: "bold" }, className: "dx-icon-edit" }), SDKUI_Localizator.CurrentUserExtract] })), lockMode && (_jsxs(_Fragment, { children: [_jsx("i", { style: { fontSize: "18px", color: colors.MEDIUM_GREEN, fontWeight: "bold" }, className: "dx-icon-lock" }), SDKUI_Localizator.ExtractedFromOtherUser] }))] }), _jsx("hr", {}), _jsxs("div", { style: { textAlign: "left" }, children: [_jsxs("ul", { children: [_jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.ExtractedBy }), ": ", findCheckOutUserName(item) ?? '-', " (ID: ", item.checkOutUserID, ")"] }), _jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.ExtractedOn }), ": ", Globalization.getDateTimeDisplayValue(item.checkoutDate?.toString())] })] }), _jsx("hr", {}), _jsx("ul", { children: _jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.Version }), ": ", item.version ?? 1] }) }), _jsx("hr", {}), _jsxs("ul", { children: [_jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.Extension }), ": ", item.ext] }), _jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.CreationTime }), ": ", Globalization.getDateTimeDisplayValue(item.creationTime?.toString())] }), _jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.LastUpdateTime }), ": ", Globalization.getDateTimeDisplayValue(item.lastUpdateTime?.toString())] })] })] })] });
-            const tooltipContent = (_jsxs("div", { style: { textAlign: 'left' }, children: [_jsxs("div", { children: [_jsx("span", { style: { fontWeight: 'bold' }, children: "ID:" }), " ", item.id ?? '-'] }), _jsxs("div", { children: [_jsx("span", { style: { fontWeight: 'bold' }, children: "DID:" }), " ", item.did ?? '-'] }), _jsxs("div", { children: [_jsx("span", { style: { fontWeight: 'bold' }, children: "TID:" }), " ", item.tid ?? '-'] }), _jsx("hr", {}), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.Name, ":"] }), " ", item.name ?? '-'] }), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.Extension, ":"] }), " ", item.ext ?? '-'] }), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.Author, ":"] }), " ", item.updaterName ?? '-'] }), _jsx("hr", {}), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.Version, ":"] }), " ", item.version] }), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.Size, ":"] }), " ", formatBytes(item.size ?? 0)] }), _jsx("hr", {}), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.CreationTime, ":"] }), " ", Globalization.getDateTimeDisplayValue(item.creationTime)] }), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.LastUpdateTime, ":"] }), " ", Globalization.getDateTimeDisplayValue(item.lastUpdateTime)] })] }));
-            return _jsx(TMFileItemContainer, { className: "tm-file-manager-thumbnail-items", ref: containerRef, id: "tm-file-manager-thumbnail-item-" + item.id.toString(), "$backgroundColor": bgColor, "$bgHoverColor": bgHoverColor, "$textColor": textColor, onDoubleClick: () => onDoubleClickHandler(item), onContextMenu: (e) => onContextMenu(e, item), onClick: (e) => onClickHandler(e, item), tabIndex: 0, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, children: _jsxs("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100%' }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', flex: 1, minWidth: 0 }, children: [_jsxs("div", { style: { marginRight: '16px', flexShrink: 0, display: 'flex', flexDirection: 'column', alignItems: 'center' }, children: [_jsx("div", { style: { width: '40px' }, children: _jsx(TMDcmtIcon, { tid: item.tid, did: item.did, fileExtension: item.ext, downloadMode: 'openInNewWindow', tooltipContent: tooltipContent, isSigned: item.isSigned }) }), _jsxs("div", { style: { display: 'flex', justifyContent: 'center', width: '40px' }, children: [editMode && _jsx(TMTooltip, { content: editLockTooltipText, children: _jsx("i", { style: { fontSize: "18px", color: !isSelected ? colors.MEDIUM_GREEN : '#fff', fontWeight: "bold" }, className: "dx-icon-edit" }) }), lockMode && _jsx(TMTooltip, { content: editLockTooltipText, children: _jsx("i", { style: { fontSize: "18px", color: !isSelected ? colors.MEDIUM_GREEN : '#fff', fontWeight: "bold" }, className: "dx-icon-lock" }) })] })] }), _jsxs("div", { style: { overflow: 'hidden', minWidth: 0 }, children: [_jsx("div", { style: { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', width: '100%', display: 'block', fontSize: '1rem', fontWeight: "bold" }, children: _jsx(TMTooltip, { parentStyle: { overflow: 'hidden' }, childStyle: { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', width: '100%', display: 'block' }, children: renderHighlightedText(item.name, searchText, isSelected) }) }), _jsx("div", { style: { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', width: '100%', display: 'block', fontSize: 'calc(1rem - 1px)' }, children: formatBytes(item.size ?? 0) })] })] }), item.version && (_jsx("div", { style: { flexShrink: 0, marginLeft: '12px', whiteSpace: 'nowrap' }, children: _jsx(TMTooltip, { content: SDKUI_Localizator.Version, children: _jsx("div", { style: { border: "2px solid #28a745", backgroundColor: "#28a745", color: "#ffffff", borderRadius: '50%', width: '30px', height: '30px', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '12px', fontWeight: 'bold' }, children: item.version }) }) }))] }) }, "tm-file-manager-thumbnail-item-" + item.id);
+            const tooltipContent = (_jsxs("div", { style: { textAlign: 'left' }, children: [_jsxs("div", { children: [_jsx("span", { style: { fontWeight: 'bold' }, children: "ID:" }), " ", item.id ?? '-'] }), _jsxs("div", { children: [_jsx("span", { style: { fontWeight: 'bold' }, children: "DID:" }), " ", item.did ?? '-'] }), _jsxs("div", { children: [_jsx("span", { style: { fontWeight: 'bold' }, children: "TID:" }), " ", item.tid ?? '-'] }), _jsx("hr", {}), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.Name, ":"] }), " ", item.name ?? '-'] }), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.Extension, ":"] }), " ", item.ext ?? '-'] }), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.Author, ":"] }), " ", item.updaterName ?? '-'] }), _jsx("hr", {}), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.Version, ":"] }), " ", item.version] }), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.Size, ":"] }), " ", formatBytes(item.size ?? 0)] }), _jsx("hr", {}), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.CreationTime, ":"] }), " ", Globalization.getDateTimeDisplayValue(item.creationTime)] }), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.LastUpdateTime, ":"] }), " ", Globalization.getDateTimeDisplayValue(item.lastUpdateTime)] }), item.description && _jsxs(_Fragment, { children: [_jsx("hr", {}), _jsxs("div", { style: { maxWidth: '400px', overflowWrap: 'anywhere' }, children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.Description, ":"] }), " ", item.description] })] })] }));
+            return _jsx(TMFileItemContainer, { className: "tm-file-manager-thumbnail-items", ref: containerRef, id: "tm-file-manager-thumbnail-item-" + item.id.toString(), "$backgroundColor": bgColor, "$bgHoverColor": bgHoverColor, "$textColor": textColor, onDoubleClick: () => onDoubleClickHandler(item), onContextMenu: (e) => onContextMenu(e, item), onClick: (e) => onClickHandler(e, item), tabIndex: 0, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, children: _jsxs("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100%' }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', flex: 1, minWidth: 0 }, children: [_jsxs("div", { style: { marginRight: '16px', flexShrink: 0, display: 'flex', flexDirection: 'column', alignItems: 'center' }, children: [_jsx("div", { style: { width: '40px' }, children: _jsx(TMDcmtIcon, { tid: item.tid, did: item.did, fileExtension: item.ext, downloadMode: getFileItemLinkUrl(item) !== undefined ? 'none' : 'openInNewWindow', tooltipContent: tooltipContent, isSigned: item.isSigned }) }), _jsxs("div", { style: { display: 'flex', justifyContent: 'center', width: '40px' }, children: [editMode && _jsx(TMTooltip, { content: editLockTooltipText, children: _jsx("i", { style: { fontSize: "18px", color: !isSelected ? colors.MEDIUM_GREEN : '#fff', fontWeight: "bold" }, className: "dx-icon-edit" }) }), lockMode && _jsx(TMTooltip, { content: editLockTooltipText, children: _jsx("i", { style: { fontSize: "18px", color: !isSelected ? colors.MEDIUM_GREEN : '#fff', fontWeight: "bold" }, className: "dx-icon-lock" }) })] })] }), _jsxs("div", { style: { overflow: 'hidden', minWidth: 0 }, children: [_jsx("div", { style: { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', width: '100%', display: 'block', fontSize: '1rem', fontWeight: "bold" }, children: _jsx(TMTooltip, { parentStyle: { overflow: 'hidden' }, childStyle: { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', width: '100%', display: 'block' }, children: renderHighlightedText(item.name, searchText, isSelected) }) }), _jsx("div", { style: { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', width: '100%', display: 'block', fontSize: 'calc(1rem - 1px)' }, children: formatBytes(item.size ?? 0) })] })] }), item.version && (_jsx("div", { style: { flexShrink: 0, marginLeft: '12px', whiteSpace: 'nowrap' }, children: _jsx(TMTooltip, { content: SDKUI_Localizator.Version, children: _jsx("div", { style: { border: "2px solid #28a745", backgroundColor: "#28a745", color: "#ffffff", borderRadius: '50%', width: '30px', height: '30px', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '12px', fontWeight: 'bold' }, children: item.version }) }) }))] }) }, "tm-file-manager-thumbnail-item-" + item.id);
         }) });
 };
 export default TMFileManagerThumbnailItems;

package/lib/components/base/TMFileManagerUtils.d.ts

@@ -26,6 +26,7 @@ export interface FileItem {
     version?: number;
     isSigned?: number;
 }
+export declare const resolveFileItemUserNames: (item: FileItem, users: Array<UserDescriptor>) => FileItem;
 export interface TMFileManagerTreeViewDirectory {
     id: number;
     text: string;
@@ -56,6 +57,7 @@ export declare const TMFileItemContainer: import("styled-components/dist/types")
     $textColor?: string;
     $bgHoverColor?: string;
 }, never>>> & string;
+export declare const getFileItemLinkUrl: (fileItem: FileItem | undefined) => string | undefined;
 export declare const findFileItems: (items: Array<FileItem>, id: number) => FileItem | undefined;
 export declare const setFolderTreeViewItems: (items: Array<FileItem>) => Array<TMFileManagerTreeViewDirectory>;
 export declare const buildFolderHierarchy: (fileSystemTree: WGTreeDescriptor | undefined, draftsFile: SearchResultDescriptor | undefined, archivedDocuments: Array<SearchResultDescriptor> | undefined, participants: Array<UserDescriptor> | undefined) => {

package/lib/components/base/TMFileManagerUtils.js

@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import { associateColumnsToRows, SIGNATURE_EXTENSIONS } from "../../helper";
+import { associateColumnsToRows, SIGNATURE_EXTENSIONS, WHATS_NEWS_FILE_NAME, WHATS_NEWS_LINK_URL } from "../../helper";
 /**
  * Verifica se un'estensione indica che il file è firmato digitalmente.
  * Controlla se l'estensione (es. "pdf.p7m", ".p7m", "p7m") contiene
@@ -12,6 +12,22 @@ export const isSigned = (ext) => {
     const parts = normalized.split('.');
     return parts.some(part => SIGNATURE_EXTENSIONS.has(part));
 };
+// Completa i nomi utente (autore e utente di check-out) di un FileItem quando mancano, risolvendoli dagli ID.
+export const resolveFileItemUserNames = (item, users) => {
+    if (!users || users.length === 0)
+        return item;
+    const isValidUserID = (id) => id !== undefined && Number.isFinite(id) && id > 0;
+    const needsUpdaterName = !item.updaterName && isValidUserID(item.updaterID);
+    const needsCheckOutUserName = !item.checkOutUserName && isValidUserID(item.checkOutUserID);
+    if (!needsUpdaterName && !needsCheckOutUserName)
+        return item;
+    const resolved = { ...item };
+    if (needsUpdaterName)
+        resolved.updaterName = users.find(user => user.id === item.updaterID)?.name ?? item.updaterName;
+    if (needsCheckOutUserName)
+        resolved.checkOutUserName = users.find(user => user.id === item.checkOutUserID)?.name ?? item.checkOutUserName;
+    return resolved;
+};
 export var TMFileManagerPageSize;
 (function (TMFileManagerPageSize) {
     TMFileManagerPageSize[TMFileManagerPageSize["Small"] = 30] = "Small";
@@ -47,6 +63,26 @@ export const TMFileItemContainer = styled.div `
         outline: none;
     }
 `;
+// Confronto case-insensitive con il nome del file
+const isWhatsNewsFileName = (name) => (name ?? '').toLowerCase() === WHATS_NEWS_FILE_NAME;
+// Ritorna l'url del link associato al file: un file il cui metadato "description" contiene un url http/https
+// e' un link, quindi non ha un file/documento da scaricare o da aprire nella form: si apre direttamente l'url
+export const getFileItemLinkUrl = (fileItem) => {
+    if (!fileItem || fileItem.isDirectory)
+        return undefined;
+    if (isWhatsNewsFileName(fileItem.name))
+        return WHATS_NEWS_LINK_URL;
+    const value = fileItem.description?.trim();
+    if (!value)
+        return undefined;
+    try {
+        const url = new URL(value);
+        return (url.protocol === 'http:' || url.protocol === 'https:') ? url.href : undefined;
+    }
+    catch {
+        return undefined;
+    }
+};
 // Function to find a specific file or folder based on its ID (used for finding nested items)
 export const findFileItems = (items, id) => {
     for (let item of items) {