@topconsultnpm/sdkui-react-beta 6.13.19 → 6.13.21

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

@@ -1,6 +1,5 @@
 import React from 'react';
-import { ITMRightSidebarProps } from './TMRightSidebar';
-export interface ITMPanelProps extends ITMRightSidebarProps {
+export interface ITMPanelProps {
     allowMaximize?: boolean;
     color?: string;
     backgroundColor?: string;
@@ -12,6 +11,7 @@ export interface ITMPanelProps extends ITMRightSidebarProps {
     totalItems?: number;
     toolbar?: any;
     padding?: string;
+    keepActiveState?: boolean;
     onBack?: () => void;
     onClose?: () => void;
     onHeaderDoubleClick?: () => void;

package/lib/components/base/TMPanel.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useLayoutEffect, useRef, useState } from 'react';
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
-import TMRightSidebar from './TMRightSidebar';
 import { IconArrowLeft, IconClearButton, IconWindowMaximize, IconWindowMinimize, isPositiveNumber, SDKUI_Localizator } from '../../helper';
 import TMButton from './TMButton';
 const StyledPanelContainer = styled.div `
@@ -63,17 +62,24 @@ const StyledPanelContent = styled.div `
         outline: none;
     }
 `;
-const StyledInnerPanelDiv = styled.div `
-    outline: none;
-    &:focus {
-        outline: none;
-    }
-`;
-const TMPanel = ({ allowMaximize = true, items = [], onItemClick, selectedItem, showPanel, color, backgroundColor, backgroundColorContainer, children, showHeader = true, title, totalItems, displayedItemsCount, toolbar, padding = '5px', onBack, onClose, onHeaderDoubleClick, onMaximize }) => {
+const TMPanel = ({ allowMaximize = true, color, backgroundColor, backgroundColorContainer, children, showHeader = true, title, totalItems, displayedItemsCount, toolbar, padding = '5px', keepActiveState = false, onBack, onClose, onHeaderDoubleClick, onMaximize }) => {
     const [isActive, setIsActive] = useState(false);
     const [isMaximized, setIsMaximized] = useState(false);
     const [minWidth, setMinWidth] = useState(undefined);
     const titleRowRef = useRef(null);
+    // If keepActiveState is true, always force isActive to true
+    useEffect(() => {
+        if (keepActiveState)
+            setIsActive(true);
+    }, [keepActiveState]);
+    const handleFocus = () => {
+        if (!keepActiveState)
+            setIsActive(true);
+    };
+    const handleBlur = () => {
+        if (!keepActiveState)
+            setIsActive(false);
+    };
     useLayoutEffect(() => {
         if (titleRowRef.current) {
             setMinWidth(titleRowRef.current.offsetWidth);
@@ -91,7 +97,7 @@ const TMPanel = ({ allowMaximize = true, items = [], onItemClick, selectedItem,
     };
     return (_jsxs(StyledPanelContainer, { "$isMaximized": onMaximize ? false : isMaximized, style: minWidth ? { minWidth } : undefined, children: [showHeader &&
                 _jsx(StyledPanelHeader, { "$backgroundColor": backgroundColor, "$color": color, "$isActive": isActive, onDoubleClick: () => { if (onHeaderDoubleClick)
-                        onHeaderDoubleClick(); }, tabIndex: -1, onFocus: () => setIsActive(true), onBlur: () => setIsActive(false), onClick: () => setIsActive(true), children: _jsxs("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', width: '100%' }, children: [_jsxs("div", { ref: titleRowRef, style: { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: '8px' }, children: [onBack &&
+                        onHeaderDoubleClick(); }, tabIndex: -1, onFocus: handleFocus, onBlur: handleBlur, onClick: handleFocus, children: _jsxs("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', width: '100%' }, children: [_jsxs("div", { ref: titleRowRef, style: { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: '8px' }, children: [onBack &&
                                         _jsx(TMButton, { btnStyle: 'icon', icon: _jsx(IconArrowLeft, {}), caption: SDKUI_Localizator.Back, onClick: onBack }), _jsx("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center' }, children: _jsxs("p", { style: {
                                                 whiteSpace: 'nowrap',
                                                 overflow: 'hidden',
@@ -103,7 +109,6 @@ const TMPanel = ({ allowMaximize = true, items = [], onItemClick, selectedItem,
                                                         ? ` (${totalItems})`
                                                         : ''] }) })] }), _jsxs("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: '5px' }, children: [toolbar, allowMaximize && _jsx(TMButton, { color: 'primaryOutline', caption: isMaximized ? SDKUI_Localizator.Minimize : SDKUI_Localizator.Maximize, icon: isMaximized
                                             ? _jsx(IconWindowMinimize, { fontSize: 16 })
-                                            : _jsx(IconWindowMaximize, { fontSize: 16 }), btnStyle: 'icon', onClick: handleMaximize }), onClose && _jsx(TMButton, { color: 'primaryOutline', caption: SDKUI_Localizator.Close, icon: _jsx(IconClearButton, {}), btnStyle: 'icon', onClick: () => { setIsMaximized(false); onClose?.(); } })] })] }) }), _jsxs(StyledPanelContent, { "$height": showHeader ? "calc(100% - 40px)" : "100%", "$padding": padding, "$backgroundColor": backgroundColorContainer ?? `#FFFFFF`, tabIndex: -1, onFocus: () => setIsActive(true), onBlur: () => setIsActive(false), onClick: () => setIsActive(true), children: [_jsx(StyledInnerPanelDiv, { style: { width: items.length > 0 ? 'calc(100% - 30px)' : '100%' }, tabIndex: -1, onFocus: () => setIsActive(true), onBlur: () => setIsActive(false), onClick: () => setIsActive(true), children: children }), items.length > 0 &&
-                        _jsx(TMRightSidebar, { items: items, onItemClick: onItemClick, selectedItem: selectedItem, showPanel: showPanel })] })] }));
+                                            : _jsx(IconWindowMaximize, { fontSize: 16 }), btnStyle: 'icon', onClick: handleMaximize }), onClose && _jsx(TMButton, { color: 'primaryOutline', caption: SDKUI_Localizator.Close, icon: _jsx(IconClearButton, {}), btnStyle: 'icon', onClick: () => { setIsMaximized(false); onClose?.(); } })] })] }) }), _jsx(StyledPanelContent, { "$height": showHeader ? "calc(100% - 40px)" : "100%", "$padding": padding, "$backgroundColor": backgroundColorContainer ?? `#FFFFFF`, tabIndex: -1, onFocus: handleFocus, onBlur: handleBlur, onClick: handleFocus, children: children })] }));
 };
 export default TMPanel;

package/lib/components/base/TMPanelManagerMatrix.js

@@ -236,7 +236,7 @@ const TMPanelManagerMatrix = (props) => {
                                         opacity: isHiddenPanel ? 0 : 1,
                                     };
                                     const panelStyle = maximizedPanelId ? (isMaximized ? { ...baseStyle, ...maximizedStyle } : hiddenStyle) : { ...baseStyle, ...defaultStyle };
-                                    return _jsx("div", { style: panelStyle, children: row.panel ? _jsx(TMPanel, { title: row.panel.title, totalItems: row.panel.totalItems ?? undefined, displayedItemsCount: row.panel.displayedItemsCount ?? undefined, onClose: (!isMobile && toolbarState) ? () => togglePanelVisibility(toolbarState.items.find(item => item.panelManagerMatrixRowId === row.id)) : undefined, onMaximize: () => toogleMaximizeMinimizePanelCallback(row.id), onHeaderDoubleClick: () => toogleMaximizeMinimizePanelCallback(row.id), allowMaximize: !isMobile, children: _jsx("div", { style: { width: '100%', height: '100%' }, children: typeof row.content === "function" ? row.content(togglePanelVisibility, toogleMaximizeMinimizePanelCallback, toggleToolbarItemDisabled, toggleToolbarItemVisibility) : row.content }) })
+                                    return _jsx("div", { style: panelStyle, children: row.panel ? _jsx(TMPanel, { title: row.panel.title, totalItems: row.panel.totalItems ?? undefined, displayedItemsCount: row.panel.displayedItemsCount ?? undefined, showHeader: row.panel.showHeader ?? true, allowMaximize: !isMobile, onClose: (!isMobile && toolbarState) ? () => togglePanelVisibility(toolbarState.items.find(item => item.panelManagerMatrixRowId === row.id)) : undefined, onMaximize: () => toogleMaximizeMinimizePanelCallback(row.id), onHeaderDoubleClick: () => toogleMaximizeMinimizePanelCallback(row.id), children: _jsx("div", { style: { width: '100%', height: '100%' }, children: typeof row.content === "function" ? row.content(togglePanelVisibility, toogleMaximizeMinimizePanelCallback, toggleToolbarItemDisabled, toggleToolbarItemVisibility) : row.content }) })
                                             : _jsx("div", { style: { width: '100%', height: '100%' }, children: typeof row.content === "function" ? row.content(togglePanelVisibility, toogleMaximizeMinimizePanelCallback, toggleToolbarItemDisabled, toggleToolbarItemVisibility) : row.content }) }, "TMPanelManagerMatrix-r-" + row.id);
                                 }) }) }, "TMPanelManagerMatrix-c-" + column));
                     }) : _jsxs("div", { style: {

package/lib/components/features/archive/TMArchive.js

@@ -10,6 +10,7 @@ import TMDcmtForm from '../documents/TMDcmtForm';
 import { StyledToppyTextContainer, StyledToppyText } from '../search/TMSearchQueryPanel';
 import TMTreeSelector from '../search/TMTreeSelector';
 import TMPanel from '../../base/TMPanel';
+import TMToolbarCard from '../../base/TMToolbarCard';
 const TMArchive = ({ inputTID }) => {
     const TIDs = SDKUI_Globals.userSettings.archivingSettings.mruTIDs;
     const [currentTID, setCurrentTID] = useState(0);
@@ -52,6 +53,6 @@ const TMArchive = ({ inputTID }) => {
                                     } }) }) }) : _jsx(_Fragment, {}), _jsx(TMLayoutItem, { children: currentTID ?
                                 _jsx(TMDcmtForm, { TID: currentTID, DID: undefined, layoutMode: LayoutModes.Ark, customRightSidebarItems: customSidebarItems, showPreview: deviceType !== DeviceType.MOBILE, onClose: deviceType === DeviceType.MOBILE ? () => setCurrentTID(undefined) : undefined, onSaveRecents: (TIDs) => setMruTIDs(TIDs) })
                                 :
-                                    _jsx(TMPanel, { items: customSidebarItems, title: 'Archiviazione', children: _jsxs(TMLayoutContainer, { gap: 30, alignItems: 'center', justifyContent: 'center', children: [_jsxs(TMLayoutItem, { width: 'max-content', height: 'max-content', children: [" ", _jsxs(StyledToppyTextContainer, { children: [" ", _jsxs(StyledToppyText, { children: [" ", 'Selezionare un tipo documento', " "] }), " "] }), " "] }), _jsxs(TMLayoutItem, { width: 'max-content', height: 'max-content', children: [" ", _jsx("img", { src: Logo, width: 120, alt: '' }), " "] })] }) }) })] }) })] }));
+                                    _jsx(TMToolbarCard, { items: customSidebarItems, title: 'Archiviazione', children: _jsxs(TMLayoutContainer, { gap: 30, alignItems: 'center', justifyContent: 'center', children: [_jsxs(TMLayoutItem, { width: 'max-content', height: 'max-content', children: [" ", _jsxs(StyledToppyTextContainer, { children: [" ", _jsxs(StyledToppyText, { children: [" ", 'Selezionare un tipo documento', " "] }), " "] }), " "] }), _jsxs(TMLayoutItem, { width: 'max-content', height: 'max-content', children: [" ", _jsx("img", { src: Logo, width: 120, alt: '' }), " "] })] }) }) })] }) })] }));
 };
 export default TMArchive;

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

@@ -16,20 +16,20 @@ const StyledSqdItem = styled.div `
     flex-direction: column;
     align-items: stretch;
     min-width: 0;
-    padding: 10px 10px 0px 10px;
+    padding: 10px;
     position: relative;
     white-space: nowrap;
     text-overflow: ellipsis;
+    border-bottom: 1px solid #00A99D; // separator line
 
     &:hover {
         cursor: pointer;
     }
-`;
-const StyledPipe = styled.div `
-    width: 90%;
-    height: 1px;
-    background: #00A99D;
-    margin: 4px auto;
+
+    &:last-child {
+        border-bottom: none; // remove border for last item
+        margin-bottom: 0;
+    }
 `;
 const getSharingModeColor = (sharingMode) => {
     switch (sharingMode) {
@@ -157,7 +157,7 @@ const TMSavedQuerySelector = React.memo(({ items, selectedId, allowShowSearch =
                                     justifyContent: 'center',
                                     fontSize: '1rem',
                                     fontWeight: 'bold'
-                                }, children: _jsx(IconApply, { fontSize: 24, color: 'green' }) }), _jsx(StyledPipe, {}), _jsx(SavedQueryContexMenu, { sqd: sqd, manageDefault: manageDefault, setDefaultAsync: () => setDefaultSQDAsync(sqd), deleteAsync: () => deleteSQDAsync(sqd), favManageAsync: () => favManageSQDAsync(sqd) })] }, sqd.id))) }), dataSource.length > initialSQDsMaxItems && searchText.length <= 0 &&
+                                }, children: _jsx(IconApply, { fontSize: 24, color: 'green' }) }), _jsx(SavedQueryContexMenu, { sqd: sqd, manageDefault: manageDefault, setDefaultAsync: () => setDefaultSQDAsync(sqd), deleteAsync: () => deleteSQDAsync(sqd), favManageAsync: () => favManageSQDAsync(sqd) })] }, sqd.id))) }), dataSource.length > initialSQDsMaxItems && searchText.length <= 0 &&
                 _jsx(TMButton, { elementStyle: { display: 'flex', justifyContent: 'flex-end', padding: '10px' }, btnStyle: 'icon', caption: showAllRoot ? "Mostra meno" : `Mostra tutte le ricerche (+${dataSource.length - initialSQDsMaxItems})`, icon: showAllRoot ?
                         _jsx("div", { style: { backgroundColor: TMColors.primaryColor, minWidth: '30px', minHeight: '30px', borderRadius: '10px', display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: _jsx("p", { style: { color: 'white' }, children: `-${dataSource.length - initialSQDsMaxItems}` }) }) :
                         _jsx("div", { style: { backgroundColor: TMColors.primaryColor, minWidth: '30px', minHeight: '30px', borderRadius: '10px', display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: _jsx("p", { style: { color: 'white' }, children: `+${dataSource.length - initialSQDsMaxItems}` }) }), onClick: () => setShowAllRoot(!showAllRoot) })] }));

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

@@ -5,7 +5,7 @@ import TMSavedQuerySelector from './TMSavedQuerySelector';
 import TMTreeSelector from './TMTreeSelector';
 import { TabPanel, Item } from 'devextreme-react/tab-panel';
 import TMSearchQueryPanel, { refreshLastSearch } from './TMSearchQueryPanel';
-import { getSysAllDcmtsSQD, IconProgressReady, IconSavedQuery, IconTree, SDKUI_Globals, SDKUI_Localizator } from '../../../helper';
+import { getSysAllDcmtsSQD, IconProgressReady, IconSavedQuery, IconSearch, IconTree, SDKUI_Globals, SDKUI_Localizator } from '../../../helper';
 import TMSearchResult from './TMSearchResult';
 import TMRecentsManager from '../../grids/TMRecentsManager';
 import { SearchResultContext } from '../../../ts';
@@ -43,7 +43,7 @@ const TMSearch = ({ inputTID, inputSqdID, isExpertMode = SDKUI_Globals.userSetti
                         content: (togglePanelVisibility) => _jsx(TMTreeSelector, { onClose: () => togglePanelVisibility({
                                 id: 'toolbar-item-treeSelector',
                                 icon: 'optionsgear',
-                                tooltipName: 'treeSelector',
+                                tooltipName: SDK_Localizator.Trees,
                                 panelManagerMatrixRowId: 'treeSelector',
                             }), onSelectedTIDChanged: (tid) => {
                                 setCurrentTID(tid);
@@ -66,7 +66,17 @@ const TMSearch = ({ inputTID, inputSqdID, isExpertMode = SDKUI_Globals.userSetti
                         id: 'recentsManager',
                         height: '100%',
                         width: '100%',
-                        content: _jsx(TMRecentsManager, { mruTIDs: mruTIDs, currentMruTID: currentMruTID, deviceType: deviceType, onSelectedTID: (tid) => { setCurrentMruTID(tid); setCurrentTID(tid); }, onDeletedTID: (tid) => {
+                        content: (togglePanelVisibility) => _jsx(TMRecentsManager, { mruTIDs: mruTIDs, currentMruTID: currentMruTID, deviceType: deviceType, onSelectedTID: (tid) => {
+                                setCurrentMruTID(tid);
+                                setCurrentTID(tid);
+                                togglePanelVisibility({
+                                    id: 'toolbar-item-searchQueryPanel',
+                                    icon: _jsx(IconSearch, {}),
+                                    tooltipName: SDKUI_Localizator.Search,
+                                    panelManagerMatrixRowId: 'searchQueryPanel',
+                                    // visible: deviceType === DeviceType.MOBILE
+                                });
+                            }, onDeletedTID: (tid) => {
                                 let newMruTIDS = mruTIDs.slice();
                                 let index = newMruTIDS.findIndex(o => o == tid);
                                 if (index >= 0)
@@ -145,28 +155,27 @@ const TMSearch = ({ inputTID, inputSqdID, isExpertMode = SDKUI_Globals.userSetti
             {
                 id: 'toolbar-item-treeSelector',
                 icon: _jsx(IconTree, {}),
-                tooltipName: 'treeSelector',
+                tooltipName: SDK_Localizator.Trees,
                 panelManagerMatrixRowId: 'treeSelector',
             },
             {
                 id: 'toolbar-item-recentsManager',
                 icon: _jsx(IconProgressReady, {}),
-                tooltipName: 'recentsManager',
+                tooltipName: "Scorciatoie",
                 panelManagerMatrixRowId: 'recentsManager',
             },
             {
                 id: 'toolbar-item-searchQueryPanel',
-                icon: _jsx(IconProgressReady, {}),
-                tooltipName: 'searchQueryPanel',
+                icon: _jsx(IconSearch, {}),
+                tooltipName: SDKUI_Localizator.Search,
                 panelManagerMatrixRowId: 'searchQueryPanel',
                 visible: deviceType === DeviceType.MOBILE
             },
             {
                 id: 'toolbar-item-savedQuery',
                 icon: _jsx(IconSavedQuery, {}),
-                tooltipName: 'savedQuery',
+                tooltipName: SDK_Localizator.SavedQueries,
                 panelManagerMatrixRowId: 'savedQuery',
-                // alternativePanelManagerMatrixRowId: ['distinctValues']
             }
         ]
     };

package/lib/components/features/search/TMSearchQueryPanel.d.ts

@@ -1,14 +1,11 @@
 import React from 'react';
 import { DcmtTypeDescriptor, QueryDescriptor, SavedQueryDescriptor, SearchResultDescriptor } from '@topconsultnpm/sdk-ts-beta';
 import { TID_MID } from '../../../ts';
-import { ITMRightSidebarItem } from '../../base/TMRightSidebar';
 interface ITMSearchQueryPanelProps {
     fromDTD?: DcmtTypeDescriptor;
     SQD?: SavedQueryDescriptor;
-    rightSidebarItems?: ITMRightSidebarItem[];
     isExpertMode?: boolean;
     onBack?: () => void;
-    onRightSidebarItemClick?: (item: string) => void;
     onSqdSaved?: (newSqd: SavedQueryDescriptor) => void;
     onFocusedMetadataChanged?: (tid_mid: TID_MID | undefined) => void;
     onSearchCompleted?: (searchResult: SearchResultDescriptor[], qd: QueryDescriptor | undefined) => void;

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

@@ -22,7 +22,7 @@ import { TMMetadataChooserForm } from '../../choosers/TMMetadataChooser';
 import TMQueryEditor from '../../query/TMQueryEditor';
 import TMSavedQueryForm from './TMSavedQueryForm';
 import { AdvancedMenuButtons } from '../../editors/TMMetadataValues';
-const TMSearchQueryPanel = ({ fromDTD, rightSidebarItems, isExpertMode = SDKUI_Globals.userSettings.advancedSettings.expertMode === 1, SQD, onRightSidebarItemClick, onSearchCompleted, onFocusedMetadataChanged, onSqdSaved, onBack }) => {
+const TMSearchQueryPanel = ({ fromDTD, isExpertMode = SDKUI_Globals.userSettings.advancedSettings.expertMode === 1, SQD, onSearchCompleted, onFocusedMetadataChanged, onSqdSaved, onBack }) => {
     const [confirmQueryParams, ConfirmQueryParamsDialog] = useQueryParametersDialog();
     const [qd, setQd] = useState();
     const [lastQdParams, setLastQdParams] = useState([]);
@@ -36,6 +36,7 @@ const TMSearchQueryPanel = ({ fromDTD, rightSidebarItems, isExpertMode = SDKUI_G
     const [showOrderByConfig, setShowOrderByConfig] = useState(false);
     const [showDistinctValuesPanel, setShowDistinctValuesPanel] = useState(false);
     const [focusedTidMid, setFocusedTidMid] = useState();
+    const [keepStatePanelIsActive, setKeepStatePanelIsActive] = useState(false);
     const deviceType = useDeviceType();
     let initialMaxItems = deviceType === DeviceType.MOBILE ? 8 : 12;
     useEffect(() => {
@@ -100,7 +101,7 @@ const TMSearchQueryPanel = ({ fromDTD, rightSidebarItems, isExpertMode = SDKUI_G
             }
         }
     };
-    return (_jsxs(_Fragment, { children: [_jsxs(TMPanel, { title: fromDTD?.nameLoc ?? SDKUI_Localizator.Search_Metadata, items: rightSidebarItems, onItemClick: onRightSidebarItemClick, onBack: onBack, toolbar: _jsx(_Fragment, { children: (SQD && !showSqdForm) ?
+    return (_jsxs(_Fragment, { children: [_jsxs(TMPanel, { title: fromDTD?.nameLoc ?? SDKUI_Localizator.Search_Metadata, onBack: onBack, keepActiveState: keepStatePanelIsActive, toolbar: _jsx(_Fragment, { children: (SQD && !showSqdForm) ?
                         _jsx(TMDropDownMenu, { backgroundColor: 'white', borderRadius: '3px', content: _jsx(TMButton, { btnStyle: 'icon', caption: 'Altro', icon: _jsx(IconMenuVertical, { color: 'white' }), showTooltip: false }), items: [
                                 { icon: _jsx(IconAddCircleOutline, {}), text: SDKUI_Localizator.SavedQueryNew, onClick: () => { openSqdForm(FormModes.Create); } },
                                 { icon: _jsx(IconEdit, {}), text: SDKUI_Localizator.SavedQueryUpdate, disabled: (SQD && SQD.id == 1), onClick: () => { openSqdForm(FormModes.Update); } },

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { AccessLevels, AccessLevelsEx, AppModules, FileFormats, LayoutModes, SDK_Globals } from '@topconsultnpm/sdk-ts-beta';
-import { IconActivity, IconArchiveDoc, IconBatchUpdate, IconCheckFile, IconCloseCircle, IconConvertFilePdf, IconDelete, IconDotsVerticalCircleOutline, IconDownload, IconExportTo, IconFileDots, IconHide, IconInfo, IconPreview, IconRelation, IconSearch, IconShow, IconSignature, IconStar, IconSubstFile, IconUndo, SDKUI_Localizator, svgToString } from '../../../helper';
+import { IconActivity, IconArchiveDoc, IconBatchUpdate, IconCheckFile, IconCloseCircle, IconConvertFilePdf, IconDelete, IconDotsVerticalCircleOutline, IconDownload, IconExportTo, IconFileDots, IconHide, IconInfo, IconPlatform, IconPreview, IconRelation, IconSearch, IconShow, IconSignature, IconStar, IconSubstFile, IconUndo, SDKUI_Localizator, svgToString } from '../../../helper';
 import ShowAlert from '../../base/TMAlert';
 import { TMMessageBoxManager, ButtonNames, TMExceptionBoxManager } from '../../base/TMPopUp';
 import TMSpinner from '../../base/TMSpinner';
@@ -25,6 +25,7 @@ export const getSelectedDcmtsOrFocused = (selectedItems, focusedItem, fileFormat
     return [];
 };
 export const getCommandsMenuItems = (dtd, selectedItems, focusedItem, context, showFloatingBar, setShowFloatingBar, openFormHandler, downloadDcmtsAsync, runOperationAsync, onRefreshSearchAsync, onRefreshDataRowsAsync, onRefreshAfterAddDcmtToFavs, confirmFormat, confirmAttachments, openTaskFormHandler, openDetailDcmtsFormHandler, openMasterDcmtsFormHandler, openBatchUpdateFormHandler) => {
+    // let ftExplanations = focusedItem?.FTExplanations;
     return [
         {
             icon: svgToString(_jsx(IconFileDots, {})),
@@ -328,7 +329,17 @@ export const getCommandsMenuItems = (dtd, selectedItems, focusedItem, context, s
                     operationType: 'multiRow',
                     disabled: disabledForMultiRow(selectedItems, focusedItem),
                     onClick: async () => { await runOperationAsync(getSelectedDcmtsOrFocused(selectedItems, focusedItem), DcmtOperationTypes.FreeSearchPurge); }
-                }
+                },
+                ...(focusedItem?.FTExplanations !== undefined
+                    ? [{
+                            icon: svgToString(_jsx(IconPlatform, {})),
+                            text: "Dettagli del risultato",
+                            operationType: 'singleRow',
+                            disabled: disabledForSingleRow(selectedItems, focusedItem),
+                            onClick: () => {
+                                TMMessageBoxManager.show({ buttons: [ButtonNames.OK], message: focusedItem?.FTExplanations, title: "Dettagli del risultato" });
+                            }
+                        }] : []),
             ]
         },
         {

package/lib/components/grids/TMRecentsManager.js

@@ -14,31 +14,31 @@ const StyledRecentTidItem = styled.div `
     flex-direction: column;
     align-items: stretch;
     min-width: 0;
-    padding: 10px 10px 0px 10px;
+    padding: 10px;
     position: relative;
+    border-bottom: 1px solid #00A99D; // separator line
 
     &:hover {
         cursor: pointer;
     }
-`;
-const StyledPipe = styled.div `
-    width: 90%;
-    height: 1px;
-    background: #00A99D;
-    margin: 4px auto;
+
+    &:last-child {
+        border-bottom: none; // remove border for last item
+        margin-bottom: 0;
+    }
 `;
 const iconDelete = () => ReactDOMServer.renderToString(_jsx(IconDelete, {}));
 const TMRecentsManager = ({ deviceType, mruTIDs, currentMruTID, onSelectedTID, onDeletedTID }) => {
     const [showDcmtTypeChooser, setShowDcmtTypeChooser] = useState(false);
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { style: { overflowY: deviceType === DeviceType.MOBILE ? 'auto' : undefined, display: 'flex', flexDirection: 'column', padding: '5px' }, children: [_jsxs(StyledRecentTidItem, { id: `tid-${0}`, onClick: () => { setShowDcmtTypeChooser(true); }, children: [_jsx("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', width: '100%' }, children: _jsx("p", { style: {
-                                        color: TMColors.primaryColor,
-                                        fontSize: '1rem',
-                                        fontWeight: 600,
-                                        whiteSpace: 'nowrap',
-                                        overflow: 'hidden',
-                                        textOverflow: 'ellipsis'
-                                    }, children: `${SDKUI_Localizator.AllDcmtTypes} (${DcmtTypeListCacheService.CacheCount(true)})` }) }), _jsx(StyledPipe, {})] }, 0), mruTIDs.map((tid) => {
-                        return (_jsxs(StyledRecentTidItem, { id: `tid-${tid}`, onClick: () => { onSelectedTID?.(tid); }, children: [_jsx("div", { style: { display: 'flex', justifyContent: 'center', width: '100%' }, children: _jsx(TMTidViewer, { tid: tid, color: TMColors.primaryColor, showIcon: false }) }), _jsx(StyledPipe, {}), _jsx(ContextMenu, { dataSource: [{ text: SDKUI_Localizator.Remove, icon: iconDelete(), }], target: `#tid-${tid}`, onItemClick: () => { onDeletedTID?.(tid); } }), currentMruTID == tid &&
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { style: { overflowY: deviceType === DeviceType.MOBILE ? 'auto' : undefined, display: 'flex', flexDirection: 'column', padding: '5px' }, children: [_jsx(StyledRecentTidItem, { id: `tid-${0}`, onClick: () => { setShowDcmtTypeChooser(true); }, children: _jsx("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', width: '100%' }, children: _jsx("p", { style: {
+                                    color: TMColors.primaryColor,
+                                    fontSize: '1rem',
+                                    fontWeight: 600,
+                                    whiteSpace: 'nowrap',
+                                    overflow: 'hidden',
+                                    textOverflow: 'ellipsis'
+                                }, children: `${SDKUI_Localizator.AllDcmtTypes} (${DcmtTypeListCacheService.CacheCount(true)})` }) }) }, 0), mruTIDs.map((tid) => {
+                        return (_jsxs(StyledRecentTidItem, { id: `tid-${tid}`, onClick: () => { onSelectedTID?.(tid); }, children: [_jsx("div", { style: { display: 'flex', justifyContent: 'center', width: '100%' }, children: _jsx(TMTidViewer, { tid: tid, color: TMColors.primaryColor, showIcon: false }) }), _jsx(ContextMenu, { dataSource: [{ text: SDKUI_Localizator.Remove, icon: iconDelete(), }], target: `#tid-${tid}`, onItemClick: () => { onDeletedTID?.(tid); } }), currentMruTID == tid &&
                                     _jsx("div", { style: {
                                             width: '24px',
                                             height: '24px',

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@topconsultnpm/sdkui-react-beta",
-    "version": "6.13.19",
+    "version": "6.13.21",
     "description": "",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
@@ -42,7 +42,7 @@
         "lib"
     ],
     "dependencies": {
-        "@topconsultnpm/sdk-ts-beta": "6.13.1",
+        "@topconsultnpm/sdk-ts-beta": "6.13.2",
         "buffer": "^6.0.3",
         "devextreme": "24.2.6",
         "devextreme-react": "24.2.6",