@topconsultnpm/sdkui-react-beta 6.13.36 → 6.13.38

package/lib/components/base/TMFileManager.js

@@ -210,7 +210,7 @@ const TMFileManager = (props) => {
     };
     // Main render of the file manager component with a split layout
     return _jsxs("div", { style: { height: "100%", width: "100%" }, children: [!isMobile &&
-                _jsx(TMPanel, { title: SDKUI_Localizator.Drafts, totalItems: dcmtsFound ?? 0, showHeader: showPanel, onClose: onClosePanel, onMaximize: onMaximizePanel, toolbar: _jsxs(_Fragment, { children: [_jsx(IconMenuVertical, { id: "TMPanel-Draft-Commands-Header", color: 'white', cursor: 'pointer' }), _jsx(ContextMenu, { showEvent: 'click', dataSource: [
+                _jsx(TMPanel, { title: SDKUI_Localizator.Drafts, totalItems: dcmtsFound ?? 0, showHeader: showPanel, onClose: onClosePanel, onMaximize: onMaximizePanel, onHeaderDoubleClick: onMaximizePanel, toolbar: _jsxs(_Fragment, { children: [_jsx(IconMenuVertical, { id: "TMPanel-Draft-Commands-Header", color: 'white', cursor: 'pointer' }), _jsx(ContextMenu, { showEvent: 'click', dataSource: [
                                     {
                                         icon: isLeftPanelCollapsed ? "eyeclose" : "eyeopen",
                                         onClick: () => setIsLeftPanelCollapsed(prev => !prev),

package/lib/components/base/TMPanel.js

@@ -102,8 +102,12 @@ const TMPanel = ({ allowMaximize = true, color, backgroundColor, backgroundColor
             ...(minWidth ? { minWidth } : {}),
             visibility: isVisible ? 'visible' : 'hidden',
         }, children: [showHeader &&
-                _jsx(StyledPanelHeader, { "$backgroundColor": backgroundColor, "$color": color, "$isActive": isActive, onDoubleClick: () => { if (onHeaderDoubleClick)
-                        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(StyledPanelHeader, { "$backgroundColor": backgroundColor, "$color": color, "$isActive": isActive, onDoubleClick: () => {
+                        if (onHeaderDoubleClick)
+                            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: {
                                                 whiteSpace: 'nowrap',
                                                 overflow: 'hidden',

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

@@ -3,6 +3,7 @@ type TMPanelManagerProps = {
     panels: Array<TMPanelItemConfig>;
     initialMobilePanelId: string;
     showToolbar?: boolean;
+    toolbarMode?: number;
     gutters?: number;
 };
 declare const TMPanelManager: (props: TMPanelManagerProps) => import("react/jsx-runtime").JSX.Element;

package/lib/components/base/TMPanelManager.js

@@ -6,7 +6,7 @@ import { useDeviceType, DeviceType } from './TMDeviceProvider';
 import TMPanel from './TMPanel';
 import TMPanelManagerToolbar from './TMPanelManagerToolbar';
 const TMPanelManager = (props) => {
-    const { panels, initialMobilePanelId, showToolbar = true, gutters = SDKUI_Globals.userSettings.themeSettings.gutters } = props;
+    const { panels, initialMobilePanelId, showToolbar = true, toolbarMode = 0, gutters = SDKUI_Globals.userSettings.themeSettings.gutters } = props;
     const deviceType = useDeviceType();
     let isMobile = useMemo(() => { return deviceType === DeviceType.MOBILE; }, [deviceType]);
     const allPanels = useMemo(() => flattenPanels(panels), [panels]);
@@ -408,7 +408,7 @@ const TMPanelManager = (props) => {
                     panelRefs.current[fullId] = el;
                 }, 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), 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, 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 })
                                 :
                                     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,7 +431,7 @@ const TMPanelManager = (props) => {
                         } }))] }, fullId));
         });
     };
-    return (_jsxs("div", { style: { display: 'flex', flexDirection: isMobile ? 'column' : 'row', height: '100%', width: '100%' }, children: [_jsx("div", { style: {
+    return (_jsxs("div", { style: { display: 'flex', flexDirection: isMobile ? 'column' : 'row', height: '100%', width: '100%', gap: gutters }, children: [_jsx("div", { style: {
                     display: 'flex',
                     flexGrow: 1,
                     width: isAtLeastOnePanelVisible(activeButtons) ? `calc(100% - ${showToolbar ? (isMobile ? 0 : 60) : 0}px)` : '0%',
@@ -450,7 +450,7 @@ const TMPanelManager = (props) => {
                     textAlign: 'center',
                     color: '#555',
                     fontSize: '18px',
-                }, children: [_jsx(IconInfo, { style: { fontSize: 50 } }), _jsx("div", { children: SDKUI_Localizator.NoPanelSelected })] })), showToolbar && _jsx("div", { style: {
+                }, 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%',
                     borderLeft: '1px solid #ccc',
@@ -460,6 +460,16 @@ const TMPanelManager = (props) => {
                     boxSizing: 'border-box',
                     gap: '6px',
                     backgroundColor: '#f9f9f9',
-                }, children: _jsx(TMPanelManagerToolbar, { allPanels: allPanels, activeButtons: activeButtons, handleTogglePanel: handleTogglePanel, updatedDisabledButton: updatedDisabledButton, updatedVisibleButton: updatedVisibleButton }) })] }));
+                } : {
+                    display: 'flex',
+                    flexDirection: isMobile ? 'row' : 'column',
+                    alignItems: 'center',
+                    width: isMobile ? '100%' : '50px',
+                    height: isMobile ? '50px' : 'max-content',
+                    background: 'transparent linear-gradient(90deg, #CCE0F4 0%, #7EC1E7 14%, #39A6DB 28%, #1E9CD7 35%, #0075BE 78%, #005B97 99%) 0% 0% no-repeat padding-box',
+                    borderRadius: isMobile ? '10px' : '10px 0px 0px 10px',
+                    padding: '10px',
+                    gap: '10px'
+                }, children: _jsx(TMPanelManagerToolbar, { allPanels: allPanels, activeButtons: activeButtons, handleTogglePanel: handleTogglePanel, updatedDisabledButton: updatedDisabledButton, updatedVisibleButton: updatedVisibleButton, toolbarMode: toolbarMode }) })] }));
 };
 export default TMPanelManager;

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

@@ -11,6 +11,7 @@ interface TNPanelManagerToolbarProps {
         id: string;
         value: boolean;
     };
+    toolbarMode?: number;
 }
 declare const TMPanelManagerToolbar: (props: TNPanelManagerToolbarProps) => import("react/jsx-runtime").JSX.Element;
 export default TMPanelManagerToolbar;

package/lib/components/base/TMPanelManagerToolbar.js

@@ -3,7 +3,7 @@ import { useEffect, useMemo, useState } from 'react';
 import { useDeviceType, DeviceType } from './TMDeviceProvider';
 import TMTooltip from './TMTooltip';
 const TMPanelManagerToolbar = (props) => {
-    const { allPanels, activeButtons, handleTogglePanel, updatedDisabledButton, updatedVisibleButton } = props;
+    const { allPanels, activeButtons, handleTogglePanel, updatedDisabledButton, updatedVisibleButton, toolbarMode = 0 } = props;
     const deviceType = useDeviceType();
     let isMobile = useMemo(() => { return deviceType === DeviceType.MOBILE; }, [deviceType]);
     const [filteredPanels, setFilteredPanels] = useState([]);
@@ -57,7 +57,8 @@ const TMPanelManagerToolbar = (props) => {
             display: 'flex',
             flexDirection: isMobile ? 'row' : 'column',
             gap: '6px',
-            alignItems: isMobile ? 'center' : 'flex-start',
+            // alignItems: isMobile ? 'center' : 'flex-start',
+            alignItems: 'center',
             justifyContent: isMobile ? 'center' : 'flex-start',
             width: '100%',
             height: '100%',
@@ -74,8 +75,8 @@ const TMPanelManagerToolbar = (props) => {
                     alignSelf: 'center',
                 } }, `sep-${p.fullId}`)) : null;
             // Button JSX
-            const button = (_jsx(TMTooltip, { content: p.config.name, position: 'left', children: _jsx("button", { disabled: isToolbarDisabled, onClick: () => { handleTogglePanel(p.fullId); if (handleClick)
-                        handleClick(); }, style: {
+            const button = (_jsx(TMTooltip, { content: p.config.name, position: isMobile ? 'top' : 'left', children: _jsx("button", { disabled: isToolbarDisabled, onClick: () => { handleTogglePanel(p.fullId); if (handleClick)
+                        handleClick(); }, style: toolbarMode === 0 ? {
                         display: 'flex',
                         alignItems: 'center',
                         justifyContent: 'center',
@@ -89,7 +90,21 @@ const TMPanelManagerToolbar = (props) => {
                         transition: 'transform 0.2s ease, box-shadow 0.2s ease',
                         cursor: isToolbarDisabled ? 'not-allowed' : 'pointer',
                         opacity: isToolbarDisabled ? 0.6 : 1,
-                        backgroundColor: isActive ? '#81c784' : '#e57373',
+                        backgroundColor: isActive || p.config.toolbarOptions?.alwaysActiveColor ? '#81c784' : '#e57373',
+                    } : {
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        height: '32px',
+                        width: '32px',
+                        border: 'none',
+                        borderRadius: '10px',
+                        fontSize: '18px',
+                        transition: 'transform 0.2s ease, box-shadow 0.2s ease',
+                        cursor: isToolbarDisabled ? 'not-allowed' : 'pointer',
+                        opacity: isToolbarDisabled ? 0.6 : 1,
+                        color: isActive || p.config.toolbarOptions?.alwaysActiveColor ? '#005B97' : '#FFFFFF',
+                        backgroundColor: isActive || p.config.toolbarOptions?.alwaysActiveColor ? '#FFFFFF' : 'transparent',
                     }, onMouseEnter: (e) => { if (!isToolbarDisabled) {
                         e.currentTarget.style.transform = 'scale(1.1)';
                     } }, onMouseLeave: (e) => { e.currentTarget.style.transform = 'scale(1)'; }, children: typeof p.config.toolbarOptions?.icon === 'string' ? (_jsx("i", { className: `dx-icon dx-icon-${p.config.toolbarOptions?.icon}` })) : (p.config.toolbarOptions?.icon) }) }, p.fullId));

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

@@ -21,6 +21,7 @@ export type TMPanelItemConfig = {
         disabled?: boolean;
         orderNumber?: number;
         beginGroup?: boolean;
+        alwaysActiveColor?: boolean;
     };
 };
 export type TMPanelEntry = {

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

@@ -51,7 +51,7 @@ const TMArchive = ({ inputTID }) => {
             gap: SDKUI_Globals.userSettings.themeSettings.gutters,
             width: '100%',
             height: '100%',
-        }, children: [_jsx("div", { style: { flex: 1, minWidth: 0, height: '100%' }, children: _jsxs(TMSplitterLayout, { direction: 'horizontal', overflow: 'visible', separatorSize: SDKUI_Globals.userSettings.themeSettings.gutters, showSeparator: deviceType !== DeviceType.MOBILE && showTreesPanel, separatorColor: 'transparent', separatorActiveColor: 'transparent', min: ['0', '0'], start: getPrimarySplitterStartValues(), children: [showTreesPanel ? _jsx(TMLayoutItem, { children: deviceType !== DeviceType.MOBILE && _jsx(TMTreeSelector, { onClose: () => setShowTreesPanel(false), layoutMode: LayoutModes.Ark, onSelectedTIDChanged: (tid) => { setSearchByTID(tid); } }) }) : _jsx(_Fragment, {}), _jsx(TMLayoutItem, { children: _jsxs(TMSplitterLayout, { separatorSize: SDKUI_Globals.userSettings.themeSettings.gutters, direction: 'horizontal', overflow: 'visible', showSeparator: deviceType !== DeviceType.MOBILE && showRecentsPanel, separatorColor: 'transparent', separatorActiveColor: 'transparent', min: ['0', '0'], start: getSecondarySplitterStartValues(), children: [showRecentsPanel ? _jsx(TMLayoutItem, { children: _jsx(TMPanel, { title: 'Recenti', onClose: () => setShowRecentsPanel(false), totalItems: mruTIDs.length, children: _jsx(TMRecentsManager, { mruTIDs: mruTIDs, deviceType: deviceType, onSelectedTID: (tid) => setCurrentTID(tid), onDeletedTID: (tid) => {
+        }, children: [_jsx("div", { style: { flex: 1, minWidth: 0, height: '100%' }, children: _jsxs(TMSplitterLayout, { direction: 'horizontal', overflow: 'visible', separatorSize: SDKUI_Globals.userSettings.themeSettings.gutters, showSeparator: deviceType !== DeviceType.MOBILE && showTreesPanel, separatorColor: 'transparent', separatorActiveColor: 'transparent', min: ['0', '0'], start: getPrimarySplitterStartValues(), children: [showTreesPanel ? _jsx(TMLayoutItem, { children: deviceType !== DeviceType.MOBILE && _jsx(TMTreeSelector, { onClosePanel: () => setShowTreesPanel(false), layoutMode: LayoutModes.Ark, onSelectedTIDChanged: (tid) => { setSearchByTID(tid); } }) }) : _jsx(_Fragment, {}), _jsx(TMLayoutItem, { children: _jsxs(TMSplitterLayout, { separatorSize: SDKUI_Globals.userSettings.themeSettings.gutters, direction: 'horizontal', overflow: 'visible', showSeparator: deviceType !== DeviceType.MOBILE && showRecentsPanel, separatorColor: 'transparent', separatorActiveColor: 'transparent', min: ['0', '0'], start: getSecondarySplitterStartValues(), children: [showRecentsPanel ? _jsx(TMLayoutItem, { children: _jsx(TMPanel, { title: 'Recenti', onClose: () => setShowRecentsPanel(false), totalItems: mruTIDs.length, children: _jsx(TMRecentsManager, { mruTIDs: mruTIDs, deviceType: deviceType, onSelectedTID: (tid) => setCurrentTID(tid), onDeletedTID: (tid) => {
                                                     let newMruTIDS = mruTIDs.slice();
                                                     let index = newMruTIDS.findIndex(o => o == tid);
                                                     if (index >= 0)

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

@@ -1,22 +1,20 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useState } from 'react';
 import { SavedQueryCacheService, DcmtTypeListCacheService, SDK_Localizator } from '@topconsultnpm/sdk-ts-beta';
 import TMSavedQuerySelector from './TMSavedQuerySelector';
 import TMTreeSelector from './TMTreeSelector';
 import { TabPanel, Item } from 'devextreme-react/tab-panel';
 import TMSearchQueryPanel, { refreshLastSearch } from './TMSearchQueryPanel';
-import { getSysAllDcmtsSQD, IconArrowRight, IconProgressReady, IconSavedQuery, IconTree, SDKUI_Globals, SDKUI_Localizator } from '../../../helper';
-import { TMLayoutItem, TMSplitterLayout } from '../../base/TMLayout';
-import TMPanel from '../../base/TMPanel';
+import { getSysAllDcmtsSQD, IconArrowRight, IconFilter, IconRecentlyViewed, IconSavedQuery, IconTree, SDKUI_Globals, SDKUI_Localizator } from '../../../helper';
 import TMSearchResult from './TMSearchResult';
 import TMRecentsManager from '../../grids/TMRecentsManager';
 import { SearchResultContext } from '../../../ts';
 import { useDeviceType, DeviceType } from '../../base/TMDeviceProvider';
 import { StyledMultiViewPanel } from '../../base/Styled';
-import TMCommandsPanel from '../../sidebar/TMCommandsPanel';
+import TMPanelManager from '../../base/TMPanelManager';
 var TMSearchViews;
 (function (TMSearchViews) {
-    TMSearchViews[TMSearchViews["None"] = 0] = "None";
+    TMSearchViews[TMSearchViews["Search"] = 0] = "Search";
     TMSearchViews[TMSearchViews["Result"] = 1] = "Result";
 })(TMSearchViews || (TMSearchViews = {}));
 const TMSearch = ({ inputTID, inputSqdID, isExpertMode = SDKUI_Globals.userSettings.advancedSettings.expertMode === 1, onRefreshAfterAddDcmtToFavs, onTaskCreateRequest }) => {
@@ -28,11 +26,7 @@ const TMSearch = ({ inputTID, inputSqdID, isExpertMode = SDKUI_Globals.userSetti
     const [fromDTD, setFromDTD] = useState();
     const [searchResult, setSearchResult] = useState([]);
     const [mruTIDs, setMruTIDs] = useState([]);
-    const [currentSearchView, setCurrentSearchView] = useState(TMSearchViews.None);
-    const [showTreesPanel, setShowTreesPanel] = useState(true);
-    const [showRecentsPanel, setShowRecentsPanel] = useState(true);
-    const [showSearchPanel, setShowSearchPanel] = useState(true);
-    const [showSavedQueryPanel, setShowSavedQueryPanel] = useState(true);
+    const [currentSearchView, setCurrentSearchView] = useState(TMSearchViews.Search);
     const [currentSQDMode, setCurrentSQDMode] = useState(1);
     const [lastQdSearched, setLastQdSearched] = useState();
     const deviceType = useDeviceType();
@@ -54,7 +48,6 @@ const TMSearch = ({ inputTID, inputSqdID, isExpertMode = SDKUI_Globals.userSetti
     }, [inputSqdID]);
     useEffect(() => {
         if (!currentTID || currentTID <= 0) {
-            setShowSearchPanel(false);
             setSearchResult([]);
             return;
         }
@@ -64,7 +57,6 @@ const TMSearch = ({ inputTID, inputSqdID, isExpertMode = SDKUI_Globals.userSetti
             setFilteredByTIDSQDs(sqds);
             setCurrentSQDMode(0);
             await setDefaultSQDAsync(sqds);
-            setShowSearchPanel(true);
         });
     }, [currentTID]);
     useEffect(() => {
@@ -126,82 +118,134 @@ const TMSearch = ({ inputTID, inputSqdID, isExpertMode = SDKUI_Globals.userSetti
             await setSqdAsync?.(sqdToBeSet);
     }, []);
     const isMobile = deviceType === DeviceType.MOBILE;
-    return (_jsxs(_Fragment, { children: [_jsxs(StyledMultiViewPanel, { "$isVisible": currentSearchView === TMSearchViews.None, 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: _jsxs(TMSplitterLayout, { direction: 'horizontal', overflow: 'visible', separatorSize: SDKUI_Globals.userSettings.themeSettings.gutters, separatorActiveColor: 'transparent', separatorColor: 'transparent', showSeparator: deviceType !== DeviceType.MOBILE && showTreesPanel, min: ['0', '0'], start: isMobile ? ['100%', '0%'] : showTreesPanel ? ['20%', '80%'] : ['0%', '100%'], children: [!isMobile &&
-                                    _jsx(TMTreeSelector, { onClose: () => setShowTreesPanel(false), onSelectedTIDChanged: (tid) => {
-                                            setCurrentTID(tid);
-                                            if (tid && mruTIDs.includes(tid))
-                                                setCurrentMruTID(tid);
-                                            else
-                                                setCurrentMruTID(0);
-                                        } }), _jsxs(TMSplitterLayout, { direction: 'horizontal', overflow: 'visible', showSeparator: deviceType !== DeviceType.MOBILE && showSavedQueryPanel, separatorSize: SDKUI_Globals.userSettings.themeSettings.gutters, separatorColor: 'transparent', separatorActiveColor: 'transparent', min: ['0', '0'], start: isMobile ? ['100%', '0%'] : ((showSavedQueryPanel) ? ['70%', '30%'] : ['100%', '0%']), children: [_jsx(TMLayoutItem, { children: _jsxs(TMSplitterLayout, { direction: 'horizontal', overflow: 'visible', showSeparator: deviceType !== DeviceType.MOBILE && showRecentsPanel, separatorSize: SDKUI_Globals.userSettings.themeSettings.gutters, separatorColor: 'transparent', separatorActiveColor: 'transparent', min: ['0', '0'], start: deviceType === DeviceType.DESKTOP ? (showRecentsPanel ? ['30%', '70%'] : ['0%', '100%']) : (currentTID ? ['0%', '100%'] : ['100%', '0%']), children: [_jsx(TMPanel, { title: "Scorciatoie", totalItems: mruTIDs.length, allowMaximize: !isMobile, onClose: isMobile ? undefined : () => setShowRecentsPanel(false), children: _jsx(TMRecentsManager, { mruTIDs: mruTIDs, currentMruTID: currentMruTID, deviceType: deviceType, onSelectedTID: (tid) => { setCurrentMruTID(tid); setCurrentTID(tid); }, onDeletedTID: (tid) => {
-                                                                let newMruTIDS = mruTIDs.slice();
-                                                                let index = newMruTIDS.findIndex(o => o == tid);
-                                                                if (index >= 0)
-                                                                    newMruTIDS.splice(index, 1);
-                                                                SDKUI_Globals.userSettings.searchSettings.mruTIDs = newMruTIDS.filter(tid => tid != undefined && tid != null);
-                                                                setMruTIDs(newMruTIDS);
-                                                            } }) }), _jsx(StyledMultiViewPanel, { "$isVisible": showSearchPanel || !isMobile, children: _jsx(TMSearchQueryPanel, { isExpertMode: isExpertMode, fromDTD: fromDTD, SQD: currentSQD, onBack: deviceType !== DeviceType.DESKTOP ? () => { setCurrentTID(0); } : undefined, onSearchCompleted: (searchResult, qd) => {
-                                                                setSearchResult(searchResult);
-                                                                if (searchResult.length <= 0)
-                                                                    return;
-                                                                setLastQdSearched(qd);
-                                                                setCurrentSearchView(TMSearchViews.Result);
-                                                                // Salvataggio ultimi 10 TIDs 
-                                                                let fromTID = searchResult?.[0].fromTID;
-                                                                let newMruTIDS = mruTIDs.slice();
-                                                                let index = newMruTIDS.findIndex(o => o == fromTID);
-                                                                if (index >= 0)
-                                                                    newMruTIDS.splice(index, 1);
-                                                                if (newMruTIDS.length >= 10)
-                                                                    newMruTIDS.splice(0, 1);
-                                                                newMruTIDS.push(fromTID);
-                                                                setMruTIDs(newMruTIDS);
-                                                                setCurrentMruTID(fromTID);
-                                                                SDKUI_Globals.userSettings.searchSettings.mruTIDs = newMruTIDS.filter(tid => tid != undefined && tid != null);
-                                                            }, onSqdSaved: async (newSqd) => {
-                                                                await loadDataSQDsAsync(true, newSqd.masterTID);
-                                                                await setSQDAsync(newSqd);
-                                                            } }) })] }) }), _jsx(StyledMultiViewPanel, { "$isVisible": showSavedQueryPanel && !isMobile, children: _jsx(TMPanel, { title: SDK_Localizator.SavedQueries, allowMaximize: !isMobile, onClose: isMobile ? undefined : () => setShowSavedQueryPanel(false), children: _jsxs(TabPanel, { width: "100%", height: "100%", showNavButtons: true, repaintChangesOnly: true, selectedIndex: currentSQDMode, onSelectedIndexChange: (index) => setCurrentSQDMode(index), children: [(currentTID || currentSQD) ? _jsx(Item, { title: fromDTD?.nameLoc, children: _jsx(TMSavedQuerySelector, { allowShowSearch: false, items: filteredByTIDSQDs, selectedId: currentSQD?.id, onRefreshData: () => { loadDataSQDsAsync(true); }, onItemClick: (sqd) => onSQDItemClick(sqd, setSQDAsync), onDeleted: (sqd) => onSQDDeleted(sqd, sqd.id == currentSQD?.id ? filteredByTIDSQDs.find(o => o.id == 1) : currentSQD, setSQDAsync) }) }) : _jsx(_Fragment, {}), _jsx(Item, { title: SDKUI_Localizator.Alls2, children: _jsx(TMSavedQuerySelector, { allowShowSearch: true, items: allSQDs, manageDefault: false, 
-                                                                // selectedId={currentSQD?.id}
-                                                                onItemClick: (sqd) => onSQDItemClick(sqd, setSQDAsync), onDeleted: (sqd) => onSQDDeleted(sqd, sqd.id == currentSQD?.id ? undefined : currentSQD, setSQDAsync) }) })] }) }) })] })] }) }), !isMobile &&
-                        _jsx(TMCommandsPanel, { isMobile: isMobile, items: [
-                                {
-                                    icon: _jsx(IconTree, {}),
-                                    selected: showTreesPanel,
-                                    onClick: () => setShowTreesPanel(!showTreesPanel),
-                                },
-                                {
-                                    icon: _jsx(IconProgressReady, {}),
-                                    selected: showRecentsPanel,
-                                    onClick: () => setShowRecentsPanel(!showRecentsPanel),
-                                },
-                                {
-                                    icon: _jsx(IconSavedQuery, {}),
-                                    selected: showSavedQueryPanel,
-                                    onClick: () => setShowSavedQueryPanel(!showSavedQueryPanel),
-                                },
-                                ...(searchResult.length > 0 ? [{
-                                        icon: _jsx(IconArrowRight, {}),
-                                        disabled: searchResult.length <= 0,
-                                        onClick: () => {
-                                            if (searchResult.length > 0) {
-                                                setCurrentSearchView(currentSearchView === TMSearchViews.None
-                                                    ? TMSearchViews.Result
-                                                    : TMSearchViews.None);
-                                            }
-                                        },
-                                    }] : []),
-                            ] })] }), searchResult.length > 0 &&
+    const renderTMTreeSelector = (handleTogglePanel) => _jsx(TMTreeSelector, { onClosePanel: () => handleTogglePanel('TMTreeSelector'), onSelectedTIDChanged: (tid) => {
+            setCurrentTID(tid);
+            if (tid && mruTIDs.includes(tid))
+                setCurrentMruTID(tid);
+            else
+                setCurrentMruTID(0);
+            isMobile && handleTogglePanel('TMSearchQueryPanel');
+        } });
+    const renderTMRecentsManager = (handleTogglePanel) => _jsx(TMRecentsManager, { mruTIDs: mruTIDs, currentMruTID: currentMruTID, deviceType: deviceType, onSelectedTID: (tid) => {
+            setCurrentMruTID(tid);
+            setCurrentTID(tid);
+            isMobile && handleTogglePanel('TMSearchQueryPanel');
+        }, onDeletedTID: (tid) => {
+            let newMruTIDS = mruTIDs.slice();
+            let index = newMruTIDS.findIndex(o => o == tid);
+            if (index >= 0)
+                newMruTIDS.splice(index, 1);
+            SDKUI_Globals.userSettings.searchSettings.mruTIDs = newMruTIDS.filter(tid => tid != undefined && tid != null);
+            setMruTIDs(newMruTIDS);
+        } });
+    const renderTMSearchQueryPanel = () => _jsx(TMSearchQueryPanel, { isExpertMode: isExpertMode, fromDTD: fromDTD, SQD: currentSQD, onSearchCompleted: (searchResult, qd) => {
+            setSearchResult(searchResult);
+            if (searchResult.length <= 0)
+                return;
+            setLastQdSearched(qd);
+            setCurrentSearchView(TMSearchViews.Result);
+            // Salvataggio ultimi 10 TIDs 
+            let fromTID = searchResult?.[0].fromTID;
+            let newMruTIDS = mruTIDs.slice();
+            let index = newMruTIDS.findIndex(o => o == fromTID);
+            if (index >= 0)
+                newMruTIDS.splice(index, 1);
+            if (newMruTIDS.length >= 10)
+                newMruTIDS.splice(0, 1);
+            newMruTIDS.push(fromTID);
+            setMruTIDs(newMruTIDS);
+            setCurrentMruTID(fromTID);
+            SDKUI_Globals.userSettings.searchSettings.mruTIDs = newMruTIDS.filter(tid => tid != undefined && tid != null);
+        }, onSqdSaved: async (newSqd) => {
+            await loadDataSQDsAsync(true, newSqd.masterTID);
+            await setSQDAsync(newSqd);
+        } });
+    const renderTMSavedQuerySelector = (handleTogglePanel) => _jsxs(TabPanel, { width: "100%", height: "100%", showNavButtons: true, repaintChangesOnly: true, selectedIndex: currentSQDMode, onSelectedIndexChange: (index) => setCurrentSQDMode(index), children: [(currentTID || currentSQD) ? _jsx(Item, { title: fromDTD?.nameLoc, children: _jsx(TMSavedQuerySelector, { allowShowSearch: false, items: filteredByTIDSQDs, selectedId: currentSQD?.id, onRefreshData: () => { loadDataSQDsAsync(true); }, onItemClick: (sqd) => {
+                        onSQDItemClick(sqd, setSQDAsync);
+                        isMobile && handleTogglePanel('TMSearchQueryPanel');
+                    }, onDeleted: (sqd) => onSQDDeleted(sqd, sqd.id == currentSQD?.id ? filteredByTIDSQDs.find(o => o.id == 1) : currentSQD, setSQDAsync) }) }) : _jsx(_Fragment, {}), _jsx(Item, { title: SDKUI_Localizator.Alls2, children: _jsx(TMSavedQuerySelector, { allowShowSearch: true, items: allSQDs, manageDefault: false, 
+                    // selectedId={currentSQD?.id}
+                    onItemClick: (sqd) => {
+                        onSQDItemClick(sqd, setSQDAsync);
+                        isMobile && handleTogglePanel('TMSearchQueryPanel');
+                    }, onDeleted: (sqd) => onSQDDeleted(sqd, sqd.id == currentSQD?.id ? undefined : currentSQD, setSQDAsync) }) })] });
+    const panels = [
+        {
+            id: 'TMTreeSelector',
+            name: SDK_Localizator.Trees,
+            toolbarOptions: { icon: _jsx(IconTree, { fontSize: 24 }), visible: true, isActive: true, orderNumber: 1 },
+            type: 'content',
+            contentOptions: {
+                visible: true,
+                height: '100%',
+                width: '20%',
+                content: renderTMTreeSelector,
+            },
+        },
+        {
+            id: 'TMRecentsManager',
+            name: "Scorciatoie",
+            toolbarOptions: { icon: _jsx(IconRecentlyViewed, { fontSize: 24 }), visible: true, isActive: true, orderNumber: 2 },
+            type: 'content',
+            contentOptions: {
+                visible: true,
+                height: '100%',
+                width: '20%',
+                content: (handleTogglePanel) => renderTMRecentsManager(handleTogglePanel),
+                panelContainer: {
+                    title: "Scorciatoie",
+                    totalItems: mruTIDs.length,
+                    allowMaximize: !isMobile
+                },
+            },
+        },
+        {
+            id: 'TMSearchQueryPanel',
+            name: SDK_Localizator.QueryWhere,
+            toolbarOptions: { icon: _jsx(IconFilter, { fontSize: 24 }), visible: true, isActive: true, orderNumber: 3 },
+            type: 'content',
+            contentOptions: {
+                visible: true,
+                height: '100%',
+                width: '40%',
+                content: renderTMSearchQueryPanel,
+            },
+        },
+        {
+            id: 'TMSavedQuerySelector',
+            name: SDK_Localizator.SavedQueries,
+            toolbarOptions: { icon: _jsx(IconSavedQuery, { fontSize: 24 }), visible: true, isActive: true, orderNumber: 4 },
+            type: 'content',
+            contentOptions: {
+                visible: true,
+                height: '100%',
+                width: '20%',
+                content: renderTMSavedQuerySelector,
+                panelContainer: {
+                    title: SDK_Localizator.SavedQueries,
+                    allowMaximize: !isMobile
+                },
+            },
+        },
+        {
+            id: 'goToResult',
+            name: 'Vai a risultato',
+            toolbarOptions: {
+                icon: _jsx(IconArrowRight, { fontSize: 24 }),
+                visible: searchResult.length > 0,
+                isActive: searchResult.length > 0,
+                orderNumber: 5,
+                beginGroup: true
+            },
+            type: 'button',
+            buttonOptions: {
+                onClick: () => setCurrentSearchView(TMSearchViews.Result),
+            },
+        },
+    ];
+    return (_jsxs(_Fragment, { children: [_jsx(StyledMultiViewPanel, { "$isVisible": currentSearchView === TMSearchViews.Search, children: _jsx(TMPanelManager, { panels: panels, initialMobilePanelId: 'TMTreeSelector', toolbarMode: 1 }) }), searchResult.length > 0 &&
                 _jsx(TMSearchResult, { isVisible: currentSearchView === TMSearchViews.Result, context: SearchResultContext.METADATA_SEARCH, searchResults: searchResult, onRefreshAfterAddDcmtToFavs: onRefreshAfterAddDcmtToFavs, onRefreshSearchAsync: async () => {
-                        // setSearchResult([]);
                         setSearchResult(await refreshLastSearch(lastQdSearched) ?? []);
-                    }, onTaskCreateRequest: onTaskCreateRequest, onClose: () => { setCurrentSearchView(TMSearchViews.None); } })] }));
+                    }, onTaskCreateRequest: onTaskCreateRequest, onClose: () => { setCurrentSearchView(TMSearchViews.Search); } })] }));
 };
 export default TMSearch;

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

@@ -4,7 +4,7 @@ interface ITMTreeSelectorProps {
     layoutMode?: LayoutModes;
     isVisible?: boolean;
     onSelectedTIDChanged?: (tid: number | undefined, treeId?: number | undefined) => void;
-    onClose?: () => void;
+    onClosePanel?: () => void;
 }
 declare const TMTreeSelector: React.FC<ITMTreeSelectorProps>;
 export default TMTreeSelector;

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

@@ -12,7 +12,7 @@ import TMPanel from '../../base/TMPanel';
 import TMTidViewer from '../../viewers/TMTidViewer';
 import { TMColors } from '../../../utils/theme';
 import { useDeviceType, DeviceType } from '../../base/TMDeviceProvider';
-const TMTreeSelector = ({ layoutMode = LayoutModes.Update, isVisible, onSelectedTIDChanged, onClose }) => {
+const TMTreeSelector = ({ layoutMode = LayoutModes.Update, isVisible, onSelectedTIDChanged, onClosePanel }) => {
     const deviceType = useDeviceType();
     const isMobile = deviceType === DeviceType.MOBILE;
     const [trees, setTrees] = useState([]);
@@ -24,7 +24,6 @@ const TMTreeSelector = ({ layoutMode = LayoutModes.Update, isVisible, onSelected
     const [focusedRowKey, setFocusedRowKey] = useState(undefined);
     const [isGridBoxOpened, setIsGridBoxOpened] = useState(false);
     const [defaultTreeId, setDefaultTreeId] = useState(-1);
-    // const DEFAULT_TREE_KEY_NAME = `DEFAULT_TREE_${SDK_Globals.tmSession?.SessionDescr?.archiveID}_${SDK_Globals.tmSession?.SessionDescr?.userID}`;
     useEffect(() => {
         if (treeItems.length > 0 && treeItems[0].id) {
             setSelectedRowKeys([treeItems[0].id]);
@@ -95,7 +94,7 @@ const TMTreeSelector = ({ layoutMode = LayoutModes.Update, isVisible, onSelected
         }
         ;
     }, []);
-    return (_jsx(TMPanel, { title: SDK_Localizator.Trees, isVisible: isVisible, totalItems: trees.length, onClose: isMobile ? undefined : onClose, allowMaximize: !isMobile, toolbar: _jsx(TMButton, { btnStyle: 'icon', caption: defaultTreeId == selectedTreeId ? SDKUI_Localizator.TreeRemoveDefault : SDKUI_Localizator.SetAsDefault, icon: defaultTreeId == selectedTreeId ? _jsx(IconStarRemove, { color: 'rgb(243, 114, 92)' }) : _jsx(IconStar, { color: 'rgb(248, 215, 117)' }), onClick: () => {
+    return (_jsx(TMPanel, { title: SDK_Localizator.Trees, isVisible: isVisible, totalItems: trees.length, onClose: isMobile ? undefined : onClosePanel, allowMaximize: !isMobile, toolbar: _jsx(TMButton, { btnStyle: 'icon', caption: defaultTreeId == selectedTreeId ? SDKUI_Localizator.TreeRemoveDefault : SDKUI_Localizator.SetAsDefault, icon: defaultTreeId == selectedTreeId ? _jsx(IconStarRemove, { color: 'rgb(243, 114, 92)' }) : _jsx(IconStar, { color: 'rgb(248, 215, 117)' }), onClick: () => {
                 if (defaultTreeId == selectedTreeId) {
                     SDKUI_Globals.userSettings.searchSettings.defaultTree = -1;
                     setDefaultTreeId(-1);

package/lib/components/grids/TMRecentsManager.js

@@ -27,9 +27,9 @@ const StyledRecentTidItem = styled.div `
         left: -7px;
         top: 50%;
         transform: translateY(-50%);
-        opacity: 0;
+        opacity: ${({ $isMobile }) => ($isMobile ? 1 : 0)};
         transition: opacity 0.2s;
-        pointer-events: none;
+        pointer-events: ${({ $isMobile }) => ($isMobile ? 'auto' : 'none')};
     }
 
     &:hover .info-icon {
@@ -52,7 +52,7 @@ const TMRecentsManager = ({ deviceType, mruTIDs, currentMruTID, onSelectedTID, o
             setRecentDcmtTypes(filtered);
         });
     }, [mruTIDs]);
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { style: { overflowY: deviceType === DeviceType.MOBILE ? 'auto' : undefined, display: 'flex', flexDirection: 'column', padding: '5px', width: '100%' }, 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: {
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { style: { overflowY: deviceType === DeviceType.MOBILE ? 'auto' : undefined, display: 'flex', flexDirection: 'column', padding: '5px', width: '100%' }, children: [_jsx(StyledRecentTidItem, { id: `tid-${0}`, "$isMobile": deviceType === DeviceType.MOBILE, 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,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@topconsultnpm/sdkui-react-beta",
-    "version": "6.13.36",
+    "version": "6.13.38",
     "description": "",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",