@topconsultnpm/sdkui-react-beta 6.13.38 → 6.13.40

package/lib/components/base/TMPanel.js

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

package/lib/components/base/TMPanelManager.js

@@ -82,7 +82,7 @@ const TMPanelManager = (props) => {
             }
             else if (maximizedPanelPath.length > 0) {
                 // If at least one panel is maximized, collapse all others to zero size
-                newState.set(panelId, { ...currentPanel, width: '0', height: '0' });
+                newState.set(panelId, { ...currentPanel, width: '0%', height: '0%' });
             }
             else {
                 // If no panels are maximized, restore their original dimensions
@@ -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), onHeaderDoubleClick: () => handleToggleMaximize(fullId), allowMaximize: !isMobile, children: typeof panel.contentOptions.content === "function" ? panel.contentOptions.content(handleTogglePanel, handleToggleMaximize, handleVisibilityButton, handleDisableButton) : panel.contentOptions.content })
+                            : panel.contentOptions?.panelContainer ? _jsx(TMPanel, { title: panel.contentOptions.panelContainer.title, totalItems: panel.contentOptions.panelContainer.totalItems, displayedItemsCount: panel.contentOptions.panelContainer.displayedItemsCount, onBack: panel.contentOptions.panelContainer.onBack, onClose: () => handleTogglePanel(fullId), onMaximize: () => handleToggleMaximize(fullId), onHeaderDoubleClick: () => handleToggleMaximize(fullId), allowMaximize: !isMobile, 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',
@@ -434,13 +434,13 @@ const TMPanelManager = (props) => {
     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%',
-                    height: isAtLeastOnePanelVisible(activeButtons) ? `calc(100% - ${isMobile ? 60 : 0}px)` : '0%',
+                    width: isAtLeastOnePanelVisible(activeButtons) ? `calc(100% - ${showToolbar ? (isMobile ? 0 : 70) : 0}px)` : '0%',
+                    height: isAtLeastOnePanelVisible(activeButtons) ? `calc(100% - ${isMobile ? 55 : 0}px)` : '0%',
                     visibility: isAtLeastOnePanelVisible(activeButtons) ? 'visible' : 'hidden',
                     flexDirection: 'row',
                 }, children: renderPanels(panels, '', 'horizontal') }), !isAtLeastOnePanelVisible(activeButtons) && (_jsxs("div", { style: {
-                    width: '100%',
-                    height: isMobile ? 'calc(100% - 60px)' : '100%',
+                    width: `calc(100% - ${showToolbar ? (isMobile ? 0 : 70) : 0}px)`,
+                    height: `calc(100% - ${isMobile ? 55 : 0}px)`,
                     display: 'flex',
                     flexDirection: 'column',
                     alignItems: 'center',
@@ -451,14 +451,14 @@ const TMPanelManager = (props) => {
                     color: '#555',
                     fontSize: '18px',
                 }, children: [_jsx(IconInfo, { style: { fontSize: 50 } }), _jsx("div", { children: SDKUI_Localizator.NoPanelSelected })] })), showToolbar && _jsx("div", { style: toolbarMode === 0 ? {
-                    width: isMobile ? '100%' : '60px',
-                    height: isMobile ? '60px' : '100%',
+                    width: isMobile ? '100%' : '50px',
+                    height: isMobile ? '50px' : '100%',
                     borderLeft: '1px solid #ccc',
                     display: 'flex',
                     flexDirection: isMobile ? 'row' : 'column',
-                    padding: '8px',
+                    padding: '10px',
                     boxSizing: 'border-box',
-                    gap: '6px',
+                    gap: '10px',
                     backgroundColor: '#f9f9f9',
                 } : {
                     display: 'flex',

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

@@ -1,3 +1,4 @@
+import React from 'react';
 import { TMPanelEntry } from './TMPanelManagerUtils';
 interface TNPanelManagerToolbarProps {
     allPanels: Array<TMPanelEntry>;
@@ -15,3 +16,8 @@ interface TNPanelManagerToolbarProps {
 }
 declare const TMPanelManagerToolbar: (props: TNPanelManagerToolbarProps) => import("react/jsx-runtime").JSX.Element;
 export default TMPanelManagerToolbar;
+export declare const StyledToolbarButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
+    $toolbarMode?: number;
+    $isActive?: boolean;
+    $isDisabled?: boolean;
+}>> & string;

package/lib/components/base/TMPanelManagerToolbar.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from 'react';
+import styled from 'styled-components';
 import { useDeviceType, DeviceType } from './TMDeviceProvider';
 import TMTooltip from './TMTooltip';
 const TMPanelManagerToolbar = (props) => {
@@ -75,37 +76,8 @@ const TMPanelManagerToolbar = (props) => {
                     alignSelf: 'center',
                 } }, `sep-${p.fullId}`)) : null;
             // Button JSX
-            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',
-                        height: '40px',
-                        width: '40px',
-                        border: 'none',
-                        borderRadius: '10px',
-                        fontSize: '18px',
-                        padding: '8px 10px',
-                        color: '#fff',
-                        transition: 'transform 0.2s ease, box-shadow 0.2s ease',
-                        cursor: isToolbarDisabled ? 'not-allowed' : 'pointer',
-                        opacity: isToolbarDisabled ? 0.6 : 1,
-                        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) {
+            const button = (_jsx(TMTooltip, { content: p.config.name, position: isMobile ? 'top' : 'left', children: _jsx(StyledToolbarButton, { "$toolbarMode": toolbarMode, "$isActive": isActive || p.config.toolbarOptions?.alwaysActiveColor, "$isDisabled": isToolbarDisabled, disabled: isToolbarDisabled, onClick: () => { handleTogglePanel(p.fullId); if (handleClick)
+                        handleClick(); }, onMouseEnter: (e) => { if (!isToolbarDisabled && toolbarMode === 0) {
                         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));
             // Return separator first, then button
@@ -113,3 +85,25 @@ const TMPanelManagerToolbar = (props) => {
         }) }));
 };
 export default TMPanelManagerToolbar;
+export const StyledToolbarButton = styled.button `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: ${({ $toolbarMode }) => ($toolbarMode === 0 ? '40px' : '32px')};
+  width: ${({ $toolbarMode }) => ($toolbarMode === 0 ? '40px' : '32px')};
+  border: none;
+  border-radius: ${({ $toolbarMode }) => ($toolbarMode === 0 ? '10px' : '8px')};
+  font-size: 18px;
+  padding: ${({ $toolbarMode }) => ($toolbarMode === 0 ? '8px 10px' : '0px')}; ;
+  color: #fff;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  cursor: ${({ $isDisabled }) => ($isDisabled ? 'not-allowed' : 'pointer')};
+  opacity: ${({ $isDisabled }) => ($isDisabled ? 0.6 : 1)};
+  background: ${({ $toolbarMode, $isActive }) => $toolbarMode === 0
+    ? ($isActive ? '#81c784' : '#e57373')
+    : ($isActive ? 'rgba(255,255,255,0.35)' : 'transparent')};
+
+  &:hover {
+    background: ${({ $toolbarMode, $isDisabled }) => $toolbarMode !== 0 && !$isDisabled ? 'rgba(255,255,255,0.35)' : undefined};
+  }
+`;

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

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

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

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

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

@@ -4,7 +4,7 @@ import { SDK_Globals, DataColumnTypes, MetadataDataDomains, DataListViewModes, M
 import styled from 'styled-components';
 import { getCommandsMenuItems, getSelectedDcmtsOrFocused } from './TMSearchResultsMenuItems';
 import { ContextMenu } from 'devextreme-react';
-import { genUniqueId, IconShow, IconBoard, IconDcmtTypeSys, IconDetailDcmts, SDKUI_Localizator, IconTag, IconDetails, IconCommand, IconDelete, IconRefresh, IconMenuVertical, IconDownload, IconSignature, deepCompare, getDataColumnName, searchResultDescriptorToSimpleArray, IconArchive, IconActivityLog, IconStar, IconFreeSearch, IconChevronDown, searchResultToMetadataValues, SDKUI_Globals, IconArrowLeft } from '../../../helper';
+import { genUniqueId, IconShow, IconBoard, IconDcmtTypeSys, IconDetailDcmts, SDKUI_Localizator, IconDelete, IconRefresh, IconMenuVertical, IconDownload, IconSignature, deepCompare, getDataColumnName, searchResultDescriptorToSimpleArray, IconArchive, IconActivityLog, IconStar, IconFreeSearch, IconChevronDown, searchResultToMetadataValues, SDKUI_Globals, IconSearchCheck, IconBatchUpdate } from '../../../helper';
 import { useDcmtOperations } from '../../../hooks/useDcmtOperations';
 import { useInputAttachmentsDialog, useInputCvtFormatDialog } from '../../../hooks/useInputDialog';
 import { DcmtOperationTypes, FormModes, SearchResultContext, DownloadTypes } from '../../../ts';
@@ -25,7 +25,7 @@ import { TMSaveFormButtonPrevious, TMSaveFormButtonNext } from '../../forms/TMSa
 import TMDataListItemViewer from '../../viewers/TMDataListItemViewer';
 import TMTidViewer from '../../viewers/TMTidViewer';
 import { hasDetailRelations, hasMasterRelations } from '../../../helper/dcmtsHelper';
-import TMDcmtPreview, { TMNothingToShow } from '../documents/TMDcmtPreview';
+import TMDcmtPreview from '../documents/TMDcmtPreview';
 import TMFloatingToolbar from '../../base/TMFloatingToolbar';
 import { WorkFlowApproveRejectPopUp, WorkFlowOperationButtons, WorkFlowReAssignPopUp } from '../workflow/TMWorkflowPopup';
 import TMMasterDetailDcmts from '../documents/TMMasterDetailDcmts';
@@ -33,12 +33,7 @@ import TMBatchUpdateForm from '../../features/documents/TMBatchUpdateForm';
 import TMDcmtForm from '../documents/TMDcmtForm';
 import TMDcmtBlog from '../documents/TMDcmtBlog';
 import TMDcmtIcon from '../documents/TMDcmtIcon';
-import TMPanel from '../../base/TMPanel';
-import TMCommandsPanel from '../../sidebar/TMCommandsPanel';
-//#endregion region Interfaces, Types and Enums
-//#region Styled Components
-const StyledContainer = styled.div ` overflow: hidden; background-color: #ffffff; width: calc(100%); height: calc(100%); display: flex; gap: 10px; `;
-//#endregion Styled Components
+import TMPanelManager from '../../base/TMPanelManager';
 //#region Internal Components
 const CommandsContextMenu = React.memo(({ target, menuItems, allowPin }) => {
     return (_jsx(ContextMenu, { showEvent: 'click', dataSource: menuItems, target: `${target}` }));
@@ -53,7 +48,6 @@ const orderByName = (array) => {
         return 1;
     } return 0; });
 };
-//#endregion Helper Methods
 const TMSearchResult = ({ context = SearchResultContext.METADATA_SEARCH, isVisible = true, searchResults = [], showSearchResultSidebar = true, showSelector = false, onClosePreviewPanel, showDcmtForm = false, showBoard = false, showPreview = false, title, showSysMetadata = false, isClosable = false, allowFloatingBar = true, showToolbarHeader = true, onRefreshAfterAddDcmtToFavs, onRefreshSearchAsync, onSelectedTIDChanged, onUpdate, onClose, onTaskCreateRequest }) => {
     const [id, setID] = useState('');
     const [showApprovePopup, setShowApprovePopup] = useState(false);
@@ -69,11 +63,6 @@ const TMSearchResult = ({ context = SearchResultContext.METADATA_SEARCH, isVisib
     const [isOpenMaster, setIsOpenMaster] = useState(false);
     const [secondaryMasterDcmts, setSecondaryMasterDcmts] = useState([]);
     const [isOpenDcmtForm, setIsOpenDcmtForm] = useState(false);
-    const [isOpenPreview, setIsOpenPreview] = useState(false);
-    const [isOpenSysMetadata, setIsOpenSysMetadata] = useState(false);
-    const [isOpenBoard, setIsOpenBoard] = useState(false);
-    const [isOpenDistinctValues, setIsOpenDistinctValues] = useState(false);
-    const [isOpenTags, setIsOpenTags] = useState(false);
     const [currentTIDHasDetailRelations, setCurrentTIDHasDetailRelations] = useState();
     const [currentTIDHasMasterRelations, setCurrentTIDHasMasterRelations] = useState();
     const [isOpenBatchUpdate, setIsOpenBatchUpdate] = useState(false);
@@ -136,10 +125,10 @@ const TMSearchResult = ({ context = SearchResultContext.METADATA_SEARCH, isVisib
             fileExt: currentMetadataValues.find(o => o.mid == SystemMIDsAsNumber.FileExt)?.value
         });
     }, [currentMetadataValues]);
-    useEffect(() => { setIsOpenBoard(showBoard); }, [showBoard]);
-    useEffect(() => { setIsOpenSysMetadata(showSysMetadata); }, [showSysMetadata]);
+    // useEffect(() => { setIsOpenBoard(showBoard); }, [showBoard])
+    // useEffect(() => { setIsOpenSysMetadata(showSysMetadata); }, [showSysMetadata])
     useEffect(() => { setIsOpenDcmtForm(showDcmtForm); }, [showDcmtForm]);
-    useEffect(() => { setIsOpenPreview(showPreview); }, [showPreview]);
+    // useEffect(() => { setIsOpenPreview(showPreview) }, [showPreview])
     const openFormHandler = (layoutMode) => { setIsOpenDcmtForm(true); setDcmtFormLayoutMode(layoutMode); };
     const openTaskFormHandler = (value) => {
         if (selectedItems.length > 1)
@@ -184,13 +173,6 @@ const TMSearchResult = ({ context = SearchResultContext.METADATA_SEARCH, isVisib
         }
         return titleHeader;
     };
-    const allowBackButton = () => {
-        if (context === SearchResultContext.METADATA_SEARCH)
-            return true;
-        if (deviceType !== DeviceType.MOBILE)
-            return false;
-        return splitterSize[0] === '0';
-    };
     const onBack = () => {
         if (isOpenBatchUpdate && isModifiedBatchUpdate) {
             TMMessageBoxManager.show({
@@ -306,44 +288,7 @@ const TMSearchResult = ({ context = SearchResultContext.METADATA_SEARCH, isVisib
         }
         setLastUpdateSearchTime(new Date(Date.now()));
     };
-    const isOpenMiddlePanel = () => isOpenSysMetadata || isOpenBoard || isOpenTags || isOpenDistinctValues;
     const getSelectionDcmtInfo = () => { return getSelectedDcmtsOrFocused(selectedItems, focusedItem); };
-    const getPrimarySplitterStartLayout = () => {
-        let size = ['100%', '0'];
-        if (deviceType !== DeviceType.MOBILE) {
-            if (isOpenPreview || isOpenMiddlePanel() || isOpenBatchUpdate) {
-                size = ['50%', '50%'];
-            }
-        }
-        else {
-            size = (isOpenPreview || isOpenMiddlePanel() || isOpenBatchUpdate) ? ['0', '100%'] : ['100%', '0'];
-        }
-        return size;
-    };
-    const getSecondarySplitterStartLayout = () => {
-        if (isOpenPreview && !isOpenMiddlePanel()) {
-            return ['0', '100%'];
-        }
-        if (!isOpenPreview && isOpenMiddlePanel()) {
-            return ['100%', '0'];
-        }
-        return ['40%', '60%'];
-    };
-    const closeMiddlePanel = () => {
-        setIsOpenBoard(false);
-        setIsOpenSysMetadata(false);
-        setIsOpenTags(false);
-        setIsOpenDistinctValues(false);
-    };
-    const titleText = () => {
-        if (isOpenTags)
-            return 'Tags';
-        if (isOpenSysMetadata)
-            return 'Metadati di sistema';
-        if (isOpenBoard)
-            return 'Bacheca';
-        return '';
-    };
     const canNavigateHandler = (dir) => {
         if (!focusedItem)
             return false;
@@ -381,38 +326,6 @@ const TMSearchResult = ({ context = SearchResultContext.METADATA_SEARCH, isVisib
         }
     };
     const middlePanelToolbar = _jsxs("div", { style: { width: 'max-content', display: 'flex', alignItems: 'center', gap: '10px' }, children: [_jsx(TMSaveFormButtonPrevious, { btnStyle: 'icon', isModified: false, iconColor: TMColors.default_background, formMode: FormModes.ReadOnly, canPrev: canNavigateHandler('prev'), onPrev: () => onNavigateHandler('prev') }), _jsx(TMSaveFormButtonNext, { btnStyle: 'icon', isModified: false, iconColor: TMColors.default_background, formMode: FormModes.ReadOnly, canNext: canNavigateHandler('next'), onNext: () => onNavigateHandler('next') })] });
-    let notAvalableMsg = '';
-    let notAvalableIcon;
-    if (isOpenBoard) {
-        notAvalableMsg = 'Bacheca non disponibile.';
-    }
-    else if (isOpenTags) {
-        notAvalableMsg = 'Tags non disponibile.';
-    }
-    else if (isOpenDetails) {
-        notAvalableMsg = 'Documenti detail non disponibile.';
-    }
-    else if (isOpenMaster) {
-        notAvalableMsg = 'Documenti master non disponibile.';
-    }
-    else {
-        notAvalableMsg = 'Metadati di sistema non disponibile.';
-    }
-    if (isOpenBoard) {
-        notAvalableIcon = _jsx(IconBoard, { fontSize: 96 });
-    }
-    else if (isOpenTags) {
-        notAvalableIcon = _jsx(IconTag, { fontSize: 96 });
-    }
-    else if (isOpenDetails) {
-        notAvalableIcon = _jsx(IconDetails, { fontSize: 96 });
-    }
-    else if (isOpenMaster) {
-        notAvalableIcon = _jsx(IconCommand, { fontSize: 96 });
-    }
-    else {
-        notAvalableIcon = _jsx(IconDcmtTypeSys, { fontSize: 96 });
-    }
     const handleAddItem = (tid, did) => {
         let newItem = { TID: tid ?? 0, DID: did ?? 0 };
         setSecondaryMasterDcmts((prevItems) => [...prevItems, newItem]);
@@ -422,66 +335,144 @@ const TMSearchResult = ({ context = SearchResultContext.METADATA_SEARCH, isVisib
     };
     if (!searchResults || searchResults.length <= 0)
         return _jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%' }, children: [_jsx(IconBoard, { fontSize: 96 }), _jsx("div", { style: { fontSize: "15px", marginTop: "10px" }, children: SDKUI_Localizator.NoDcmtFound })] });
-    const isPreviewDisabled = isOpenBatchUpdate || fromDTD?.archiveConstraint === ArchiveConstraints.OnlyMetadata;
-    const isBoardDisabled = isOpenBatchUpdate;
-    const isSysMetadataDisabled = isOpenBatchUpdate || !focusedItem?.DID;
-    const isDetailsDisabled = isOpenBatchUpdate || !focusedItem?.DID;
-    const isMasterDisabled = isOpenBatchUpdate || (!focusedItem?.DID && selectedItems.length <= 0);
     const isMobile = deviceType === DeviceType.MOBILE;
-    return (_jsxs(StyledMultiViewPanel, { "$isVisible": isVisible, children: [_jsxs(StyledMultiViewPanel, { "$isVisible": !isOpenDcmtForm && !isOpenDetails && !isOpenMaster, style: {
+    const renderTMSearchResult = (handleTogglePanel) => _jsxs(_Fragment, { children: [_jsxs(TMLayoutItem, { height: '100%', children: [_jsxs(TMSplitterLayout, { direction: 'horizontal', overflow: 'visible', separatorSize: SDKUI_Globals.userSettings.themeSettings.gutters, separatorActiveColor: 'transparent', separatorColor: 'transparent', min: ['0', '0'], showSeparator: showSelector && deviceType !== DeviceType.MOBILE, start: showSelector ? deviceType !== DeviceType.MOBILE ? ['25%', '75%'] : splitterSize : ['0%', '100%'], children: [showSelector ?
+                                _jsx(TMLayoutItem, { children: _jsx(TMSearchResultSelector, { searchResults: currentSearchResults, onSelectionChanged: onSearchResultSelectionChanged }) })
+                                :
+                                    _jsx(_Fragment, {}), _jsxs(TMLayoutItem, { children: [_jsx(TMSearchResultGrid
+                                    // allowMultipleSelection={allowMultipleSelection}
+                                    , { 
+                                        // allowMultipleSelection={allowMultipleSelection}
+                                        inputFocusedItem: focusedItem, inputSelectedItems: selectedItems, searchResult: searchResults.length > 1 ? selectedSearchResult : searchResults[0], lastUpdateSearchTime: lastUpdateSearchTime, onDblClick: () => openFormHandler(LayoutModes.Update), onContextMenuPreparing: onContextMenuPreparing, onSelectionChanged: (items) => { setSelectedItems(items); }, onVisibleItemChanged: setVisibleItems, onFocusedItemChanged: setFocusedItem }), allowFloatingBar && showFloatingBar && deviceType !== DeviceType.MOBILE &&
+                                        _jsxs(TMFloatingToolbar, { backgroundColor: TMColors.primaryColor, initialLeft: '10px', initialTop: 'calc(100% - 75px)', children: [fromDTD?.perm?.canRetrieveFile === AccessLevels.Yes && _jsx(TMButton, { btnStyle: 'icon', caption: "Download file", disabled: fromDTD?.perm?.canRetrieveFile !== AccessLevels.Yes, icon: _jsx(IconDownload, { color: 'white' }), onClick: () => { downloadDcmtsAsync(getSelectedDcmtsOrFocused(selectedItems, focusedItem), DownloadTypes.Dcmt); } }), _jsx(TMButton, { btnStyle: 'icon', caption: 'Firma e marca', icon: _jsx(IconSignature, { color: 'white' }), onClick: () => { ShowAlert({ message: "TODO Firma e marca ", mode: 'info', title: `${"TODO"}`, duration: 3000 }); } }), _jsx(IconMenuVertical, { id: `commands-floating-${id}`, color: 'white', cursor: 'pointer' }), _jsx(CommandsContextMenu, { target: `#commands-floating-${id}`, menuItems: getCommandsMenuItems(fromDTD, selectedItems, focusedItem, context, showFloatingBar, setShowFloatingBar, openFormHandler, downloadDcmtsAsync, runOperationAsync, onRefreshSearchAsync, refreshSelectionDataRowsAsync, onRefreshAfterAddDcmtToFavs, confirmFormat, openConfirmAttachmentsDialog, openTaskFormHandler, openDetailDcmtsFormHandler, openMasterDcmtsFormHandler, openBatchUpdateFormHandler) })] })] })] }), showApprovePopup && _jsx(WorkFlowApproveRejectPopUp, { deviceType: deviceType, onUpdate: onUpdate, selectedItems: getSelectedDcmtsOrFocused(selectedItems, focusedItem), op: 0, onClose: () => setShowApprovePopup(false) }), showRejectPopup && _jsx(WorkFlowApproveRejectPopUp, { deviceType: deviceType, onUpdate: onUpdate, selectedItems: getSelectedDcmtsOrFocused(selectedItems, focusedItem), op: 1, onClose: () => setShowRejectPopup(false) }), showReAssignPopup && _jsx(WorkFlowReAssignPopUp, { deviceType: deviceType, onUpdate: onUpdate, selectedItems: getSelectedDcmtsOrFocused(selectedItems, focusedItem), onClose: () => setShowReAssignPopup(false) })] }), _jsx(ConfirmFormatDialog, {}), _jsx(ConfirmAttachmentsDialog, {})] });
+    const renderTMBlog = (handleTogglePanel) => _jsx(TMDcmtBlog, { tid: focusedItem?.TID, did: focusedItem?.DID });
+    const renderTMSysMetadata = (handleTogglePanel) => _jsx(TMMetadataValues, { layoutMode: LayoutModes.Update, openChooserBySingleClick: true, TID: focusedItem?.TID, isReadOnly: true, deviceType: deviceType, metadataValues: currentMetadataValues.filter(o => (o.mid != undefined && o.mid <= 100)), metadataValuesOrig: currentMetadataValues.filter(o => (o.mid != undefined && o.mid <= 100)), validationItems: [] });
+    const renderTMDcmtPreview = (handleTogglePanel) => _jsx(TMDcmtPreview, { onClose: () => { handleTogglePanel("TMDcmtPreview"); onClosePreviewPanel?.(); }, dcmtData: currentDcmt });
+    const renderTMBatchUpdate = (handleTogglePanel) => _jsx(TMBatchUpdateForm, { inputDcmts: getSelectionDcmtInfo(), TID: focusedItem ? focusedItem?.TID : selectedItems[0]?.TID, DID: focusedItem ? focusedItem?.DID : selectedItems[0]?.DID, onBack: () => { handleTogglePanel("TMBatchUpdate"); }, onSavedCallbackAsync: async () => {
+            setIsOpenBatchUpdate(false);
+            setIsModifiedBatchUpdate(false);
+            await refreshSelectionDataRowsAsync();
+        }, onStatusChanged: (isModified) => { setIsModifiedBatchUpdate(isModified); } });
+    const panelsConfig = [
+        {
+            id: 'TMSearchResult',
+            name: SDKUI_Localizator.SearchResult,
+            toolbarOptions: { icon: _jsx(IconSearchCheck, { fontSize: 24 }), visible: true, isActive: true, orderNumber: 1 },
+            type: 'content',
+            contentOptions: {
+                visible: true,
+                height: '100%',
+                width: '20%',
+                content: renderTMSearchResult,
+                panelContainer: {
+                    title: getTitleHeader(),
+                    showHeader: showToolbarHeader,
+                    allowMaximize: !isMobile,
+                    onBack: !isClosable ? onBack : undefined,
+                    onClose: isClosable ? onBack : undefined,
+                    toolbar: _jsxs(_Fragment, { children: [context !== SearchResultContext.METADATA_SEARCH && fromDTD?.templateTID === TemplateTIDs.WF_WIApprView && _jsx(WorkFlowOperationButtons, { deviceType: deviceType, onApprove: () => setShowApprovePopup(true), onReject: () => setShowRejectPopup(true), onReAssign: () => setShowReAssignPopup(true), approveDisable: disable, rejectDisable: disable, reassignDisable: disable, infoDisable: getSelectedDcmtsOrFocused(selectedItems, focusedItem).length !== 1 }), (dcmtsReturned != dcmtsFound) && _jsx("p", { style: { backgroundColor: `white`, color: TMColors.primaryColor, textAlign: 'center', padding: '1px 4px', borderRadius: '3px', display: 'flex' }, children: `${dcmtsReturned}/${dcmtsFound} restituiti` }), context === SearchResultContext.FAVORITES_AND_RECENTS &&
+                                _jsx("div", { style: { display: 'flex', alignItems: 'center', gap: '5px' }, children: _jsx(TMButton, { btnStyle: 'icon', icon: _jsx(IconDelete, { color: 'white' }), caption: "Rimuovi da " + (selectedSearchResult?.category === "Favorites" ? '"Preferiti"' : '"Recenti"'), disabled: getSelectedDcmtsOrFocused(selectedItems, focusedItem).length <= 0, onClick: removeDcmtFromFavsOrRecents }) }), _jsx(TMButton, { btnStyle: 'icon', icon: _jsx(IconRefresh, { color: 'white' }), caption: SDKUI_Localizator.Refresh, onClick: onRefreshSearchAsync }), _jsx(IconMenuVertical, { id: `commands-header-${id}`, color: 'white', cursor: 'pointer' }), _jsx(CommandsContextMenu, { target: `#commands-header-${id}`, menuItems: getCommandsMenuItems(fromDTD, selectedItems, focusedItem, context, showFloatingBar, setShowFloatingBar, openFormHandler, downloadDcmtsAsync, runOperationAsync, onRefreshSearchAsync, refreshSelectionDataRowsAsync, onRefreshAfterAddDcmtToFavs, confirmFormat, openConfirmAttachmentsDialog, openTaskFormHandler, openDetailDcmtsFormHandler, openMasterDcmtsFormHandler, openBatchUpdateFormHandler) })] })
+                },
+            },
+        },
+        {
+            id: 'TMBlog',
+            name: SDKUI_Localizator.BlogCase,
+            toolbarOptions: { icon: _jsx(IconBoard, { fontSize: 24 }), disabled: !focusedItem?.DID, visible: true, isActive: false, orderNumber: 2 },
+            type: 'content',
+            contentOptions: {
+                visible: true,
+                height: '100%',
+                width: '20%',
+                content: renderTMBlog,
+                panelContainer: {
+                    title: SDKUI_Localizator.BlogCase,
+                    allowMaximize: !isMobile,
+                    toolbar: middlePanelToolbar
+                },
+            },
+        },
+        {
+            id: 'TMSysMetadata',
+            name: SDKUI_Localizator.MetadataSystem,
+            toolbarOptions: { icon: _jsx(IconDcmtTypeSys, { fontSize: 24 }), visible: true, disabled: !focusedItem?.DID, isActive: false, orderNumber: 3 },
+            type: 'content',
+            contentOptions: {
+                visible: true,
+                height: '100%',
+                width: '20%',
+                content: renderTMSysMetadata,
+                panelContainer: {
+                    title: SDKUI_Localizator.MetadataSystem,
+                    allowMaximize: !isMobile,
+                    toolbar: middlePanelToolbar
+                },
+            },
+        },
+        {
+            id: 'TMDcmtPreview',
+            name: SDKUI_Localizator.PreviewDocument,
+            toolbarOptions: { icon: _jsx(IconShow, { fontSize: 24 }), disabled: !focusedItem?.DID && fromDTD?.archiveConstraint === ArchiveConstraints.OnlyMetadata, visible: true, isActive: true, orderNumber: 4 },
+            type: 'content',
+            contentOptions: {
+                visible: true,
+                height: '100%',
+                width: '20%',
+                content: renderTMDcmtPreview,
+            },
+        },
+        {
+            id: 'TMBatchUpdate',
+            name: SDKUI_Localizator.BatchUpdate,
+            toolbarOptions: { icon: _jsx(IconBatchUpdate, { fontSize: 24 }), visible: true, isActive: false, orderNumber: 5 },
+            type: 'content',
+            contentOptions: {
+                visible: true,
+                height: '100%',
+                width: '20%',
+                content: renderTMBatchUpdate,
+            },
+        },
+        {
+            id: 'showMaster',
+            name: SDKUI_Localizator.DcmtsMaster,
+            toolbarOptions: {
+                icon: _jsx(IconDetailDcmts, { fontSize: 24 }),
+                visible: !!currentTIDHasMasterRelations,
+                disabled: (!focusedItem?.DID && selectedItems.length <= 0),
+                isActive: !!currentTIDHasMasterRelations,
+                orderNumber: 6,
+                beginGroup: true
+            },
+            type: 'button',
+            buttonOptions: {
+                onClick: () => { setIsOpenMaster(true); },
+            },
+        },
+        {
+            id: 'showDetails',
+            name: SDKUI_Localizator.DcmtsDetail,
+            toolbarOptions: {
+                icon: _jsx(IconDetailDcmts, { transform: 'scale(-1, 1)', fontSize: 24 }),
+                visible: !!currentTIDHasDetailRelations,
+                disabled: !focusedItem?.DID,
+                isActive: !!currentTIDHasDetailRelations,
+                orderNumber: 7,
+            },
+            type: 'button',
+            buttonOptions: {
+                onClick: () => { setIsOpenDetails(true); },
+            },
+        },
+    ];
+    return (_jsxs(StyledMultiViewPanel, { "$isVisible": isVisible, children: [_jsx(StyledMultiViewPanel, { "$isVisible": !isOpenDcmtForm && !isOpenDetails && !isOpenMaster, 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%', overflow: 'hidden' }, children: _jsx(TMLayoutWaitingContainer, { direction: 'vertical', showWaitPanel: showWaitPanel, showWaitPanelPrimary: showPrimary, showWaitPanelSecondary: showSecondary, waitPanelTitle: waitPanelTitle, waitPanelTextPrimary: waitPanelTextPrimary, waitPanelValuePrimary: waitPanelValuePrimary, waitPanelMaxValuePrimary: waitPanelMaxValuePrimary, waitPanelTextSecondary: waitPanelTextSecondary, waitPanelValueSecondary: waitPanelValueSecondary, waitPanelMaxValueSecondary: waitPanelMaxValueSecondary, isCancelable: true, abortController: abortController, children: _jsxs(TMSplitterLayout, { direction: 'horizontal', overflow: 'visible', separatorSize: SDKUI_Globals.userSettings.themeSettings.gutters, separatorActiveColor: 'transparent', separatorColor: 'transparent', showSeparator: (isOpenPreview || isOpenMiddlePanel() || isOpenBatchUpdate) && deviceType !== DeviceType.MOBILE, start: getPrimarySplitterStartLayout(), min: deviceType !== DeviceType.MOBILE && isOpenDcmtForm ? ['150px', '0'] : ['0', '0'], children: [_jsx(TMLayoutItem, { children: _jsxs(TMPanel, { toolbar: _jsxs(_Fragment, { children: [context !== SearchResultContext.METADATA_SEARCH && fromDTD?.templateTID === TemplateTIDs.WF_WIApprView && _jsx(WorkFlowOperationButtons, { deviceType: deviceType, onApprove: () => setShowApprovePopup(true), onReject: () => setShowRejectPopup(true), onReAssign: () => setShowReAssignPopup(true), approveDisable: disable, rejectDisable: disable, reassignDisable: disable, infoDisable: getSelectedDcmtsOrFocused(selectedItems, focusedItem).length !== 1 }), (dcmtsReturned != dcmtsFound) && _jsx("p", { style: { backgroundColor: `white`, color: TMColors.primaryColor, textAlign: 'center', padding: '1px 4px', borderRadius: '3px', display: 'flex' }, children: `${dcmtsReturned}/${dcmtsFound} restituiti` }), context === SearchResultContext.FAVORITES_AND_RECENTS &&
-                                                        _jsx("div", { style: { display: 'flex', alignItems: 'center', gap: '5px' }, children: _jsx(TMButton, { btnStyle: 'icon', icon: _jsx(IconDelete, { color: 'white' }), caption: "Rimuovi da " + (selectedSearchResult?.category === "Favorites" ? '"Preferiti"' : '"Recenti"'), disabled: getSelectedDcmtsOrFocused(selectedItems, focusedItem).length <= 0, onClick: removeDcmtFromFavsOrRecents }) }), _jsx(TMButton, { btnStyle: 'icon', icon: _jsx(IconRefresh, { color: 'white' }), caption: SDKUI_Localizator.Refresh, onClick: onRefreshSearchAsync }), _jsx(IconMenuVertical, { id: `commands-header-${id}`, color: 'white', cursor: 'pointer' }), _jsx(CommandsContextMenu, { target: `#commands-header-${id}`, menuItems: getCommandsMenuItems(fromDTD, selectedItems, focusedItem, context, showFloatingBar, setShowFloatingBar, openFormHandler, downloadDcmtsAsync, runOperationAsync, onRefreshSearchAsync, refreshSelectionDataRowsAsync, onRefreshAfterAddDcmtToFavs, confirmFormat, openConfirmAttachmentsDialog, openTaskFormHandler, openDetailDcmtsFormHandler, openMasterDcmtsFormHandler, openBatchUpdateFormHandler) })] }), onBack: !isClosable && !isMobile && allowBackButton() ? onBack : undefined, onClose: isClosable && allowBackButton() ? onBack : undefined, title: getTitleHeader(), showHeader: showToolbarHeader, children: [_jsxs(TMLayoutItem, { height: '100%', children: [_jsxs(TMSplitterLayout, { direction: 'horizontal', overflow: 'visible', separatorSize: SDKUI_Globals.userSettings.themeSettings.gutters, separatorActiveColor: 'transparent', separatorColor: 'transparent', min: ['0', '0'], showSeparator: showSelector && deviceType !== DeviceType.MOBILE, start: showSelector ? deviceType !== DeviceType.MOBILE ? ['25%', '75%'] : splitterSize : ['0%', '100%'], children: [showSelector ?
-                                                                    _jsx(TMLayoutItem, { children: _jsx(TMSearchResultSelector, { searchResults: currentSearchResults, onSelectionChanged: onSearchResultSelectionChanged }) })
-                                                                    :
-                                                                        _jsx(_Fragment, {}), _jsxs(TMLayoutItem, { children: [_jsx(TMSearchResultGrid
-                                                                        // allowMultipleSelection={allowMultipleSelection}
-                                                                        , { 
-                                                                            // allowMultipleSelection={allowMultipleSelection}
-                                                                            inputFocusedItem: focusedItem, inputSelectedItems: selectedItems, searchResult: searchResults.length > 1 ? selectedSearchResult : searchResults[0], lastUpdateSearchTime: lastUpdateSearchTime, onDblClick: () => openFormHandler(LayoutModes.Update), onContextMenuPreparing: onContextMenuPreparing, onSelectionChanged: (items) => { setSelectedItems(items); }, onVisibleItemChanged: setVisibleItems, onFocusedItemChanged: setFocusedItem }), allowFloatingBar && showFloatingBar && deviceType !== DeviceType.MOBILE &&
-                                                                            _jsxs(TMFloatingToolbar, { backgroundColor: TMColors.primaryColor, initialLeft: '10px', initialTop: 'calc(100% - 75px)', children: [fromDTD?.perm?.canRetrieveFile === AccessLevels.Yes && _jsx(TMButton, { btnStyle: 'icon', caption: "Download file", disabled: fromDTD?.perm?.canRetrieveFile !== AccessLevels.Yes, icon: _jsx(IconDownload, { color: 'white' }), onClick: () => { downloadDcmtsAsync(getSelectedDcmtsOrFocused(selectedItems, focusedItem), DownloadTypes.Dcmt); } }), _jsx(TMButton, { btnStyle: 'icon', caption: 'Firma e marca', icon: _jsx(IconSignature, { color: 'white' }), onClick: () => { ShowAlert({ message: "TODO Firma e marca ", mode: 'info', title: `${"TODO"}`, duration: 3000 }); } }), _jsx(IconMenuVertical, { id: `commands-floating-${id}`, color: 'white', cursor: 'pointer' }), _jsx(CommandsContextMenu, { target: `#commands-floating-${id}`, menuItems: getCommandsMenuItems(fromDTD, selectedItems, focusedItem, context, showFloatingBar, setShowFloatingBar, openFormHandler, downloadDcmtsAsync, runOperationAsync, onRefreshSearchAsync, refreshSelectionDataRowsAsync, onRefreshAfterAddDcmtToFavs, confirmFormat, openConfirmAttachmentsDialog, openTaskFormHandler, openDetailDcmtsFormHandler, openMasterDcmtsFormHandler, openBatchUpdateFormHandler) })] })] })] }), showApprovePopup && _jsx(WorkFlowApproveRejectPopUp, { deviceType: deviceType, onUpdate: onUpdate, selectedItems: getSelectedDcmtsOrFocused(selectedItems, focusedItem), op: 0, onClose: () => setShowApprovePopup(false) }), showRejectPopup && _jsx(WorkFlowApproveRejectPopUp, { deviceType: deviceType, onUpdate: onUpdate, selectedItems: getSelectedDcmtsOrFocused(selectedItems, focusedItem), op: 1, onClose: () => setShowRejectPopup(false) }), showReAssignPopup && _jsx(WorkFlowReAssignPopUp, { deviceType: deviceType, onUpdate: onUpdate, selectedItems: getSelectedDcmtsOrFocused(selectedItems, focusedItem), onClose: () => setShowReAssignPopup(false) })] }), _jsx(ConfirmFormatDialog, {}), _jsx(ConfirmAttachmentsDialog, {})] }) }), isOpenBatchUpdate ?
-                                        _jsx(StyledModalContainer, { style: { backgroundColor: 'white' }, children: _jsx(TMBatchUpdateForm, { inputDcmts: getSelectionDcmtInfo(), TID: focusedItem ? focusedItem?.TID : selectedItems[0]?.TID, DID: focusedItem ? focusedItem?.DID : selectedItems[0]?.DID, onBack: () => setIsOpenBatchUpdate(false), onSavedCallbackAsync: async () => {
-                                                    setIsOpenBatchUpdate(false);
-                                                    setIsModifiedBatchUpdate(false);
-                                                    await refreshSelectionDataRowsAsync();
-                                                }, onStatusChanged: (isModified) => { setIsModifiedBatchUpdate(isModified); } }) })
-                                        :
-                                            isOpenPreview || isOpenMiddlePanel()
-                                                ? _jsx(TMLayoutItem, { children: _jsxs(TMSplitterLayout, { direction: 'horizontal', overflow: 'visible', separatorSize: SDKUI_Globals.userSettings.themeSettings.gutters, separatorActiveColor: 'transparent', separatorColor: 'transparent', showSeparator: deviceType !== DeviceType.MOBILE && (isOpenPreview && isOpenMiddlePanel()), start: getSecondarySplitterStartLayout(), min: ['0', '0'], children: [isOpenMiddlePanel()
-                                                                ? _jsx(TMLayoutItem, { children: _jsx(TMPanel, { padding: '0', 
-                                                                        // color={TMColors.primaryColor}
-                                                                        // backgroundColor={`${TMColors.primaryColor}25`}
-                                                                        title: titleText(), toolbar: middlePanelToolbar, onClose: () => closeMiddlePanel(), children: (!focusedItem?.DID)
-                                                                            ?
-                                                                                _jsx(TMNothingToShow, { text: 'Nessun documento selezionato.', secondText: notAvalableMsg, icon: notAvalableIcon })
-                                                                            :
-                                                                                _jsxs(StyledContainer, { children: [isOpenBoard && _jsx(TMDcmtBlog, { tid: focusedItem?.TID, did: focusedItem?.DID }), isOpenSysMetadata &&
-                                                                                            _jsx(TMMetadataValues, { layoutMode: LayoutModes.Update, openChooserBySingleClick: !isOpenDistinctValues, TID: focusedItem?.TID, isReadOnly: true, deviceType: deviceType, metadataValues: currentMetadataValues.filter(o => (o.mid != undefined && o.mid <= 100)), metadataValuesOrig: currentMetadataValues.filter(o => (o.mid != undefined && o.mid <= 100)), validationItems: [] })] }) }) })
-                                                                : _jsx(_Fragment, {}), isOpenPreview
-                                                                ? _jsx(TMLayoutItem, { children: _jsx(TMDcmtPreview, { onClose: () => { setIsOpenPreview(false); onClosePreviewPanel?.(); }, dcmtData: currentDcmt }) })
-                                                                : _jsx(_Fragment, {})] }) })
-                                                : _jsx(_Fragment, {})] }) }) }), showSearchResultSidebar && _jsx(TMCommandsPanel, { isMobile: deviceType === DeviceType.MOBILE, items: [
-                            ...(isMobile ? [{ icon: _jsx(IconArrowLeft, {}), onClick: !isClosable && allowBackButton() ? onBack : undefined }] : []),
-                            { icon: _jsx(IconShow, {}), selected: isOpenPreview, disabled: isPreviewDisabled, onClick: () => { if (!isPreviewDisabled)
-                                    setIsOpenPreview(!isOpenPreview); } },
-                            { icon: _jsx(IconBoard, {}), selected: isOpenBoard, disabled: isBoardDisabled, onClick: () => { if (!isBoardDisabled) {
-                                    closeMiddlePanel();
-                                    setIsOpenBoard(!isOpenBoard);
-                                } } },
-                            { icon: _jsx(IconDcmtTypeSys, {}), selected: isOpenSysMetadata, disabled: isSysMetadataDisabled, onClick: () => { if (!isSysMetadataDisabled) {
-                                    closeMiddlePanel();
-                                    setIsOpenSysMetadata(!isOpenSysMetadata);
-                                } } },
-                            ...(currentTIDHasMasterRelations ? [{ icon: _jsx(IconDetailDcmts, {}), selected: isOpenMaster, disabled: isMasterDisabled, onClick: () => { if (!isMasterDisabled)
-                                        setIsOpenMaster(!isOpenMaster); } }] : []),
-                            ...(currentTIDHasDetailRelations ? [{ icon: _jsx(IconDetailDcmts, { transform: 'scale(-1, 1)' }), selected: isOpenDetails, disabled: isDetailsDisabled, onClick: () => { if (!isDetailsDisabled)
-                                        setIsOpenDetails(!isOpenDetails); } }] : []),
-                        ] })] }), _jsx(StyledMultiViewPanel, { "$isVisible": isOpenDetails, children: isOpenDetails && _jsx(TMMasterDetailDcmts, { deviceType: deviceType, isForMaster: false, inputDcmts: getSelectionDcmtInfo(), allowNavigation: focusedItem && selectedItems.length <= 0, canNext: canNavigateHandler('next'), canPrev: canNavigateHandler('prev'), onNext: () => onNavigateHandler('next'), onPrev: () => onNavigateHandler('prev'), onBack: () => setIsOpenDetails(false) }) }), _jsxs(StyledMultiViewPanel, { "$isVisible": isOpenMaster, children: [isOpenMaster && _jsx(TMMasterDetailDcmts, { deviceType: deviceType, inputDcmts: getSelectionDcmtInfo(), isForMaster: true, allowNavigation: focusedItem && selectedItems.length <= 0, canNext: canNavigateHandler('next'), canPrev: canNavigateHandler('prev'), onNext: () => onNavigateHandler('next'), onPrev: () => onNavigateHandler('prev'), onBack: () => setIsOpenMaster(false), appendMasterDcmts: handleAddItem }), secondaryMasterDcmts.length > 0 && secondaryMasterDcmts.map((dcmt, index) => {
+                }, children: _jsx(TMLayoutWaitingContainer, { direction: 'vertical', showWaitPanel: showWaitPanel, showWaitPanelPrimary: showPrimary, showWaitPanelSecondary: showSecondary, waitPanelTitle: waitPanelTitle, waitPanelTextPrimary: waitPanelTextPrimary, waitPanelValuePrimary: waitPanelValuePrimary, waitPanelMaxValuePrimary: waitPanelMaxValuePrimary, waitPanelTextSecondary: waitPanelTextSecondary, waitPanelValueSecondary: waitPanelValueSecondary, waitPanelMaxValueSecondary: waitPanelMaxValueSecondary, isCancelable: true, abortController: abortController, children: _jsx(TMPanelManager, { panels: panelsConfig, initialMobilePanelId: 'TMSearchResult', showToolbar: showSearchResultSidebar, toolbarMode: 1 }) }) }), _jsx(StyledMultiViewPanel, { "$isVisible": isOpenDetails, children: isOpenDetails && _jsx(TMMasterDetailDcmts, { deviceType: deviceType, isForMaster: false, inputDcmts: getSelectionDcmtInfo(), allowNavigation: focusedItem && selectedItems.length <= 0, canNext: canNavigateHandler('next'), canPrev: canNavigateHandler('prev'), onNext: () => onNavigateHandler('next'), onPrev: () => onNavigateHandler('prev'), onBack: () => setIsOpenDetails(false) }) }), _jsxs(StyledMultiViewPanel, { "$isVisible": isOpenMaster, children: [isOpenMaster && _jsx(TMMasterDetailDcmts, { deviceType: deviceType, inputDcmts: getSelectionDcmtInfo(), isForMaster: true, allowNavigation: focusedItem && selectedItems.length <= 0, canNext: canNavigateHandler('next'), canPrev: canNavigateHandler('prev'), onNext: () => onNavigateHandler('next'), onPrev: () => onNavigateHandler('prev'), onBack: () => setIsOpenMaster(false), appendMasterDcmts: handleAddItem }), secondaryMasterDcmts.length > 0 && secondaryMasterDcmts.map((dcmt, index) => {
                         return (_jsx(StyledModalContainer, { style: { backgroundColor: 'white' }, children: _jsx(TMMasterDetailDcmts, { deviceType: deviceType, inputDcmts: [dcmt], isForMaster: true, allowNavigation: false, onBack: () => handleRemoveItem(dcmt.TID, dcmt.DID), appendMasterDcmts: handleAddItem }) }, `${index}-${dcmt.DID}`));
                     })] }), _jsx(StyledMultiViewPanel, { "$isVisible": isOpenDcmtForm, children: isOpenDcmtForm && _jsx(TMDcmtForm, { TID: focusedItem?.TID, DID: focusedItem?.DID, layoutMode: dcmtFormLayoutMode, showPreview: deviceType !== DeviceType.MOBILE, count: visibleItems.length, itemIndex: visibleItems.findIndex(o => o.rowIndex === focusedItem?.rowIndex) + 1, canNext: canNavigateHandler('next'), canPrev: canNavigateHandler('prev'), onNext: () => onNavigateHandler('next'), onPrev: () => onNavigateHandler('prev'), onClose: () => { setIsOpenDcmtForm(false); }, onSavedAsyncCallback: async (tid, did) => { await refreshFocusedDataRowAsync(tid, did, true); } }) })] }));
 };

package/package.json

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