@topconsultnpm/sdkui-react-beta 6.13.39 → 6.13.41

package/lib/components/base/TMPanel.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
 import { IconArrowLeft, IconClearButton, IconWindowMaximize, IconWindowMinimize, isPositiveNumber, SDKUI_Globals, SDKUI_Localizator } from '../../helper';
 import TMButton from './TMButton';
@@ -68,7 +68,6 @@ const StyledPanelContent = styled.div `
 const TMPanel = ({ allowMaximize = true, color, backgroundColor, backgroundColorContainer, children, showHeader = true, title, totalItems, displayedItemsCount, toolbar, padding = '5px', keepActiveState = false, isVisible = true, 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(() => {
@@ -83,11 +82,6 @@ const TMPanel = ({ allowMaximize = true, color, backgroundColor, backgroundColor
         if (!keepActiveState)
             setIsActive(false);
     };
-    useLayoutEffect(() => {
-        if (titleRowRef.current) {
-            setMinWidth(titleRowRef.current.offsetWidth);
-        }
-    }, [title, displayedItemsCount, totalItems, onBack]);
     // handler for external maximize management
     const handleMaximize = () => {
         setIsMaximized(prevState => {
@@ -99,7 +93,6 @@ const TMPanel = ({ allowMaximize = true, color, backgroundColor, backgroundColor
         });
     };
     return (_jsxs(StyledPanelContainer, { "$isMaximized": onMaximize ? false : isMaximized, style: {
-            ...(minWidth ? { minWidth } : {}),
             visibility: isVisible ? 'visible' : 'hidden',
         }, children: [showHeader &&
                 _jsx(StyledPanelHeader, { "$backgroundColor": backgroundColor, "$color": color, "$isActive": isActive, onDoubleClick: () => {
@@ -107,8 +100,26 @@ const TMPanel = ({ allowMaximize = true, color, backgroundColor, backgroundColor
                             onHeaderDoubleClick();
                         else
                             allowMaximize && handleMaximize();
-                    }, 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: {
+                    }, tabIndex: -1, onFocus: handleFocus, onBlur: handleBlur, onClick: handleFocus, children: _jsxs("div", { style: {
+                            display: 'flex',
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            width: '100%',
+                            minWidth: 0
+                        }, children: [_jsxs("div", { ref: titleRowRef, style: {
+                                    display: 'flex',
+                                    flexDirection: 'row',
+                                    alignItems: 'center',
+                                    gap: '8px',
+                                    flex: 1,
+                                    minWidth: 0
+                                }, children: [onBack &&
+                                        _jsx(TMButton, { btnStyle: 'icon', icon: _jsx(IconArrowLeft, {}), caption: SDKUI_Localizator.Back, onClick: onBack }), _jsx("div", { style: {
+                                            display: 'flex',
+                                            flexDirection: 'row',
+                                            alignItems: 'center',
+                                            overflow: 'hidden',
+                                        }, children: _jsxs("p", { style: {
                                                 whiteSpace: 'nowrap',
                                                 overflow: 'hidden',
                                                 textOverflow: 'ellipsis',
@@ -117,7 +128,14 @@ const TMPanel = ({ allowMaximize = true, color, backgroundColor, backgroundColor
                                                     ? ` (${displayedItemsCount} / ${totalItems})`
                                                     : isPositiveNumber(totalItems)
                                                         ? ` (${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
+                                                        : ''] }) })] }), _jsxs("div", { style: {
+                                    display: 'flex',
+                                    flexDirection: 'row',
+                                    alignItems: 'center',
+                                    gap: '5px',
+                                    flexShrink: 0,
+                                    marginLeft: 10
+                                }, 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?.(); } })] })] }) }), _jsx(StyledPanelContent, { "$height": showHeader ? "calc(100% - 40px)" : "100%", "$padding": padding, "$backgroundColor": backgroundColorContainer ?? `#FFFFFF`, tabIndex: -1, onFocus: handleFocus, onBlur: handleBlur, onClick: handleFocus, children: children })] }));
 };

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

@@ -5,6 +5,7 @@ type TMPanelManagerProps = {
     showToolbar?: boolean;
     toolbarMode?: number;
     gutters?: number;
+    minPanelPercent?: number;
 };
 declare const TMPanelManager: (props: TMPanelManagerProps) => import("react/jsx-runtime").JSX.Element;
 export default TMPanelManager;

package/lib/components/base/TMPanelManager.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { flattenPanels, isAtLeastOnePanelVisible, isPanelArray } from './TMPanelManagerUtils';
 import { SDKUI_Globals, IconInfo, SDKUI_Localizator } from '../../helper';
 import { useDeviceType, DeviceType } from './TMDeviceProvider';
 import TMPanel from './TMPanel';
 import TMPanelManagerToolbar from './TMPanelManagerToolbar';
 const TMPanelManager = (props) => {
-    const { panels, initialMobilePanelId, showToolbar = true, toolbarMode = 0, gutters = SDKUI_Globals.userSettings.themeSettings.gutters } = props;
+    const { panels, initialMobilePanelId, showToolbar = true, toolbarMode = 0, gutters = SDKUI_Globals.userSettings.themeSettings.gutters, minPanelPercent = 5 } = props;
     const deviceType = useDeviceType();
     let isMobile = useMemo(() => { return deviceType === DeviceType.MOBILE; }, [deviceType]);
     const allPanels = useMemo(() => flattenPanels(panels), [panels]);
@@ -15,9 +15,8 @@ const TMPanelManager = (props) => {
         allPanels.forEach(p => map.set(p.fullId, p));
         return map;
     }, [allPanels]);
-    const panelRefs = useRef({});
     // Active buttons state & panel map
-    const [activeButtons, setActiveButtons] = useState(() => Object.fromEntries(allPanels.map(p => [p.fullId, p.config.toolbarOptions?.isActive ?? false])));
+    const [activeButtons, setActiveButtons] = useState({});
     const [originalSizes, setOriginalSizes] = useState(new Map());
     const [panelsState, setPanelsState] = useState(new Map());
     const [maximizedPanelPath, setMaximizedPanelPath] = useState([]);
@@ -61,6 +60,12 @@ const TMPanelManager = (props) => {
         setOriginalSizes(newOriginalSizes);
         setPanelsState(newState);
     }, [panels]);
+    useEffect(() => {
+        if (allPanels.length > 0) {
+            const initialButtons = Object.fromEntries(allPanels.map(p => [p.fullId, p.config.toolbarOptions?.isActive ?? false]));
+            setActiveButtons(initialButtons);
+        }
+    }, [allPanels]);
     useEffect(() => {
         // If there are no original sizes available, exit early
         if (!originalSizes.size)
@@ -143,12 +148,12 @@ const TMPanelManager = (props) => {
                 let newCurrent = Math.min(currentSize + deltaPercent, 100);
                 let newNext = Math.min(nextSize - deltaPercent, 100);
                 // Enforce minimum panel size
-                if (newCurrent < 5) {
-                    newCurrent = 5;
+                if (newCurrent < minPanelPercent) {
+                    newCurrent = minPanelPercent;
                     newNext = total - newCurrent;
                 }
-                else if (newNext < 5) {
-                    newNext = 5;
+                else if (newNext < minPanelPercent) {
+                    newNext = minPanelPercent;
                     newCurrent = total - newNext;
                 }
                 // Safely get current and next panel data
@@ -219,7 +224,7 @@ const TMPanelManager = (props) => {
                 return newActive;
             });
         }
-    }, [isMobile]);
+    }, [isMobile, panelMap]);
     // Handler for starting to drag a column divider (for resizing panels horizontally)
     const onColumnMouseDown = (panelKey) => {
         setIsColumnDragging(panelKey); // Set the state to indicate which column is being dragged
@@ -404,11 +409,9 @@ const TMPanelManager = (props) => {
                 flexGrow: 1,
                 overflow: 'auto',
             };
-            return (_jsxs("div", { ref: el => {
-                    panelRefs.current[fullId] = el;
-                }, style: panelStyle, children: [_jsx("div", { style: contentStyle, children: hasChildren
+            return (_jsxs("div", { style: panelStyle, children: [_jsx("div", { style: contentStyle, children: hasChildren
                             ? renderPanels(panel.contentOptions.content, fullId, 'vertical')
-                            : panel.contentOptions?.panelContainer ? _jsx(TMPanel, { title: panel.contentOptions.panelContainer.title, totalItems: panel.contentOptions.panelContainer.totalItems, displayedItemsCount: panel.contentOptions.panelContainer.displayedItemsCount, onClose: () => handleTogglePanel(fullId), onMaximize: () => handleToggleMaximize(fullId), onHeaderDoubleClick: () => handleToggleMaximize(fullId), allowMaximize: !isMobile, children: typeof panel.contentOptions.content === "function" ? panel.contentOptions.content(handleTogglePanel, handleToggleMaximize, handleVisibilityButton, handleDisableButton) : panel.contentOptions.content })
+                            : panel.contentOptions?.panelContainer ? _jsx(TMPanel, { title: panel.contentOptions.panelContainer.title, totalItems: panel.contentOptions.panelContainer.totalItems, displayedItemsCount: panel.contentOptions.panelContainer.displayedItemsCount, onBack: panel.contentOptions.panelContainer.onBack, onClose: () => handleTogglePanel(fullId), onMaximize: () => handleToggleMaximize(fullId), onHeaderDoubleClick: () => handleToggleMaximize(fullId), allowMaximize: !isMobile, toolbar: panel.contentOptions.panelContainer.toolbar, children: typeof panel.contentOptions.content === "function" ? panel.contentOptions.content(handleTogglePanel, handleToggleMaximize, handleVisibilityButton, handleDisableButton) : panel.contentOptions.content })
                                 :
                                     typeof panel.contentOptions.content === "function" ? panel.contentOptions.content(handleTogglePanel, handleToggleMaximize, handleVisibilityButton, handleDisableButton) : panel.contentOptions.content }), !isLastVisible && isActive && maximizedPanelPath.length === 0 && (_jsx("div", { style: {
                             cursor: direction === 'horizontal' ? 'col-resize' : 'row-resize',
@@ -431,16 +434,16 @@ const TMPanelManager = (props) => {
                         } }))] }, fullId));
         });
     };
-    return (_jsxs("div", { style: { display: 'flex', flexDirection: isMobile ? 'column' : 'row', height: '100%', width: '100%', gap: gutters }, children: [_jsx("div", { style: {
+    return (_jsxs("div", { style: { display: 'flex', flexDirection: isMobile ? 'column' : 'row', height: '100%', width: '100%', gap: !isMobile ? gutters : 0 }, children: [_jsx("div", { style: {
                     display: 'flex',
                     flexGrow: 1,
-                    width: isAtLeastOnePanelVisible(activeButtons) ? `calc(100% - ${showToolbar ? (isMobile ? 0 : 60) : 0}px)` : '0%',
-                    height: isAtLeastOnePanelVisible(activeButtons) ? `calc(100% - ${isMobile ? 60 : 0}px)` : '0%',
+                    width: isAtLeastOnePanelVisible(activeButtons) ? `calc(100% - ${showToolbar ? (isMobile ? 0 : 70) : 0}px)` : '0%',
+                    height: isAtLeastOnePanelVisible(activeButtons) ? `calc(100% - ${isMobile ? 55 : 0}px)` : '0%',
                     visibility: isAtLeastOnePanelVisible(activeButtons) ? 'visible' : 'hidden',
                     flexDirection: 'row',
                 }, children: renderPanels(panels, '', 'horizontal') }), !isAtLeastOnePanelVisible(activeButtons) && (_jsxs("div", { style: {
-                    width: '100%',
-                    height: isMobile ? 'calc(100% - 60px)' : '100%',
+                    width: `calc(100% - ${showToolbar ? (isMobile ? 0 : 70) : 0}px)`,
+                    height: `calc(100% - ${isMobile ? 55 : 0}px)`,
                     display: 'flex',
                     flexDirection: 'column',
                     alignItems: 'center',
@@ -451,14 +454,14 @@ const TMPanelManager = (props) => {
                     color: '#555',
                     fontSize: '18px',
                 }, children: [_jsx(IconInfo, { style: { fontSize: 50 } }), _jsx("div", { children: SDKUI_Localizator.NoPanelSelected })] })), showToolbar && _jsx("div", { style: toolbarMode === 0 ? {
-                    width: isMobile ? '100%' : '60px',
-                    height: isMobile ? '60px' : '100%',
+                    width: isMobile ? '100%' : '50px',
+                    height: isMobile ? '50px' : '100%',
                     borderLeft: '1px solid #ccc',
                     display: 'flex',
                     flexDirection: isMobile ? 'row' : 'column',
-                    padding: '8px',
+                    padding: '10px',
                     boxSizing: 'border-box',
-                    gap: '6px',
+                    gap: '10px',
                     backgroundColor: '#f9f9f9',
                 } : {
                     display: 'flex',

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

@@ -5,6 +5,8 @@ import { SDK_Globals } from '@topconsultnpm/sdk-ts-beta';
 import { TMExceptionBoxManager } from '../../base/TMPopUp';
 import TMSpinner from '../../base/TMSpinner';
 import TMBlogs from '../../grids/TMBlogs';
+import { TMNothingToShow } from './TMDcmtPreview';
+import { IconBoard } from '../../../helper';
 const TMDcmtBlog = ({ tid, did }) => {
     const [blogsDatasource, setBlogsDatasource] = useState([]);
     useEffect(() => {
@@ -26,7 +28,8 @@ const TMDcmtBlog = ({ tid, did }) => {
             TMSpinner.hide();
         }
     };
-    return (_jsx(StyledContainer, { children: _jsx(StyledSectionContainer, { style: { position: 'relative' }, children: _jsx(StyledBoardContainer, { children: _jsx(TMBlogs, { id: "dcmt-blog", allData: blogsDatasource, showExtendedAttachments: false }) }) }) }));
+    return (_jsx(StyledContainer, { children: _jsx(StyledSectionContainer, { style: { position: 'relative' }, children: _jsx(StyledBoardContainer, { children: !did ? _jsx(TMNothingToShow, { text: 'Nessun documento selezionato.', secondText: 'Bacheca non disponibile.', icon: _jsx(IconBoard, { fontSize: 96 }) }) :
+                    _jsx(TMBlogs, { id: "dcmt-blog", allData: blogsDatasource, showExtendedAttachments: false }) }) }) }));
 };
 export default TMDcmtBlog;
 const StyledContainer = styled.div ` user-select: none; overflow: hidden; background-color: #ffffff; width: calc(100%); height: calc(100%); display: flex; gap: 10px; `;

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

@@ -1,11 +1,11 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { DataColumnTypes, DcmtTypeListCacheService, MetadataDataDomains, MetadataFormats, RelationCacheService, RelationTypes, ResultTypes, SDK_Globals, SystemMIDs } from '@topconsultnpm/sdk-ts-beta';
 import { ContextMenu } from 'devextreme-react';
 import { TMNothingToShow } from './TMDcmtPreview';
 import TMDcmtForm from './TMDcmtForm';
 import TMSearchResult from '../search/TMSearchResult';
-import { genUniqueId, getExceptionMessage, IconFolder, IconShow, IconPreview, IconBoard, IconDcmtTypeSys, IconCheckFile, IconDetailDcmts, SDKUI_Localizator, svgToString, IconMail, IconDcmtTypeOnlyMetadata, IconCopy, IconMultipleSelection, IconMenuVertical, SDKUI_Globals } from '../../../helper';
+import { genUniqueId, getExceptionMessage, IconFolder, IconShow, IconBoard, IconDcmtTypeSys, IconCheckFile, IconDetailDcmts, SDKUI_Localizator, svgToString, IconMail, IconDcmtTypeOnlyMetadata, IconCopy, IconMultipleSelection, IconMenuVertical, IconSearchCheck, IconDataList } from '../../../helper';
 import { hasDetailRelations } from '../../../helper/dcmtsHelper';
 import { FormModes, SearchResultContext } from '../../../ts';
 import { TMColors } from '../../../utils/theme';
@@ -13,7 +13,6 @@ import { StyledDivHorizontal, StyledBadge } from '../../base/Styled';
 import ShowAlert from '../../base/TMAlert';
 import TMButton from '../../base/TMButton';
 import { DeviceType } from '../../base/TMDeviceProvider';
-import { TMSplitterLayout, TMLayoutItem } from '../../base/TMLayout';
 import { TMExceptionBoxManager } from '../../base/TMPopUp';
 import TMSpinner from '../../base/TMSpinner';
 import { TMLayoutWaitingContainer } from '../../base/TMWaitPanel';
@@ -24,8 +23,7 @@ import TMDataListItemViewer from '../../viewers/TMDataListItemViewer';
 import { TMDcmtTypeTooltip } from '../../viewers/TMTidViewer';
 import TMTreeView from '../../base/TMTreeView';
 import TMDcmtIcon from './TMDcmtIcon';
-import TMPanel from '../../base/TMPanel';
-import TMCommandsPanel from '../../sidebar/TMCommandsPanel';
+import TMPanelManager from '../../base/TMPanelManager';
 let abortController = new AbortController();
 const TMMasterDetailDcmts = ({ deviceType, inputDcmts, isForMaster, showCurrentDcmtIndicator = true, allowNavigation, canNext, canPrev, onNext, onPrev, onBack, appendMasterDcmts, onTaskCreateRequest }) => {
     const [id, setID] = useState('');
@@ -380,28 +378,137 @@ const TMMasterDetailDcmts = ({ deviceType, inputDcmts, isForMaster, showCurrentD
     const toolbar = _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '10px' }, children: [allowMultipleSelection && _jsx("p", { style: { color: TMColors.colorHeader, textAlign: 'center', padding: '1px 4px', borderRadius: '3px', display: 'flex' }, children: `${selectedItems.length} selezionati` }), _jsx(TMButton, { btnStyle: 'icon', caption: 'Selezione multipla', icon: _jsx(IconMultipleSelection, { fontSize: 16, color: allowMultipleSelection ? TMColors.tertiary : 'white' }), onClick: () => setAllowMultipleSelection(!allowMultipleSelection) }), allowNavigation && canPrev != undefined && _jsx(TMSaveFormButtonPrevious, { btnStyle: 'icon', iconColor: 'white', isModified: false, formMode: FormModes.ReadOnly, canPrev: canPrev, onPrev: onPrev }), allowNavigation && canNext != undefined && _jsx(TMSaveFormButtonNext, { btnStyle: 'icon', iconColor: 'white', isModified: false, formMode: FormModes.ReadOnly, canNext: canNext, onNext: onNext }), _jsx(IconMenuVertical, { id: `commands-detail-${id}`, color: 'white', cursor: 'pointer' }), _jsx(ContextMenu, { showEvent: 'click', dataSource: commandsMenuItems, target: `#commands-detail-${id}` })] });
     const getTitle = () => isForMaster ? `${SDKUI_Localizator.DcmtsMaster} - ${dtdMaster?.nameLoc}` : SDKUI_Localizator.DcmtsDetail;
     const isMobile = deviceType === DeviceType.MOBILE;
-    return (_jsxs("div", { style: {
-            display: 'flex',
-            flexDirection: isMobile ? 'column' : 'row',
-            justifyContent: 'space-between',
-            gap: SDKUI_Globals.userSettings.themeSettings.gutters,
-            width: '100%',
-            height: '100%',
-        }, children: [_jsx("div", { style: { flex: 1, minWidth: 0, height: '100%' }, children: _jsx(TMLayoutWaitingContainer, { direction: 'vertical', showWaitPanel: showWaitPanel, showWaitPanelPrimary: showPrimary, waitPanelTitle: waitPanelTitle, waitPanelTextPrimary: waitPanelTextPrimary, waitPanelValuePrimary: waitPanelValuePrimary, waitPanelMaxValuePrimary: waitPanelMaxValuePrimary, isCancelable: true, abortController: abortController, children: _jsxs(TMSplitterLayout, { direction: 'horizontal', overflow: 'visible', separatorSize: SDKUI_Globals.userSettings.themeSettings.gutters, separatorColor: 'transparent', showSeparator: focusedItem != undefined, separatorActiveColor: 'transparent', min: ['0', '0'], start: focusedItem && (showDcmtForm || showPreview || showBoard || showSysMetadata) ? deviceType != DeviceType.MOBILE ? ["40%", "60%"] : ["0%", "100%"] : ["100%", "0%"], children: [_jsx(TMPanel, { title: getTitle(), toolbar: toolbar, onBack: onBack, children: isLoading ? _jsx(_Fragment, {}) :
-                                    data.length <= 0
-                                        ?
-                                            _jsx(TMNothingToShow, { text: getTitle(), secondText: SDKUI_Localizator.NoDataToDisplay, icon: isForMaster ? _jsx(IconDetailDcmts, { fontSize: 96, transform: 'scale(-1, 1)' }) : _jsx(IconDetailDcmts, { fontSize: 96 }) })
-                                        :
-                                            _jsx(TMTreeView, { dataSource: data, allowMultipleSelection: allowMultipleSelection, calculateItemsForNode: calculateItemsForNode, itemRender: renderItem, focusedItem: focusedItem, selectedItems: selectedItems, onFocusedItemChanged: handleFocusedItemChanged, onSelectionChanged: handleSelectedItemsChanged, onDataChanged: (items) => setData(updateHiddenProperty(items)) }) }), _jsx(TMLayoutItem, { children: focusedItem?.isDcmt ?
-                                    _jsx(TMDcmtForm, { TID: focusedItem?.tid, DID: focusedItem.did, isClosable: deviceType !== DeviceType.MOBILE, allowNavigation: false, allowRelations: deviceType !== DeviceType.MOBILE, showDcmtFormSidebar: deviceType === DeviceType.MOBILE, showPreview: showPreview, showBoard: showBoard, showSysMetadata: showSysMetadata, showDcmtForm: showDcmtForm, onClose: () => { setShowDcmtForm(false); }, onClosePreviewPanel: () => { setShowPreview(false); } }) :
-                                    _jsx(TMSearchResult, { context: SearchResultContext.METADATA_SEARCH, searchResults: focusedItem?.searchResult ?? [], showSearchResultSidebar: false, onClose: () => { setShowDcmtForm(false); }, onClosePreviewPanel: () => { setShowPreview(false); }, onTaskCreateRequest: onTaskCreateRequest }) })] }, "TMDetails-panel") }) }), _jsx(TMCommandsPanel, { isMobile: isMobile, items: [
-                    { icon: _jsx(IconShow, {}), selected: showPreview, onClick: () => { setShowPreview(!showPreview); } },
-                    { icon: _jsx(IconPreview, {}), selected: showDcmtForm, onClick: () => { setShowDcmtForm(!showDcmtForm); } },
-                    { icon: _jsx(IconBoard, {}), selected: showBoard, onClick: () => { setShowSysMetadata(false); setShowBoard(!showBoard); } },
-                    { icon: _jsx(IconDcmtTypeSys, {}), selected: showSysMetadata, onClick: () => { setShowBoard(false); setShowSysMetadata(!showSysMetadata); } },
-                    { icon: _jsx(IconCheckFile, {}), selected: showZeroDcmts, onClick: () => { setShowZeroDcmts(!showZeroDcmts); } },
-                    { icon: _jsx(IconDetailDcmts, { transform: 'scale(-1, 1)' }), disabled: !focusedItem?.isDcmt, onClick: () => { appendMasterDcmts?.(focusedItem?.tid, focusedItem?.did); } }
-                ] })] }));
+    const renderTMTreeView = (handleTogglePanel) => _jsx(_Fragment, { children: isLoading ? _jsx(_Fragment, {}) :
+            data.length <= 0
+                ?
+                    _jsx(TMNothingToShow, { text: getTitle(), secondText: SDKUI_Localizator.NoDataToDisplay, icon: isForMaster ? _jsx(IconDetailDcmts, { fontSize: 96, transform: 'scale(-1, 1)' }) : _jsx(IconDetailDcmts, { fontSize: 96 }) })
+                :
+                    _jsx(TMTreeView, { dataSource: data, allowMultipleSelection: allowMultipleSelection, calculateItemsForNode: calculateItemsForNode, itemRender: renderItem, focusedItem: focusedItem, selectedItems: selectedItems, onFocusedItemChanged: handleFocusedItemChanged, onSelectionChanged: handleSelectedItemsChanged, onDataChanged: (items) => setData(updateHiddenProperty(items)) }) });
+    const renderTMFormOrResult = useMemo(() => (handleTogglePanel) => {
+        return (_jsx(_Fragment, { children: focusedItem?.isDcmt ?
+                _jsx(TMDcmtForm, { TID: focusedItem?.tid, DID: focusedItem.did, isClosable: deviceType !== DeviceType.MOBILE, allowNavigation: false, allowRelations: deviceType !== DeviceType.MOBILE, showDcmtFormSidebar: deviceType === DeviceType.MOBILE, showPreview: showPreview, showBoard: showBoard, showSysMetadata: showSysMetadata, showDcmtForm: showDcmtForm, onClose: () => { setShowDcmtForm(false); }, onClosePreviewPanel: () => { setShowPreview(false); } }) :
+                _jsx(TMSearchResult, { context: SearchResultContext.METADATA_SEARCH, allowFloatingBar: false, searchResults: focusedItem?.searchResult ?? [], showPreview: showPreview, showSearchResultSidebar: false, onClose: () => { setShowDcmtForm(false); }, onClosePreviewPanel: () => {
+                        setShowPreview(false);
+                        handleTogglePanel("commandPreview");
+                    }, onTaskCreateRequest: onTaskCreateRequest }) }));
+    }, [focusedItem, showPreview, showBoard, showSysMetadata, showDcmtForm, deviceType]);
+    const panelsConfig = [
+        {
+            id: 'TMTreeView',
+            name: getTitle(),
+            toolbarOptions: { icon: _jsx(IconDataList, { fontSize: 24 }), visible: true, isActive: true, orderNumber: 1 },
+            type: 'content',
+            contentOptions: {
+                visible: true,
+                height: '100%',
+                width: '20%',
+                content: renderTMTreeView,
+                panelContainer: {
+                    title: getTitle(),
+                    allowMaximize: !isMobile,
+                    onBack: onBack,
+                    toolbar: toolbar
+                },
+            },
+        },
+        {
+            id: 'TMFormOrResult',
+            name: focusedItem?.isDcmt ? "Form del documento" : SDKUI_Localizator.SearchResult,
+            toolbarOptions: { icon: _jsx(IconSearchCheck, { fontSize: 24 }), visible: true, isActive: true, orderNumber: 2 },
+            type: 'content',
+            contentOptions: {
+                visible: true,
+                height: '100%',
+                width: '20%',
+                content: renderTMFormOrResult,
+            },
+        },
+        {
+            id: 'commandPreview',
+            name: SDKUI_Localizator.PreviewDocument,
+            toolbarOptions: {
+                icon: _jsx(IconShow, { fontSize: 24 }),
+                visible: true,
+                disabled: !focusedItem,
+                isActive: showPreview,
+                orderNumber: 3,
+            },
+            type: 'button',
+            buttonOptions: {
+                onClick: () => {
+                    setShowPreview(prev => !prev);
+                },
+            },
+        },
+        {
+            id: 'commandSysMetadata',
+            name: SDKUI_Localizator.MetadataSystem,
+            toolbarOptions: {
+                icon: _jsx(IconDcmtTypeSys, { fontSize: 24 }),
+                visible: true,
+                disabled: !focusedItem,
+                isActive: showSysMetadata,
+                orderNumber: 3,
+            },
+            type: 'button',
+            buttonOptions: {
+                onClick: () => {
+                    setShowSysMetadata(prev => !prev);
+                },
+            },
+        },
+        {
+            id: 'commandBoard',
+            name: SDKUI_Localizator.BlogCase,
+            toolbarOptions: {
+                icon: _jsx(IconBoard, { fontSize: 24 }),
+                disabled: !focusedItem,
+                visible: true,
+                isActive: showBoard,
+                orderNumber: 3,
+            },
+            type: 'button',
+            buttonOptions: {
+                onClick: () => {
+                    setShowBoard(prev => !prev);
+                },
+            },
+        },
+        {
+            id: 'commandZeroDcmts',
+            name: "Consenti dettagli con 0 documenti",
+            toolbarOptions: {
+                icon: _jsx(IconCheckFile, { fontSize: 24 }),
+                visible: true,
+                isActive: showZeroDcmts,
+                orderNumber: 3,
+            },
+            type: 'button',
+            buttonOptions: {
+                onClick: () => {
+                    setShowZeroDcmts(prev => !prev);
+                },
+            },
+        },
+        {
+            id: 'commandMasterDcmts',
+            name: SDKUI_Localizator.DcmtsMaster,
+            toolbarOptions: {
+                icon: _jsx(IconDetailDcmts, { transform: 'scale(-1, 1)', fontSize: 24 }),
+                disabled: !focusedItem?.isDcmt,
+                visible: true,
+                isActive: false,
+                orderNumber: 3,
+            },
+            type: 'button',
+            buttonOptions: {
+                onClick: () => {
+                    appendMasterDcmts?.(focusedItem?.tid, focusedItem?.did);
+                },
+            },
+        },
+    ];
+    return (_jsx(TMLayoutWaitingContainer, { direction: 'vertical', showWaitPanel: showWaitPanel, showWaitPanelPrimary: showPrimary, waitPanelTitle: waitPanelTitle, waitPanelTextPrimary: waitPanelTextPrimary, waitPanelValuePrimary: waitPanelValuePrimary, waitPanelMaxValuePrimary: waitPanelMaxValuePrimary, isCancelable: true, abortController: abortController, children: _jsx(TMPanelManager, { panels: panelsConfig, initialMobilePanelId: 'TMTreeView', toolbarMode: 1 }) }));
 };
 export default TMMasterDetailDcmts;
 function getMetadataKeys(obj) {

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

@@ -4,7 +4,7 @@ import styled from 'styled-components';
 import { SharingModes, SDK_Globals, SDK_Localizator } from '@topconsultnpm/sdk-ts-beta';
 import { LocalizeSharingModes } from '../../../helper/Enum_Localizator';
 import ContextMenu from 'devextreme-react/cjs/context-menu';
-import { SDKUI_Localizator, Globalization, svgToString, IconStar, IconDelete, IconDashboard, IconSavedQuery, IconApply, IconInfo } from '../../../helper';
+import { SDKUI_Localizator, Globalization, svgToString, IconStar, IconDelete, IconDashboard, IconSavedQuery, IconApply, IconInfo, IconCloseOutline } from '../../../helper';
 import { TMColors } from '../../../utils/theme';
 import ShowAlert from '../../base/TMAlert';
 import TMButton from '../../base/TMButton';
@@ -13,6 +13,8 @@ import TMSpinner from '../../base/TMSpinner';
 import TMTooltip from '../../base/TMTooltip';
 import { TMSearchBar } from '../../sidebar/TMHeader';
 import { DeviceType, useDeviceType } from '../../base/TMDeviceProvider';
+import { StyledDivHorizontal, StyledOffCanvasPanel } from '../../base/Styled';
+import { useOutsideClick } from '../../../hooks/useOutsideClick';
 const StyledSqdItem = styled.div `
     display: flex;
     flex-direction: column;
@@ -33,9 +35,13 @@ const StyledSqdItem = styled.div `
         left: -2px;
         top: 50%;
         transform: translateY(-50%);
-        opacity: ${({ $isMobile }) => ($isMobile ? 1 : 0)};
+        opacity: 0;
         transition: opacity 0.2s;
-        pointer-events: ${({ $isMobile }) => ($isMobile ? 'auto' : 'none')};
+        pointer-events: none;
+        // On mobile, never show
+        ${({ $isMobile }) => $isMobile && `
+            display: none !important;
+        `}
     }
 
     &:hover .info-icon {
@@ -62,13 +68,31 @@ export const getTooltipBySqd = (sqd) => {
     return (_jsxs("div", { style: { textAlign: "left" }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 10 }, children: [_jsx(IconSavedQuery, { color: getSharingModeColor(sqd.sharingMode), fontSize: 20, style: { flexShrink: 0 } }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsxs("div", { children: ["ID: ", sqd.id] }), _jsxs("div", { children: ["Master TID: ", sqd.masterTID] }), sqd.description && _jsx("div", { children: `${SDKUI_Localizator.Description}: ${sqd.description}` })] })] }), _jsx("hr", {}), _jsxs("div", { children: [SDKUI_Localizator.OwnerName, ": ", sqd.ownerName, " (", sqd.ownerID, ")"] }), _jsx("div", { children: LocalizeSharingModes(sqd.sharingMode) }), _jsxs("div", { children: ["Default: ", sqd.isDefault == 1 ? SDKUI_Localizator.Yes : SDKUI_Localizator.No] }), _jsxs("div", { children: ["Filtro semplice", ": ", sqd.isEasyWhere == 1 ? SDKUI_Localizator.Yes : SDKUI_Localizator.No] }), _jsxs("div", { children: ["Esegui ricerca immediatamente", ": ", sqd.runSearchWhenSelected == 1 ? SDKUI_Localizator.Yes : SDKUI_Localizator.No] }), _jsx("hr", {}), _jsxs("div", { children: [SDKUI_Localizator.CreationTime, ": ", Globalization.getDateTimeDisplayValue(sqd.creationTime)] }), _jsxs("div", { children: [SDKUI_Localizator.LastUpdateTime, ": ", Globalization.getDateTimeDisplayValue(sqd.lastUpdateTime)] })] }));
 };
 const initialSQDsMaxItems = 12;
-const SavedQueryContexMenu = ({ sqd, manageDefault, deleteAsync, favManageAsync, setDefaultAsync }) => _jsx(ContextMenu, { items: manageDefault ? [
-        { text: SDKUI_Localizator.SetAsDefault2, icon: svgToString(_jsx(IconStar, { color: 'rgb(248, 215, 117)' })) },
-        { text: SDKUI_Localizator.Delete, disabled: (sqd.id == 1), icon: svgToString(_jsx(IconDelete, {})) },
-        { text: SDKUI_Localizator.AddToHomePage, disabled: (sqd.id == 1), icon: svgToString(_jsx(IconDashboard, {})) }
-    ] : [
-        { text: SDKUI_Localizator.Delete, disabled: (sqd.id == 1), icon: svgToString(_jsx(IconDelete, {})) },
-        { text: SDKUI_Localizator.AddToHomePage, disabled: (sqd.id == 1), icon: svgToString(_jsx(IconDashboard, {})) }
+const SavedQueryContexMenu = ({ sqd, manageDefault, isMobile, deleteAsync, favManageAsync, setDefaultAsync, setInfoSQD }) => _jsx(ContextMenu, { items: [
+        ...(manageDefault ? [{
+                text: SDKUI_Localizator.SetAsDefault2,
+                icon: svgToString(_jsx(IconStar, { color: 'rgb(248, 215, 117)' })),
+                onClick: () => setDefaultAsync(sqd)
+            }] : []),
+        {
+            text: SDKUI_Localizator.Delete,
+            disabled: (sqd.id == 1),
+            icon: svgToString(_jsx(IconDelete, {})),
+            onClick: () => deleteAsync(sqd)
+        },
+        {
+            text: SDKUI_Localizator.AddToHomePage,
+            disabled: (sqd.id == 1),
+            icon: svgToString(_jsx(IconDashboard, {})),
+            onClick: () => favManageAsync?.(sqd)
+        },
+        ...(isMobile ? [
+            {
+                text: SDKUI_Localizator.About,
+                icon: svgToString(_jsx(IconInfo, { color: TMColors.info })),
+                onClick: () => { setInfoSQD?.(sqd); }
+            }
+        ] : [])
     ], target: `#sqd-item-${sqd.id}`, onItemClick: (e) => {
         if (e.itemIndex == 0)
             setDefaultAsync?.(sqd);
@@ -82,8 +106,12 @@ const TMSavedQuerySelector = React.memo(({ items, selectedId, allowShowSearch =
     const [selectedItem, setSelectedItem] = useState();
     const [searchText, setSearchText] = useState('');
     const [showAllRoot, setShowAllRoot] = useState(false);
+    const [infoSQD, setInfoSQD] = useState();
     const deviceType = useDeviceType();
     const isMobile = deviceType === DeviceType.MOBILE;
+    const panelRef = useOutsideClick(() => {
+        setInfoSQD(undefined);
+    });
     useEffect(() => { loadDataAsync(false); }, [items]);
     useEffect(() => { setSelectedItem(dataSource.find(o => o.id == selectedId)); }, [selectedId, dataSource]);
     const loadDataAsync = async (refreshCache) => {
@@ -176,9 +204,9 @@ const TMSavedQuerySelector = React.memo(({ items, selectedId, allowShowSearch =
                                     justifyContent: 'center',
                                     fontSize: '1rem',
                                     fontWeight: 'bold'
-                                }, 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 &&
+                                }, children: _jsx(IconApply, { fontSize: 24, color: 'green' }) }), _jsx(SavedQueryContexMenu, { sqd: sqd, manageDefault: manageDefault, isMobile: isMobile, setInfoSQD: setInfoSQD, 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) })] }));
+                        _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) }), _jsxs(StyledOffCanvasPanel, { ref: panelRef, "$isOpen": isMobile && infoSQD !== undefined, children: [_jsxs(StyledDivHorizontal, { style: { gap: 10, padding: '10px 8px', width: '100%', alignItems: 'center' }, children: [_jsx("p", { style: { fontSize: '1.1rem', fontWeight: 'bold' }, children: `${SDK_Localizator.SavedQuery} - ${SDKUI_Localizator.About}` }), _jsx(IconCloseOutline, { style: { marginLeft: 'auto', cursor: 'pointer' }, onClick: () => setInfoSQD(undefined) })] }), getTooltipBySqd(infoSQD)] })] }));
 });
 export default TMSavedQuerySelector;

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

@@ -169,7 +169,7 @@ const TMSearch = ({ inputTID, inputSqdID, isExpertMode = SDKUI_Globals.userSetti
                         onSQDItemClick(sqd, setSQDAsync);
                         isMobile && handleTogglePanel('TMSearchQueryPanel');
                     }, onDeleted: (sqd) => onSQDDeleted(sqd, sqd.id == currentSQD?.id ? undefined : currentSQD, setSQDAsync) }) })] });
-    const panels = [
+    const panelsConfig = [
         {
             id: 'TMTreeSelector',
             name: SDK_Localizator.Trees,
@@ -243,7 +243,7 @@ const TMSearch = ({ inputTID, inputSqdID, isExpertMode = SDKUI_Globals.userSetti
             },
         },
     ];
-    return (_jsxs(_Fragment, { children: [_jsx(StyledMultiViewPanel, { "$isVisible": currentSearchView === TMSearchViews.Search, children: _jsx(TMPanelManager, { panels: panels, initialMobilePanelId: 'TMRecentsManager', toolbarMode: 1 }) }), searchResult.length > 0 &&
+    return (_jsxs(_Fragment, { children: [_jsx(StyledMultiViewPanel, { "$isVisible": currentSearchView === TMSearchViews.Search, children: _jsx(TMPanelManager, { panels: panelsConfig, initialMobilePanelId: 'TMRecentsManager', toolbarMode: 1 }) }), searchResult.length > 0 &&
                 _jsx(TMSearchResult, { isVisible: currentSearchView === TMSearchViews.Result, context: SearchResultContext.METADATA_SEARCH, searchResults: searchResult, onRefreshAfterAddDcmtToFavs: onRefreshAfterAddDcmtToFavs, onRefreshSearchAsync: async () => {
                         setSearchResult(await refreshLastSearch(lastQdSearched) ?? []);
                     }, onTaskCreateRequest: onTaskCreateRequest, onClose: () => { setCurrentSearchView(TMSearchViews.Search); } })] }));