@topconsultnpm/sdkui-react-beta 6.13.14 → 6.13.16

package/lib/components/base/TMFileManager.js

@@ -210,11 +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 && _jsxs("div", { style: { flexDirection: "column", height: "100%", width: "100%", }, children: [_jsx(Toolbar, { style: { backgroundColor: '#f4f4f4', border: '2px solid #ccc', borderRadius: '8px', boxShadow: '0 4px 8px rgba(0,0,0,0.1)', height: "40px" }, children: _jsx(ToolbarItem, { location: "before", children: _jsx("div", { style: { paddingLeft: "5px", paddingRight: "5px" }, children: _jsx(TMButton, { caption: isLeftPanelCollapsed ? SDKUI_Localizator.ShowLeftPanel : SDKUI_Localizator.HideLeftPanel, btnStyle: 'toolbar', color: 'primaryOutline', icon: isLeftPanelCollapsed ? _jsx(IconHide, {}) : _jsx(IconShow, {}), onClick: () => setIsLeftPanelCollapsed(prev => !prev) }) }) }) }), _jsx("div", { style: {
-                            display: "flex",
-                            flexGrow: 1,
-                            height: "calc(100% - 40px)"
-                        }, children: _jsxs(TMSplitterLayout, { direction: 'horizontal', showSeparator: true, separatorColor: 'transparent', separatorActiveColor: 'transparent', min: ['0', '0'], start: [isLeftPanelCollapsed ? '0%' : "50%", isLeftPanelCollapsed ? '100%' : "50%"], children: [_jsxs("div", { style: { height: "100%", width: "100%" }, onContextMenu: onTreeViewContextMenu, children: [_jsx(TreeView, { style: { marginTop: "10px" }, dataSource: treeViewData, displayExpr: "text", itemRender: renderTreeViewItem, onItemClick: handleTreeViewItemClick, onItemContextMenu: handleTreeViewContextMenu }), treeViewAnchor && _jsx(ContextMenu, { id: 'treeViewContextMenuDesktop', dataSource: folderContextMenuItems, target: treeViewAnchor, onHiding: closeTreeViewContextMenu })] }), _jsxs("div", { style: { backgroundColor: "#fff", width: "100%", height: "100%" }, children: [_jsxs(Toolbar, { style: { backgroundColor: '#f4f4f4', height: "40px", paddingLeft: "5px", paddingRight: '5px' }, children: [_jsx(ToolbarItem, { location: "before", children: _jsx(TMButton, { caption: viewMode === 'details' ? SDKUI_Localizator.PreviewView : SDKUI_Localizator.DetailsView, btnStyle: 'toolbar', color: 'primaryOutline', icon: viewMode === 'details' ? _jsx(IconDashboard, {}) : _jsx(IconList, {}), onClick: toggleViewMode }) }), _jsx(ToolbarItem, { location: "before", children: _jsx(TMSearchBar, { marginLeft: '0px', maxWidth: '160px', searchValue: searchText, onSearchValueChanged: (e) => handleSearchChange(e) }) })] }), _jsxs("div", { onDrop: handleDrop, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onContextMenu: onContextMenu, style: { width: "100%", height: "calc(100% - 40px)", border: isDragging ? '2px solid red' : '2px solid transparent' }, children: [viewMode === 'thumbnails' && _jsx(ThumbnailsView, { userID: userID, items: filteredFileItems, focusedFile: focusedFile, selectedFiles: selectedFiles, searchText: searchText, handleSelectedFiles: handleSelectedFiles, handleFocusedFile: handleFocusedFile, onDoubleClickHandler: onDoubleClickHandler, setViewAnchor: setViewAnchor }), viewMode === 'details' && _jsx(DetailsView, { userID: userID, items: filteredFileItems, selectedFiles: selectedFiles, searchText: searchText, focusedFile: focusedFile, handleSelectedFiles: handleSelectedFiles, handleFocusedFile: handleFocusedFile, onDoubleClickHandler: onDoubleClickHandler, fileContextMenuItems: fileContextMenuItems }), viewAnchor && _jsx(ContextMenu, { id: 'fileContextMenuDesktop', dataSource: fileContextMenuItems, target: viewAnchor, onHiding: closeViewContextMenu })] })] })] }, "TMWGs-panels-treeView") })] }), isMobile && _jsx("div", { style: { height: "100%", width: "100%" }, children: _jsxs(TMToolbarCard, { onBack: openDraftList ? onBackCallback : undefined, title: SDKUI_Localizator.Drafts, totalItems: dcmtsFound ?? 0, children: [_jsxs("div", { style: { display: openDraftList ? 'none' : 'block', transition: 'opacity 0.3s ease-in-out' }, children: [_jsx(TreeView, { style: { marginTop: "10px", }, dataSource: treeViewData, displayExpr: "text", itemRender: renderTreeViewItem, onItemClick: handleTreeViewItemClick }), treeViewAnchor && _jsx(ContextMenu, { id: 'treeViewContextMenuMobile', dataSource: folderContextMenuItems, target: treeViewAnchor, onHiding: closeTreeViewContextMenu })] }), _jsxs("div", { style: { backgroundColor: "#fff", width: "100%", height: "100%", display: openDraftList ? 'block' : 'none', transition: 'opacity 0.3s ease-in-out' }, children: [_jsxs(Toolbar, { style: { backgroundColor: '#f4f4f4', height: "40px", paddingLeft: "5px", paddingRight: '5px' }, children: [_jsx(ToolbarItem, { location: "before", children: _jsx(TMButton, { caption: viewMode === 'details' ? SDKUI_Localizator.PreviewView : SDKUI_Localizator.DetailsView, btnStyle: 'toolbar', color: 'primaryOutline', icon: viewMode === 'details' ? _jsx(IconDashboard, {}) : _jsx(IconList, {}), onClick: toggleViewMode }) }), _jsx(ToolbarItem, { location: "before", children: _jsx(TMSearchBar, { marginLeft: '0px', maxWidth: '160px', searchValue: searchText, onSearchValueChanged: (e) => handleSearchChange(e) }) })] }), _jsxs("div", { onDrop: handleDrop, onDragOver: handleDragOver, onDragLeave: handleDragLeave, style: { width: "100%", height: "calc(100% - 40px)", border: isDragging ? '2px solid red' : '2px solid transparent' }, children: [viewMode === 'thumbnails' && _jsx(ThumbnailsView, { userID: userID, items: filteredFileItems, focusedFile: focusedFile, selectedFiles: selectedFiles, searchText: searchText, handleSelectedFiles: handleSelectedFiles, handleFocusedFile: handleFocusedFile, onDoubleClickHandler: onDoubleClickHandler, setViewAnchor: setViewAnchor }), viewMode === 'details' && _jsx(DetailsView, { items: filteredFileItems, selectedFiles: selectedFiles, searchText: searchText, focusedFile: focusedFile, handleSelectedFiles: handleSelectedFiles, handleFocusedFile: handleFocusedFile, onDoubleClickHandler: onDoubleClickHandler }), viewAnchor && _jsx(ContextMenu, { id: 'fileViewContextMenuMobile', dataSource: fileContextMenuItems, target: viewAnchor, onHiding: closeViewContextMenu })] })] })] }) })] });
+    return _jsxs("div", { style: { height: "100%", width: "100%" }, children: [!isMobile && _jsx("div", { style: { flexDirection: "column", height: "100%", width: "100%", }, children: _jsx("div", { style: { display: "flex", flexGrow: 1, height: "100%" }, children: _jsxs(TMSplitterLayout, { direction: 'horizontal', showSeparator: true, separatorColor: 'transparent', separatorActiveColor: 'transparent', min: ['0', '0'], start: [isLeftPanelCollapsed ? '0%' : "50%", isLeftPanelCollapsed ? '100%' : "50%"], children: [_jsxs("div", { style: { height: "100%", width: "100%" }, onContextMenu: onTreeViewContextMenu, children: [_jsx(TreeView, { style: { marginTop: "10px" }, dataSource: treeViewData, displayExpr: "text", itemRender: renderTreeViewItem, onItemClick: handleTreeViewItemClick, onItemContextMenu: handleTreeViewContextMenu }), treeViewAnchor && _jsx(ContextMenu, { id: 'treeViewContextMenuDesktop', dataSource: folderContextMenuItems, target: treeViewAnchor, onHiding: closeTreeViewContextMenu })] }), _jsxs("div", { style: { backgroundColor: "#fff", width: "100%", height: "100%" }, children: [_jsxs(Toolbar, { style: { backgroundColor: '#f4f4f4', height: "40px", paddingLeft: "5px", paddingRight: '5px' }, children: [_jsx(ToolbarItem, { location: "before", children: _jsx(TMButton, { caption: isLeftPanelCollapsed ? SDKUI_Localizator.ShowLeftPanel : SDKUI_Localizator.HideLeftPanel, btnStyle: 'toolbar', color: 'primaryOutline', icon: isLeftPanelCollapsed ? _jsx(IconHide, {}) : _jsx(IconShow, {}), onClick: () => setIsLeftPanelCollapsed(prev => !prev) }) }), _jsx(ToolbarItem, { location: "before", children: _jsx(TMButton, { caption: viewMode === 'details' ? SDKUI_Localizator.PreviewView : SDKUI_Localizator.DetailsView, btnStyle: 'toolbar', color: 'primaryOutline', icon: viewMode === 'details' ? _jsx(IconDashboard, {}) : _jsx(IconList, {}), onClick: toggleViewMode }) }), _jsx(ToolbarItem, { location: "before", children: _jsx(TMSearchBar, { marginLeft: '0px', maxWidth: '160px', searchValue: searchText, onSearchValueChanged: (e) => handleSearchChange(e) }) })] }), _jsxs("div", { onDrop: handleDrop, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onContextMenu: onContextMenu, style: { width: "100%", height: "calc(100% - 40px)", border: isDragging ? '2px solid red' : '2px solid transparent' }, children: [viewMode === 'thumbnails' && _jsx(ThumbnailsView, { userID: userID, items: filteredFileItems, focusedFile: focusedFile, selectedFiles: selectedFiles, searchText: searchText, handleSelectedFiles: handleSelectedFiles, handleFocusedFile: handleFocusedFile, onDoubleClickHandler: onDoubleClickHandler, setViewAnchor: setViewAnchor }), viewMode === 'details' && _jsx(DetailsView, { userID: userID, items: filteredFileItems, selectedFiles: selectedFiles, searchText: searchText, focusedFile: focusedFile, handleSelectedFiles: handleSelectedFiles, handleFocusedFile: handleFocusedFile, onDoubleClickHandler: onDoubleClickHandler, fileContextMenuItems: fileContextMenuItems }), viewAnchor && _jsx(ContextMenu, { id: 'fileContextMenuDesktop', dataSource: fileContextMenuItems, target: viewAnchor, onHiding: closeViewContextMenu })] })] })] }, "TMWGs-panels-treeView") }) }), isMobile && _jsx("div", { style: { height: "100%", width: "100%" }, children: _jsxs(TMToolbarCard, { onBack: openDraftList ? onBackCallback : undefined, title: SDKUI_Localizator.Drafts, totalItems: dcmtsFound ?? 0, children: [_jsxs("div", { style: { display: openDraftList ? 'none' : 'block', transition: 'opacity 0.3s ease-in-out' }, children: [_jsx(TreeView, { style: { marginTop: "10px", }, dataSource: treeViewData, displayExpr: "text", itemRender: renderTreeViewItem, onItemClick: handleTreeViewItemClick }), treeViewAnchor && _jsx(ContextMenu, { id: 'treeViewContextMenuMobile', dataSource: folderContextMenuItems, target: treeViewAnchor, onHiding: closeTreeViewContextMenu })] }), _jsxs("div", { style: { backgroundColor: "#fff", width: "100%", height: "100%", display: openDraftList ? 'block' : 'none', transition: 'opacity 0.3s ease-in-out' }, children: [_jsxs(Toolbar, { style: { backgroundColor: '#f4f4f4', height: "40px", paddingLeft: "5px", paddingRight: '5px' }, children: [_jsx(ToolbarItem, { location: "before", children: _jsx(TMButton, { caption: viewMode === 'details' ? SDKUI_Localizator.PreviewView : SDKUI_Localizator.DetailsView, btnStyle: 'toolbar', color: 'primaryOutline', icon: viewMode === 'details' ? _jsx(IconDashboard, {}) : _jsx(IconList, {}), onClick: toggleViewMode }) }), _jsx(ToolbarItem, { location: "before", children: _jsx(TMSearchBar, { marginLeft: '0px', maxWidth: '160px', searchValue: searchText, onSearchValueChanged: (e) => handleSearchChange(e) }) })] }), _jsxs("div", { onDrop: handleDrop, onDragOver: handleDragOver, onDragLeave: handleDragLeave, style: { width: "100%", height: "calc(100% - 40px)", border: isDragging ? '2px solid red' : '2px solid transparent' }, children: [viewMode === 'thumbnails' && _jsx(ThumbnailsView, { userID: userID, items: filteredFileItems, focusedFile: focusedFile, selectedFiles: selectedFiles, searchText: searchText, handleSelectedFiles: handleSelectedFiles, handleFocusedFile: handleFocusedFile, onDoubleClickHandler: onDoubleClickHandler, setViewAnchor: setViewAnchor }), viewMode === 'details' && _jsx(DetailsView, { items: filteredFileItems, selectedFiles: selectedFiles, searchText: searchText, focusedFile: focusedFile, handleSelectedFiles: handleSelectedFiles, handleFocusedFile: handleFocusedFile, onDoubleClickHandler: onDoubleClickHandler }), viewAnchor && _jsx(ContextMenu, { id: 'fileViewContextMenuMobile', dataSource: fileContextMenuItems, target: viewAnchor, onHiding: closeViewContextMenu })] })] })] }) })] });
 };
 export default TMFileManager;
 const highlightText = (text, searchText, isSelected) => {

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

@@ -15,6 +15,7 @@ export interface ITMPanelProps extends ITMRightSidebarProps {
     onBack?: () => void;
     onClose?: () => void;
     onHeaderDoubleClick?: () => void;
+    onMaximize?: (isMaximized: boolean) => void;
 }
 declare const TMPanel: React.FC<ITMPanelProps>;
 export default TMPanel;

package/lib/components/base/TMPanel.js

@@ -69,7 +69,7 @@ const StyledInnerPanelDiv = styled.div `
         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 }) => {
+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 [isActive, setIsActive] = useState(false);
     const [isMaximized, setIsMaximized] = useState(false);
     const [minWidth, setMinWidth] = useState(undefined);
@@ -79,7 +79,17 @@ const TMPanel = ({ allowMaximize = true, items = [], onItemClick, selectedItem,
             setMinWidth(titleRowRef.current.offsetWidth);
         }
     }, [title, displayedItemsCount, totalItems, onBack]);
-    return (_jsxs(StyledPanelContainer, { "$isMaximized": isMaximized, style: minWidth ? { minWidth } : undefined, children: [showHeader &&
+    // handler for external maximize management
+    const handleMaximize = () => {
+        setIsMaximized(prevState => {
+            const newValue = !prevState;
+            if (onMaximize) {
+                onMaximize(newValue);
+            }
+            return newValue;
+        });
+    };
+    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 &&
                                         _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: {
@@ -93,7 +103,7 @@ 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: () => setIsMaximized(m => !m) }), 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(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 })] })] }));
 };
 export default TMPanel;

package/lib/components/base/TMPanelManagerMatrix.js

@@ -152,9 +152,8 @@ const TMPanelManagerMatrix = (props) => {
             }, children: [_jsx("div", { style: {
                         display: 'flex',
                         flexDirection: 'row',
-                        width: (toolbarState && toolbarState.items.length > 0) ? `calc(100% - ${isMobile ? "0px" : "40px"})` : '100%',
+                        width: (toolbarState && toolbarState.items.length > 0) ? `calc(100% - ${isMobile ? "0px" : "60px"})` : '100%',
                         height: `calc(100% - ${isMobile ? "60px" : "0px"})`,
-                        columnGap: maximizedPanelId ? '0px' : `${gutters}px`,
                     }, children: visibleColumns.length > 0 ? visibleColumns.map((column, colIndex) => {
                         // Retrieve the column data from the panelMatrixMap using the current column key
                         const col = panelMatrixMap.get(column);
@@ -162,7 +161,13 @@ const TMPanelManagerMatrix = (props) => {
                         const hasMaximized = !!col?.rows?.some(row => row.id === maximizedPanelId);
                         const isLastColumn = colIndex === visibleColumns.length - 1;
                         // Define the base style for all columns with flex layout, full height, smooth width transition, and no minimum width
-                        const columnBaseStyle = { display: 'flex', flexDirection: 'column', height: '100%', transition: isMobile ? 'none' : 'width 0.3s', };
+                        const columnBaseStyle = {
+                            display: 'flex',
+                            flexDirection: 'column',
+                            height: '100%',
+                            transition: isMobile ? 'none' : 'width 0.3s',
+                            paddingRight: (!maximizedPanelId && !isLastColumn) ? `${gutters}px` : '0px'
+                        };
                         // Declare a variable to hold the final computed style for the column
                         let columnStyle;
                         if (maximizedPanelId) {
@@ -180,11 +185,10 @@ const TMPanelManagerMatrix = (props) => {
                                     const isLastVisible = visibleRows.length > 0 && visibleRows[visibleRows.length - 1].id === row.id;
                                     const isMaximized = maximizedPanelId === row.id;
                                     const baseStyle = {
-                                        backgroundColor: '#f5f5f5',
                                         borderRadius: '8px',
                                         display: 'block',
                                         transition: isMobile ? 'none' : 'all 0.3s ease',
-                                        boxShadow: '0 0 8px #D3D3D3BF',
+                                        paddingBottom: (isHiddenPanel || isLastVisible || isMaximized) ? '0px' : `${gutters}px`,
                                     };
                                     const hiddenStyle = {
                                         minWidth: '0px',
@@ -192,7 +196,6 @@ const TMPanelManagerMatrix = (props) => {
                                         height: '0px',
                                         visibility: 'hidden',
                                         opacity: 0,
-                                        marginBottom: '0px',
                                     };
                                     const maximizedStyle = {
                                         minWidth: '50px',
@@ -200,7 +203,6 @@ const TMPanelManagerMatrix = (props) => {
                                         height: '100%',
                                         visibility: 'visible',
                                         opacity: 1,
-                                        marginBottom: '0px',
                                     };
                                     const defaultStyle = {
                                         minWidth: isHiddenPanel ? '0px' : '50px',
@@ -208,11 +210,10 @@ const TMPanelManagerMatrix = (props) => {
                                         height: isHiddenPanel ? '0px' : panelHeights.get(row.id)?.height ?? '100%',
                                         visibility: isHiddenPanel ? 'hidden' : 'visible',
                                         opacity: isHiddenPanel ? 0 : 1,
-                                        marginBottom: (isHiddenPanel || isLastVisible) ? '0px' : `${gutters}px`,
                                     };
                                     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, onHeaderDoubleClick: () => maximizeMinimizePanelCallback(isMaximized, row.id), onClose: (!isMobile && toolbarState) ? () => togglePanelVisibility(toolbarState.items.find(item => item.panelManagerMatrixRowId === row.id)) : undefined, allowMaximize: false, toolbar: _jsx("div", { style: { width: 'max-content', display: 'flex', alignItems: 'center', gap: '10px' }, children: ((row.panel?.showCustomMaximizeMinimizeButton ?? true) && !isMobile && totalVisiblePanels > 1) && _jsx(TMButton, { caption: isMaximized ? SDKUI_Localizator.Minimize : SDKUI_Localizator.Maximize, icon: isMaximized ? _jsx(IconWindowMinimize, {}) : _jsx(IconWindowMaximize, {}), btnStyle: 'icon', onClick: () => maximizeMinimizePanelCallback(isMaximized, row.id) }) }), children: typeof row.content === "function" ? row.content(togglePanelVisibility, toggleToolbarItemDisabled, toggleToolbarItemVisibility) : row.content })
-                                            : typeof row.content === "function" ? row.content(togglePanelVisibility, toggleToolbarItemDisabled, toggleToolbarItemVisibility) : row.content }, "TMPanelManagerMatrix-r-" + row.id);
+                                    return _jsx("div", { style: panelStyle, children: row.panel ? _jsx(TMPanel, { title: row.panel.title, totalItems: row.panel.totalItems ?? undefined, displayedItemsCount: row.panel.displayedItemsCount ?? undefined, onHeaderDoubleClick: () => maximizeMinimizePanelCallback(isMaximized, row.id), onClose: (!isMobile && toolbarState) ? () => togglePanelVisibility(toolbarState.items.find(item => item.panelManagerMatrixRowId === row.id)) : undefined, allowMaximize: false, toolbar: _jsx("div", { style: { width: '100%', display: 'flex', alignItems: 'center', gap: '10px' }, children: ((row.panel?.showCustomMaximizeMinimizeButton ?? true) && !isMobile && totalVisiblePanels > 1) && _jsx(TMButton, { caption: isMaximized ? SDKUI_Localizator.Minimize : SDKUI_Localizator.Maximize, icon: isMaximized ? _jsx(IconWindowMinimize, {}) : _jsx(IconWindowMaximize, {}), btnStyle: 'icon', onClick: () => maximizeMinimizePanelCallback(isMaximized, row.id) }) }), children: _jsx("div", { style: { width: '100%', height: '100%' }, children: typeof row.content === "function" ? row.content(togglePanelVisibility, toggleToolbarItemDisabled, toggleToolbarItemVisibility) : row.content }) })
+                                            : _jsx("div", { style: { width: '100%', height: '100%' }, children: typeof row.content === "function" ? row.content(togglePanelVisibility, toggleToolbarItemDisabled, toggleToolbarItemVisibility) : row.content }) }, "TMPanelManagerMatrix-r-" + row.id);
                                 }) }) }, "TMPanelManagerMatrix-c-" + column));
                     }) : _jsxs("div", { style: {
                             width: '100%',

package/lib/components/base/TMPanelManagerMatrixUtils.js

@@ -130,11 +130,11 @@ export const MobileToolbar = (toolbar, hiddenPanelIds, togglePanelVisibility) =>
 };
 export const getDynamicColumnWidth = (col, hiddenPanelIds, allColumns) => {
     if (!col)
-        return '0%';
+        return '100%';
     // If all rows in the column are hidden, return width 0%
     const allRowsHidden = col.rows.every(row => hiddenPanelIds.has(row.id));
     if (allRowsHidden)
-        return '0%';
+        return '100%';
     // Calculate which columns are visible (at least one row not hidden)
     const visibleColumns = allColumns.filter(c => c.rows.some(r => !hiddenPanelIds.has(r.id)));
     const visibleCount = visibleColumns.length;

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

@@ -7,6 +7,7 @@ interface ITMDistinctValues {
     separator?: string;
     allowAppendMode?: boolean;
     showHeader?: boolean;
+    isModal?: boolean;
     onSelectionChanged?: (e: DistinctValuesEventArgs) => void;
     onClosePanelCallback?: () => void;
 }

package/lib/components/choosers/TMDistinctValues.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { LayoutModes, MetadataDataDomains, AccessLevels, MetadataDataTypes, SDK_Globals, DcmtTypeListCacheService, DataColumnTypes } from '@topconsultnpm/sdk-ts-beta';
 import styled from 'styled-components';
@@ -9,9 +9,10 @@ import { TMExceptionBoxManager } from '../base/TMPopUp';
 import TMSpinner from '../base/TMSpinner';
 import TMCheckBox from '../editors/TMCheckBox';
 import TMPanel from '../base/TMPanel';
+import TMModal from '../base/TMModal';
 const StyledDistinctValues = styled.div `display: flex; flex-direction: column; height: 100%; overflow: hidden; gap: 10px;`;
 const StyledPanelContainer = styled.div ` width: 100%; height: 100%; padding: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; `;
-const TMDistinctValues = ({ tid, mid, layoutMode = LayoutModes.None, allowAppendMode = true, showHeader = true, separator = " ", onSelectionChanged, onClosePanelCallback }) => {
+const TMDistinctValues = ({ tid, mid, layoutMode = LayoutModes.None, allowAppendMode = true, showHeader = true, isModal, separator = " ", onSelectionChanged, onClosePanelCallback }) => {
     const [focusedItem, setFocusedItem] = useState();
     const [dataSource, setDataSource] = useState([]);
     const [isAppendMode, setIsAppendMode] = useState(false);
@@ -141,8 +142,13 @@ const TMDistinctValues = ({ tid, mid, layoutMode = LayoutModes.None, allowAppend
             return false;
         return md.dataDomain === undefined || md.dataDomain === MetadataDataDomains.None;
     };
-    return (_jsx(TMPanel, { title: SDKUI_Localizator.DistinctValues + (md?.nameLoc ? ` (${md?.nameLoc})` : ''), showHeader: showHeader, onClose: onClosePanelCallback, children: showPrompt
-            ? _jsxs(StyledPanelContainer, { children: [_jsx(IconDataList, { fontSize: 96 }), _jsxs("p", { children: ["Caricare i valori distinti di ", _jsx("strong", { children: `"${md?.nameLoc}" ` }), "? "] }), _jsx(TMButton, { caption: SDKUI_Localizator.Yes, onClick: handleLoadData, showTooltip: false })] })
-            : _jsxs(StyledDistinctValues, { children: [isVisibleAppend() && _jsx(TMCheckBox, { elementStyle: { position: 'absolute', right: '15px', top: '15px', zIndex: 10000 }, label: 'Accoda', value: isAppendMode, onValueChanged: () => { setIsAppendMode(!isAppendMode); } }), _jsx(TMDataGrid, { focusedRowKey: focusedItem ? focusedItem.rowIndex : undefined, selection: { showCheckBoxesMode: 'none' }, searchPanel: { highlightCaseSensitive: true, visible: true }, dataColumns: customColumns, dataSource: dataSource, keyExpr: 'rowIndex', height: 'calc(100%)', onFocusedRowChanged: onFocusedRowChanged, paging: { pageSize: 30 }, summary: customSummary })] }) }));
+    const renderContent = () => {
+        return (_jsx(_Fragment, { children: showPrompt
+                ? _jsxs(StyledPanelContainer, { children: [_jsx(IconDataList, { fontSize: 96 }), _jsxs("p", { children: ["Caricare i valori distinti di ", _jsx("strong", { children: `"${md?.nameLoc}" ` }), "? "] }), _jsx(TMButton, { caption: SDKUI_Localizator.Yes, onClick: handleLoadData, showTooltip: false })] })
+                : _jsxs(StyledDistinctValues, { children: [isVisibleAppend() && _jsx(TMCheckBox, { elementStyle: { position: 'absolute', right: '15px', top: '15px', zIndex: 10000 }, label: 'Accoda', value: isAppendMode, onValueChanged: () => { setIsAppendMode(!isAppendMode); } }), _jsx(TMDataGrid, { focusedRowKey: focusedItem ? focusedItem.rowIndex : undefined, selection: { showCheckBoxesMode: 'none' }, searchPanel: { highlightCaseSensitive: true, visible: true }, dataColumns: customColumns, dataSource: dataSource, keyExpr: 'rowIndex', height: 'calc(100%)', onFocusedRowChanged: onFocusedRowChanged, paging: { pageSize: 30 }, summary: customSummary })] }) }));
+    };
+    return (_jsx(_Fragment, { children: isModal
+            ? _jsx(TMModal, { title: SDKUI_Localizator.DistinctValues + (md?.nameLoc ? ` (${md?.nameLoc})` : ''), height: '600px', width: '500px', resizable: true, onClose: onClosePanelCallback, children: renderContent() })
+            : _jsx(TMPanel, { title: SDKUI_Localizator.DistinctValues + (md?.nameLoc ? ` (${md?.nameLoc})` : ''), showHeader: showHeader, onClose: onClosePanelCallback, children: renderContent() }) }));
 };
 export default TMDistinctValues;

package/lib/components/editors/TMMetadataValues.d.ts

@@ -13,7 +13,7 @@ export declare enum AdvancedMenuButtons {
     FormulaEditor = 2,
     DistinctValues = 3
 }
-type AdvancedMenuClickEventArgs = {
+export type AdvancedMenuClickEventArgs = {
     tid: number | undefined;
     mid: number | undefined;
     button: AdvancedMenuButtons;

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

@@ -1,18 +1,17 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useCallback, useEffect, useState } from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, 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, IconDataList, IconProgressReady, IconSavedQuery, IconTree, SDKUI_Globals, SDKUI_Localizator } from '../../../helper';
-import { TMLayoutItem, TMSplitterLayout } from '../../base/TMLayout';
-import TMPanel from '../../base/TMPanel';
+import { getSysAllDcmtsSQD, IconProgressReady, 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 TMPanelManagerMatrix from '../../base/TMPanelManagerMatrix';
 var TMSearchViews;
 (function (TMSearchViews) {
     TMSearchViews[TMSearchViews["None"] = 0] = "None";
@@ -28,14 +27,151 @@ const TMSearch = ({ inputTID, inputSqdID, isExpertMode = SDKUI_Globals.userSetti
     const [searchResult, setSearchResult] = useState([]);
     const [mruTIDs, setMruTIDs] = useState([]);
     const [currentSearchView, setCurrentSearchView] = useState(TMSearchViews.None);
-    const [showDistinctValuesPanel, setShowDistinctValuesPanel] = useState(false);
-    const [showTreesPanel, setShowTreesPanel] = useState(true);
-    const [showRecentsPanel, setShowRecentsPanel] = useState(true);
-    const [showSavedQueryPanel, setShowSavedQueryPanel] = useState(true);
     const [currentSQDMode, setCurrentSQDMode] = useState(1);
-    const [focusedTidMid, setFocusedTidMid] = useState();
     const [lastQdSearched, setLastQdSearched] = useState();
     const deviceType = useDeviceType();
+    const panelMatrixMap = new Map([
+        [
+            "column-0",
+            {
+                width: "20%",
+                rows: [
+                    {
+                        id: 'treeSelector',
+                        height: '100%',
+                        width: '100%',
+                        content: (togglePanelVisibility) => _jsx(TMTreeSelector, { onClose: () => togglePanelVisibility({
+                                id: 'toolbar-item-treeSelector',
+                                icon: 'optionsgear',
+                                tooltipName: 'treeSelector',
+                                panelManagerMatrixRowId: 'treeSelector',
+                            }), onSelectedTIDChanged: (tid) => {
+                                setCurrentTID(tid);
+                                if (tid && mruTIDs.includes(tid))
+                                    setCurrentMruTID(tid);
+                                else
+                                    setCurrentMruTID(0);
+                            } }),
+                        hidden: false
+                    }
+                ],
+            }
+        ],
+        [
+            "column-1",
+            {
+                width: "20%",
+                rows: [
+                    {
+                        id: 'recentsManager',
+                        height: '100%',
+                        width: '100%',
+                        content: _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);
+                            } }),
+                        hidden: false,
+                        panel: {
+                            title: "Scorciatoie",
+                            totalItems: mruTIDs.length
+                        }
+                    }
+                ],
+            }
+        ],
+        [
+            "column-2",
+            {
+                width: "40%",
+                rows: [
+                    {
+                        id: 'searchQueryPanel',
+                        height: '100%',
+                        width: '100%',
+                        content: _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);
+                            } }),
+                        hidden: false
+                    }
+                ],
+            }
+        ],
+        [
+            "column-4",
+            {
+                width: "20%",
+                rows: [
+                    {
+                        id: 'savedQuery',
+                        height: '100%',
+                        width: '100%',
+                        content: _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) }) })] }),
+                        hidden: false,
+                        panel: {
+                            title: SDK_Localizator.SavedQueries
+                        }
+                    }
+                ],
+            }
+        ]
+    ]);
+    const toolbar = useMemo(() => {
+        return {
+            items: [
+                {
+                    id: 'toolbar-item-treeSelector',
+                    icon: _jsx(IconTree, {}),
+                    tooltipName: 'treeSelector',
+                    panelManagerMatrixRowId: 'treeSelector',
+                },
+                {
+                    id: 'toolbar-item-recentsManager',
+                    icon: _jsx(IconProgressReady, {}),
+                    tooltipName: 'recentsManager',
+                    panelManagerMatrixRowId: 'recentsManager',
+                },
+                {
+                    id: 'toolbar-item-searchQueryPanel',
+                    icon: _jsx(IconProgressReady, {}),
+                    tooltipName: 'searchQueryPanel',
+                    panelManagerMatrixRowId: 'searchQueryPanel',
+                    visible: deviceType === DeviceType.MOBILE
+                },
+                {
+                    id: 'toolbar-item-savedQuery',
+                    icon: _jsx(IconSavedQuery, {}),
+                    tooltipName: 'savedQuery',
+                    panelManagerMatrixRowId: 'savedQuery',
+                    // alternativePanelManagerMatrixRowId: ['distinctValues']
+                }
+            ]
+        };
+    }, [deviceType]);
     useEffect(() => {
         setMruTIDs(SDKUI_Globals.userSettings.searchSettings.mruTIDs);
         loadDataSQDsAsync(false);
@@ -123,67 +259,7 @@ const TMSearch = ({ inputTID, inputSqdID, isExpertMode = SDKUI_Globals.userSetti
         if (sqdToBeSet)
             await setSqdAsync?.(sqdToBeSet);
     }, []);
-    const rightSidebarItems = [
-        { icon: _jsx(IconTree, {}), id: 'trees', visibleName: 'Alberi', isActive: showTreesPanel, visible: true },
-        { icon: _jsx(IconProgressReady, {}), id: 'recents', visibleName: 'Recenti', isActive: showRecentsPanel, visible: true, },
-        { icon: _jsx(IconSavedQuery, {}), id: 'savedquery', visibleName: 'Ricerche rapide', isActive: showSavedQueryPanel, visible: true },
-        { icon: _jsx(IconDataList, {}), id: 'DistinctValues', visibleName: 'Valori distiniti', isActive: showDistinctValuesPanel, disabled: !focusedTidMid, visible: true }
-    ];
-    const rightSidebarItemClickHandler = (item) => {
-        switch (item.toLowerCase()) {
-            case 'trees':
-                setShowTreesPanel(!showTreesPanel);
-                break;
-            case 'recents':
-                setShowRecentsPanel(!showRecentsPanel);
-                break;
-            case 'savedquery':
-                setShowSavedQueryPanel(!showSavedQueryPanel);
-                break;
-            case 'distinctvalues':
-                setShowDistinctValuesPanel(!showDistinctValuesPanel);
-                break;
-            default: break;
-        }
-    };
-    return (_jsxs(_Fragment, { children: [_jsx(StyledMultiViewPanel, { "$isVisible": currentSearchView === TMSearchViews.None, children: _jsxs(TMSplitterLayout, { direction: 'horizontal', overflow: 'visible', showSeparator: deviceType !== DeviceType.MOBILE && showTreesPanel, separatorSize: SDKUI_Globals.userSettings.themeSettings.gutters, separatorColor: 'transparent', separatorActiveColor: 'transparent', min: ['0', '0'], start: (deviceType === DeviceType.MOBILE) ? ['100%', '0%'] : showTreesPanel ? ['20%', '80%'] : ['0%', '100%'], children: [deviceType !== DeviceType.MOBILE &&
-                            _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 && !showDistinctValuesPanel, separatorSize: SDKUI_Globals.userSettings.themeSettings.gutters, separatorColor: 'transparent', separatorActiveColor: 'transparent', min: ['0', '0'], start: (deviceType === DeviceType.MOBILE || showDistinctValuesPanel) ? ['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, onClose: () => 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(TMSearchQueryPanel, { isExpertMode: isExpertMode, fromDTD: fromDTD, SQD: currentSQD, isOpenDistinctValuesPanel: showDistinctValuesPanel, rightSidebarItems: rightSidebarItems, onBack: deviceType !== DeviceType.DESKTOP ? () => { setCurrentTID(0); } : undefined, onFocusedMetadataChanged: setFocusedTidMid, onRightSidebarItemClick: rightSidebarItemClickHandler, onCloseDistinctValuesPanel: () => setShowDistinctValuesPanel(false), 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": !showDistinctValuesPanel, children: _jsx(TMLayoutItem, { children: _jsx(TMPanel, { title: SDK_Localizator.SavedQueries, onClose: () => 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) }) })] }) }) }) })] })] }) }), _jsx(StyledMultiViewPanel, { "$isVisible": currentSearchView === TMSearchViews.Result, children: searchResult.length > 0 &&
+    return (_jsxs(_Fragment, { children: [_jsx(StyledMultiViewPanel, { "$isVisible": currentSearchView === TMSearchViews.None, children: _jsx(TMPanelManagerMatrix, { panelMatrixMap: panelMatrixMap, toolbar: toolbar, initialMobilePanelID: "recentsManager" }) }), _jsx(StyledMultiViewPanel, { "$isVisible": currentSearchView === TMSearchViews.Result, children: searchResult.length > 0 &&
                     _jsx(TMSearchResult, { context: SearchResultContext.METADATA_SEARCH, searchResults: searchResult, onRefreshAfterAddDcmtToFavs: onRefreshAfterAddDcmtToFavs, onRefreshSearchAsync: async () => {
                             // setSearchResult([]);
                             setSearchResult(await refreshLastSearch(lastQdSearched) ?? []);

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { DcmtTypeDescriptor, QueryDescriptor } from '@topconsultnpm/sdk-ts-beta';
 import { TID_MID } from '../../../ts';
+import { AdvancedMenuClickEventArgs } from '../../editors/TMMetadataValues';
 interface ITMSearchQueryEditorProps {
     qd: QueryDescriptor | undefined;
     fromDTD?: DcmtTypeDescriptor;
@@ -9,6 +10,7 @@ interface ITMSearchQueryEditorProps {
     showAllMdWhere?: boolean;
     isOpenDistinctValuesPanel: boolean;
     onQdChanged?: (qd: QueryDescriptor) => void;
+    onAdvancedMenuClick?: (e: AdvancedMenuClickEventArgs) => void;
     onFocusedMetadataChanged?: (tid_mid: TID_MID | undefined) => void;
 }
 declare const TMSearchQueryEditor: React.FunctionComponent<ITMSearchQueryEditorProps>;

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

@@ -13,6 +13,7 @@ import { FormulaHelper } from '../../editors/TMFormulaEditor';
 import TMMetadataEditor, { useMetadataEditableList } from '../../editors/TMMetadataEditor';
 import { colorOperator, StyledItemWrapper, StyledRowItem } from '../../query/TMQueryEditor';
 import { TMMidViewer } from '../../viewers/TMMidViewer';
+import { AdvancedMenuButtons } from '../../editors/TMMetadataValues';
 const StyledMetadataListItem = styled.div `
     padding: 5px;
     border-radius: 8px;
@@ -27,7 +28,7 @@ const StyledMetadataListItem = styled.div `
         cursor: pointer;
     }
 `;
-const TMSearchQueryEditor = ({ qd, fromDTD, dcmtTypesList = [], isOpenDistinctValuesPanel, isExpertMode = SDKUI_Globals.userSettings.advancedSettings.expertMode === 1, showAllMdWhere, onQdChanged, onFocusedMetadataChanged }) => {
+const TMSearchQueryEditor = ({ qd, fromDTD, dcmtTypesList = [], isOpenDistinctValuesPanel, isExpertMode = SDKUI_Globals.userSettings.advancedSettings.expertMode === 1, showAllMdWhere, onQdChanged, onFocusedMetadataChanged, onAdvancedMenuClick }) => {
     const [dynDataListsToBeRefreshed, setDynDataListsToBeRefreshed] = useState([]);
     const [showDistinctValuesPanel, setShowDistinctValuesPanel] = useState(false);
     const [currentEditingMID, setCurrentEditingMID] = useState(0);
@@ -134,10 +135,27 @@ const TMSearchQueryEditor = ({ qd, fromDTD, dcmtTypesList = [], isOpenDistinctVa
         let md = dtd.metadata?.find(o => o.id == mid);
         if (!md)
             return [];
-        let menu = [
-            { text: isEditable ? SDKUI_Localizator.Restore : SDKUI_Localizator.MakeEditable, icon: isEditable ? _jsx(IconUndo, {}) : _jsx(IconPencil, {}), onClick: () => { addOrRemoveEditableList(mid); } },
-            { text: SDKUI_Localizator.DistinctValues, icon: _jsx(IconDataList, {}), onClick: () => { handleMetadataSelection(tid, mid); setShowDistinctValuesPanel(!showDistinctValuesPanel); } }
-        ];
+        let menu = [];
+        // Show MakeEditable/Restore only if isExpertMode is true
+        if (isExpertMode) {
+            menu.push({
+                text: isEditable ? SDKUI_Localizator.Restore : SDKUI_Localizator.MakeEditable,
+                icon: isEditable ? _jsx(IconUndo, {}) : _jsx(IconPencil, {}),
+                onClick: () => {
+                    addOrRemoveEditableList(mid);
+                    onAdvancedMenuClick?.({ tid: tid, mid: mid, button: AdvancedMenuButtons.MakeEditable });
+                }
+            });
+        }
+        menu.push({
+            text: SDKUI_Localizator.DistinctValues,
+            icon: _jsx(IconDataList, {}),
+            onClick: () => {
+                handleMetadataSelection(tid, mid);
+                setShowDistinctValuesPanel(!showDistinctValuesPanel);
+                onAdvancedMenuClick?.({ tid: tid, mid: mid, button: AdvancedMenuButtons.DistinctValues });
+            }
+        });
         return menu;
     };
     return (_jsx(_Fragment, { children: deviceType === DeviceType.MOBILE ?
@@ -202,7 +220,7 @@ const TMSearchQueryEditor = ({ qd, fromDTD, dcmtTypesList = [], isOpenDistinctVa
                                             ? _jsx(IconFunction, { color: "#1a89d3", fontSize: 14, style: { position: "absolute", top: '-5px', left: '-10px' } })
                                             : (isEditableList(whereItem.mid))
                                                 ? _jsx(IconPencil, { color: "#138603", fontSize: 14, style: { position: "absolute", top: '-5px', left: '-10px' } })
-                                                : _jsx(_Fragment, {})] }), isExpertMode && _jsx("div", { style: { gridColumn: 4 }, children: _jsx(TMDropDownMenu, { backgroundColor: 'white', color: TMColors.button_icon, borderRadius: '3px', content: _jsx(TMButton, { btnStyle: 'icon', icon: _jsx(IconMenuVertical, {}), showTooltip: false }), items: getAdvancedMenuItems(whereItem.tid, whereItem.mid) }) })] }, `${whereItem.tid}_${whereItem.mid}_${index}`));
+                                                : _jsx(_Fragment, {})] }), _jsx("div", { style: { gridColumn: 4 }, children: _jsx(TMDropDownMenu, { backgroundColor: 'white', color: TMColors.button_icon, borderRadius: '3px', content: _jsx(TMButton, { btnStyle: 'icon', icon: _jsx(IconMenuVertical, {}), showTooltip: false }), items: getAdvancedMenuItems(whereItem.tid, whereItem.mid) }) })] }, `${whereItem.tid}_${whereItem.mid}_${index}`));
                     }) }) }));
 };
 export default TMSearchQueryEditor;

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

@@ -5,14 +5,12 @@ import { ITMRightSidebarItem } from '../../base/TMRightSidebar';
 interface ITMSearchQueryPanelProps {
     fromDTD?: DcmtTypeDescriptor;
     SQD?: SavedQueryDescriptor;
-    isOpenDistinctValuesPanel?: boolean;
     rightSidebarItems?: ITMRightSidebarItem[];
     isExpertMode?: boolean;
     onBack?: () => void;
     onRightSidebarItemClick?: (item: string) => void;
     onSqdSaved?: (newSqd: SavedQueryDescriptor) => void;
     onFocusedMetadataChanged?: (tid_mid: TID_MID | undefined) => void;
-    onCloseDistinctValuesPanel?: () => void;
     onSearchCompleted?: (searchResult: SearchResultDescriptor[], qd: QueryDescriptor | undefined) => void;
 }
 declare const TMSearchQueryPanel: React.FunctionComponent<ITMSearchQueryPanelProps>;

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

@@ -8,12 +8,12 @@ import { getDcmtTypesByQdAsync, SDKUI_Localizator, getQD, IconMenuVertical, Icon
 import { useQueryParametersDialog } from '../../../hooks/useQueryParametersDialog';
 import { FormModes } from '../../../ts';
 import { TMColors } from '../../../utils/theme';
-import { StyledModalContainer, StyledMultiViewPanel } from '../../base/Styled';
+import { StyledModalContainer } from '../../base/Styled';
 import ShowAlert from '../../base/TMAlert';
 import TMButton from '../../base/TMButton';
 import { useDeviceType, DeviceType } from '../../base/TMDeviceProvider';
 import TMDropDownMenu from '../../base/TMDropDownMenu';
-import TMLayoutContainer, { TMSplitterLayout, TMLayoutItem } from '../../base/TMLayout';
+import TMLayoutContainer, { TMLayoutItem } from '../../base/TMLayout';
 import { TMExceptionBoxManager } from '../../base/TMPopUp';
 import TMSpinner from '../../base/TMSpinner';
 import TMPanel from '../../base/TMPanel';
@@ -21,7 +21,8 @@ import TMDistinctValues from '../../choosers/TMDistinctValues';
 import { TMMetadataChooserForm } from '../../choosers/TMMetadataChooser';
 import TMQueryEditor from '../../query/TMQueryEditor';
 import TMSavedQueryForm from './TMSavedQueryForm';
-const TMSearchQueryPanel = ({ fromDTD, rightSidebarItems, isExpertMode = SDKUI_Globals.userSettings.advancedSettings.expertMode === 1, isOpenDistinctValuesPanel = false, SQD, onRightSidebarItemClick, onSearchCompleted, onFocusedMetadataChanged, onCloseDistinctValuesPanel, onSqdSaved, onBack }) => {
+import { AdvancedMenuButtons } from '../../editors/TMMetadataValues';
+const TMSearchQueryPanel = ({ fromDTD, rightSidebarItems, isExpertMode = SDKUI_Globals.userSettings.advancedSettings.expertMode === 1, SQD, onRightSidebarItemClick, onSearchCompleted, onFocusedMetadataChanged, onSqdSaved, onBack }) => {
     const [confirmQueryParams, ConfirmQueryParamsDialog] = useQueryParametersDialog();
     const [qd, setQd] = useState();
     const [lastQdParams, setLastQdParams] = useState([]);
@@ -33,6 +34,7 @@ const TMSearchQueryPanel = ({ fromDTD, rightSidebarItems, isExpertMode = SDKUI_G
     const [showFiltersConfig, setShowFiltersConfig] = useState(false);
     const [showOutputConfig, setShowOutputConfig] = useState(false);
     const [showOrderByConfig, setShowOrderByConfig] = useState(false);
+    const [showDistinctValuesPanel, setShowDistinctValuesPanel] = useState(false);
     const [focusedTidMid, setFocusedTidMid] = useState();
     const deviceType = useDeviceType();
     let initialMaxItems = deviceType === DeviceType.MOBILE ? 8 : 12;
@@ -98,7 +100,7 @@ const TMSearchQueryPanel = ({ fromDTD, rightSidebarItems, isExpertMode = SDKUI_G
             }
         }
     };
-    return (_jsxs(TMSplitterLayout, { direction: 'horizontal', overflow: 'visible', showSeparator: deviceType !== DeviceType.MOBILE && isOpenDistinctValuesPanel, separatorSize: 20, separatorColor: 'transparent', separatorActiveColor: 'transparent', min: ['0', '0'], start: deviceType === DeviceType.MOBILE ? ['100%', '0%'] : (isOpenDistinctValuesPanel ? ['55%', '45%'] : ['100%', '0%']), 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, items: rightSidebarItems, onItemClick: onRightSidebarItemClick, onBack: onBack, 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); } },
@@ -112,7 +114,11 @@ const TMSearchQueryPanel = ({ fromDTD, rightSidebarItems, isExpertMode = SDKUI_G
                         ? _jsxs("div", { style: { height: '100%', width: '100%', position: 'relative', display: 'flex', flexDirection: 'column', gap: 5 }, children: [showAdvancedSearch
                                     ? _jsx(TMQueryEditor, { formMode: FormModes.Update, showToolbar: false, inputData: qd, validateSelect: true, showApply: false, onQDChanged: (newQd) => { if (!deepCompare(qd, newQd))
                                             setQd(newQd); } })
-                                    : _jsx(TMSearchQueryEditor, { qd: qd, fromDTD: fromDTD, dcmtTypesList: dcmtTypesList, isOpenDistinctValuesPanel: isOpenDistinctValuesPanel, isExpertMode: isExpertMode, showAllMdWhere: showAllMdWhere, onFocusedMetadataChanged: setFocusedTidMid, onQdChanged: (newQd) => { if (!deepCompare(qd, newQd))
+                                    : _jsx(TMSearchQueryEditor, { qd: qd, fromDTD: fromDTD, dcmtTypesList: dcmtTypesList, isOpenDistinctValuesPanel: showDistinctValuesPanel, isExpertMode: isExpertMode, showAllMdWhere: showAllMdWhere, onFocusedMetadataChanged: setFocusedTidMid, onAdvancedMenuClick: (e) => {
+                                            if (e.button === AdvancedMenuButtons.DistinctValues) {
+                                                setShowDistinctValuesPanel(true);
+                                            }
+                                        }, onQdChanged: (newQd) => { if (!deepCompare(qd, newQd))
                                             setQd(newQd); } }), _jsxs("div", { style: { display: 'flex', justifyContent: 'center', alignItems: 'center', gap: '80px', padding: '15px', position: 'relative' }, children: [_jsxs("div", { style: { display: 'flex', justifyContent: 'center', alignItems: 'center', gap: '8px' }, children: [_jsx(TMButton, { btnStyle: 'advanced', icon: _jsx(IconSearch, {}), showTooltip: false, caption: SDKUI_Localizator.Search, onClick: async () => await searchAsync(qd, showAdvancedSearch), advancedColor: '#f09c0a' }), _jsx(TMButton, { btnStyle: 'advanced', showTooltip: false, caption: SDKUI_Localizator.Clear, icon: _jsx(IconClear, {}), advancedColor: TMColors.primaryColor, onClick: clearFilters })] }), (!showAdvancedSearch && qd?.where && qd?.where?.length > initialMaxItems) && _jsx(TMButton, { elementStyle: { position: 'absolute', right: '10px' }, btnStyle: 'icon', caption: showAllMdWhere ? "Mostra meno" : `Mostra tutti i metadati (+${qd?.where?.length - initialMaxItems})`, icon: showAllMdWhere ?
                                                 _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: `-${qd?.where?.length - initialMaxItems}` }) }) :
                                                 _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: `+${qd?.where?.length - initialMaxItems}` }) }), onClick: () => setShowAllMdWhere(!showAllMdWhere) })] }), showFiltersConfig &&
@@ -191,7 +197,8 @@ const TMSearchQueryPanel = ({ fromDTD, rightSidebarItems, isExpertMode = SDKUI_G
                                         } })] })
                         :
                             _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 o ricerca rapida', " "] }), " "] }), " "] }), _jsxs(TMLayoutItem, { width: 'max-content', height: 'max-content', children: [" ", _jsx("img", { src: Logo, width: 120, alt: '' }), " "] })] }), showSqdForm &&
-                        _jsx(StyledModalContainer, { style: { backgroundColor: `${TMColors.backgroundColorHeader}12` }, children: _jsx(TMSavedQueryForm, { height: '50%', width: '50%', id: formModeSqdForm === FormModes.Create ? -1 : SQD?.id, title: 'Ricerca rapida', formMode: formModeSqdForm, showBackButton: true, qd: qd, isAdvancedSearch: showAdvancedSearch, isModal: false, onClose: () => { setShowSqdForm(false); }, onSaved: onSqdSaved }) })] }), _jsx(StyledMultiViewPanel, { "$isVisible": isOpenDistinctValuesPanel, children: _jsx(TMDistinctValues, { tid: focusedTidMid?.tid, mid: focusedTidMid?.mid, separator: ',', onClosePanelCallback: onCloseDistinctValuesPanel, onSelectionChanged: (e) => {
+                        _jsx(StyledModalContainer, { style: { backgroundColor: `${TMColors.backgroundColorHeader}12` }, children: _jsx(TMSavedQueryForm, { height: '50%', width: '50%', id: formModeSqdForm === FormModes.Create ? -1 : SQD?.id, title: 'Ricerca rapida', formMode: formModeSqdForm, showBackButton: true, qd: qd, isAdvancedSearch: showAdvancedSearch, isModal: false, onClose: () => { setShowSqdForm(false); }, onSaved: onSqdSaved }) })] }), showDistinctValuesPanel &&
+                _jsx(TMDistinctValues, { isModal: true, tid: focusedTidMid?.tid, mid: focusedTidMid?.mid, separator: ',', onClosePanelCallback: () => setShowDistinctValuesPanel(false), onSelectionChanged: (e) => {
                         if (!e)
                             return;
                         let wi = qd?.where?.find(o => o.tid === focusedTidMid?.tid && o.mid === focusedTidMid?.mid);
@@ -206,7 +213,7 @@ const TMSearchQueryPanel = ({ fromDTD, rightSidebarItems, isExpertMode = SDKUI_G
                             return wi;
                         });
                         setQd({ ...qd, where: whereCopy });
-                    } }) })] }));
+                    } })] }));
 };
 export default TMSearchQueryPanel;
 const searchByQdAsync = async (qdInput, searchParams) => {

package/package.json

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