@topconsultnpm/sdkui-react-beta 6.13.39 → 6.13.41

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

@@ -1,10 +1,10 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { SDK_Globals, DataColumnTypes, MetadataDataDomains, DataListViewModes, MetadataFormats, LayoutModes, TemplateTIDs, DcmtTypeListCacheService, AccessLevels, SystemMIDsAsNumber, ArchiveConstraints } from '@topconsultnpm/sdk-ts-beta';
 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;
@@ -380,39 +325,9 @@ const TMSearchResult = ({ context = SearchResultContext.METADATA_SEARCH, isVisib
                 break;
         }
     };
+    const searchResutlToolbar = _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) })] });
     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 +337,173 @@ 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: searchResutlToolbar
+                },
+            },
+        },
+        {
+            id: 'TMBlog',
+            name: SDKUI_Localizator.BlogCase,
+            toolbarOptions: {
+                icon: _jsx(IconBoard, { fontSize: 24 }),
+                disabled: !focusedItem?.DID,
+                visible: true,
+                isActive: showBoard,
+                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: showSysMetadata,
+                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: showPreview,
+                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); },
+            },
+        },
+    ];
+    const getPanelMobile = () => {
+        if (showPreview)
+            return 'TMDcmtPreview';
+        if (showBoard)
+            return 'TMBlog';
+        if (showSysMetadata)
+            return 'TMSysMetadata';
+        return 'TMSearchResult';
+    };
+    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: getPanelMobile(), 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/lib/components/grids/TMRecentsManager.js

@@ -4,11 +4,13 @@ import { useEffect, useState } from 'react';
 import ReactDOMServer from 'react-dom/server';
 import { DcmtTypeListCacheService } from '@topconsultnpm/sdk-ts-beta';
 import ContextMenu from 'devextreme-react/cjs/context-menu';
-import { IconDelete, SDKUI_Localizator, IconApply, IconInfo } from '../../helper';
+import { IconDelete, SDKUI_Localizator, IconApply, IconInfo, IconCloseOutline } from '../../helper';
 import { TMColors } from '../../utils/theme';
 import { DeviceType } from '../base/TMDeviceProvider';
 import { TMDcmtTypeChooserForm } from '../choosers/TMDcmtTypeChooser';
-import TMTidViewer, { TMDcmtTypeTooltip } from '../viewers/TMTidViewer';
+import TMTidViewer, { renderDTDTooltipContent, TMDcmtTypeTooltip } from '../viewers/TMTidViewer';
+import { StyledDivHorizontal, StyledOffCanvasPanel } from '../base/Styled';
+import { useOutsideClick } from '../../hooks/useOutsideClick';
 const StyledRecentTidItem = styled.div `
     display: flex;
     flex-direction: column;
@@ -27,9 +29,13 @@ const StyledRecentTidItem = styled.div `
         left: -7px;
         top: 50%;
         transform: translateY(-50%);
-        opacity: ${({ $isMobile }) => ($isMobile ? 1 : 0)};
+        opacity: 0;
         transition: opacity 0.2s;
-        pointer-events: ${({ $isMobile }) => ($isMobile ? 'auto' : 'none')};
+        pointer-events: none;
+        // On mobile, never show
+        ${({ $isMobile }) => $isMobile && `
+            display: none !important;
+        `}
     }
 
     &:hover .info-icon {
@@ -46,13 +52,18 @@ const iconDelete = () => ReactDOMServer.renderToString(_jsx(IconDelete, {}));
 const TMRecentsManager = ({ deviceType, mruTIDs, currentMruTID, onSelectedTID, onDeletedTID }) => {
     const [showDcmtTypeChooser, setShowDcmtTypeChooser] = useState(false);
     const [recentDcmtTypes, setRecentDcmtTypes] = useState([]);
+    const [infoDTD, setInfoDTD] = useState();
     useEffect(() => {
         DcmtTypeListCacheService.GetAllWithoutMetadataAsync().then((allTypes) => {
             const filtered = allTypes.filter(dt => mruTIDs.includes(dt.id));
             setRecentDcmtTypes(filtered);
         });
     }, [mruTIDs]);
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { style: { overflowY: deviceType === DeviceType.MOBILE ? 'auto' : undefined, display: 'flex', flexDirection: 'column', padding: '5px', width: '100%' }, children: [_jsx(StyledRecentTidItem, { id: `tid-${0}`, "$isMobile": deviceType === DeviceType.MOBILE, onClick: () => { setShowDcmtTypeChooser(true); }, children: _jsx("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', width: '100%' }, children: _jsx("p", { style: {
+    const panelRef = useOutsideClick(() => {
+        setInfoDTD(undefined);
+    });
+    const isMobile = deviceType === DeviceType.MOBILE;
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { style: { overflowY: isMobile ? 'auto' : undefined, display: 'flex', flexDirection: 'column', padding: '5px', width: '100%' }, children: [_jsx(StyledRecentTidItem, { id: `tid-${0}`, "$isMobile": isMobile, onClick: () => { setShowDcmtTypeChooser(true); }, children: _jsx("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', width: '100%' }, children: _jsx("p", { style: {
                                     color: TMColors.primaryColor,
                                     fontSize: '1rem',
                                     fontWeight: 600,
@@ -60,7 +71,20 @@ const TMRecentsManager = ({ deviceType, mruTIDs, currentMruTID, onSelectedTID, o
                                     overflow: 'hidden',
                                     textOverflow: 'ellipsis'
                                 }, children: `${SDKUI_Localizator.AllDcmtTypes} (${DcmtTypeListCacheService.CacheCount(true)})` }) }) }, 0), recentDcmtTypes.map((dtd) => {
-                        return (_jsxs(StyledRecentTidItem, { id: `tid-${dtd.id}`, onClick: () => { onSelectedTID?.(dtd.id ?? 0); }, children: [_jsx("span", { className: "info-icon", children: _jsx(TMDcmtTypeTooltip, { dtd: dtd, children: _jsx(IconInfo, { color: TMColors.primaryColor }) }) }), _jsx("div", { style: { display: 'flex', justifyContent: 'center', width: '100%' }, children: _jsx(TMTidViewer, { tid: dtd.id, color: TMColors.primaryColor, showIcon: false }) }), _jsx(ContextMenu, { dataSource: [{ text: SDKUI_Localizator.Remove, icon: iconDelete(), }], target: `#tid-${dtd.id}`, onItemClick: () => { onDeletedTID?.(dtd.id ?? 0); } }), currentMruTID == dtd.id &&
+                        return (_jsxs(StyledRecentTidItem, { id: `tid-${dtd.id}`, "$isMobile": isMobile, onClick: () => { onSelectedTID?.(dtd.id ?? 0); }, children: [_jsx("span", { className: "info-icon", children: _jsx(TMDcmtTypeTooltip, { dtd: dtd, children: _jsx(IconInfo, { color: TMColors.info }) }) }), _jsx("div", { style: { display: 'flex', justifyContent: 'center', width: '100%' }, children: _jsx(TMTidViewer, { tid: dtd.id, color: TMColors.primaryColor, showIcon: false }) }), _jsx(ContextMenu, { dataSource: [
+                                        {
+                                            text: SDKUI_Localizator.Remove,
+                                            icon: iconDelete(),
+                                            onClick: () => { onDeletedTID?.(dtd.id ?? 0); }
+                                        },
+                                        ...(isMobile ? [
+                                            {
+                                                text: SDKUI_Localizator.About,
+                                                icon: ReactDOMServer.renderToString(_jsx(IconInfo, { color: TMColors.info })),
+                                                onClick: () => { setInfoDTD(dtd); }
+                                            }
+                                        ] : [])
+                                    ], target: `#tid-${dtd.id}` }), currentMruTID == dtd.id &&
                                     _jsx("div", { style: {
                                             width: '24px',
                                             height: '24px',
@@ -74,6 +98,6 @@ const TMRecentsManager = ({ deviceType, mruTIDs, currentMruTID, onSelectedTID, o
                                             fontSize: '1rem',
                                             fontWeight: 'bold'
                                         }, children: _jsx(IconApply, { fontSize: 24, color: 'green' }) })] }, dtd.id));
-                    })] }), showDcmtTypeChooser && _jsx(TMDcmtTypeChooserForm, { onClose: () => setShowDcmtTypeChooser(false), onChoose: (tids) => { onSelectedTID?.(tids?.[0] ?? 0); } })] }));
+                    })] }), showDcmtTypeChooser && _jsx(TMDcmtTypeChooserForm, { onClose: () => setShowDcmtTypeChooser(false), onChoose: (tids) => { onSelectedTID?.(tids?.[0] ?? 0); } }), _jsxs(StyledOffCanvasPanel, { ref: panelRef, "$isOpen": isMobile && infoDTD !== undefined, children: [_jsxs(StyledDivHorizontal, { style: { gap: 10, padding: '10px 8px', width: '100%', alignItems: 'center' }, children: [_jsx("p", { style: { fontSize: '1.1rem', fontWeight: 'bold' }, children: `${SDKUI_Localizator.DcmtType} - ${SDKUI_Localizator.About}` }), _jsx(IconCloseOutline, { style: { marginLeft: 'auto', cursor: 'pointer' }, onClick: () => setInfoDTD(undefined) })] }), renderDTDTooltipContent(infoDTD)] })] }));
 };
 export default TMRecentsManager;

package/lib/components/layout/TMPanelLayout.d.ts

@@ -0,0 +1,39 @@
+import React, { ReactNode } from 'react';
+type TMPanelManagerNewProps = {
+    children: ReactNode;
+    showToolbar?: boolean;
+    emptyContent?: ReactNode;
+};
+type TMPanelGroupProps = {
+    orientation?: 'horizontal' | 'vertical';
+    allowItemResize?: boolean;
+    gutters?: number;
+    panelVisibility?: boolean[];
+    onTogglePanel?: (idx: number) => void;
+    panelLabels?: string[];
+    children: ReactNode;
+    parentVisibility?: boolean;
+    parentPanelCount?: number;
+    parentPanelVisibility?: boolean[];
+    parentOnTogglePanel?: (idx: number, path: number[]) => void;
+    path?: number[];
+};
+type TMPanelItemProps = {
+    width?: string;
+    height?: string;
+    minWidth?: string;
+    minHeight?: string;
+    children: ReactNode;
+    style?: React.CSSProperties;
+    label?: string;
+};
+export declare const TMPanelItem: React.FC<TMPanelItemProps>;
+export declare const TMPanelGroup: React.FC<TMPanelGroupProps>;
+declare const TMPanelLayout: React.FC<TMPanelManagerNewProps>;
+export default TMPanelLayout;
+type TMPanelLayoutToolbarProps = {
+    panelLabels: string[];
+    panelVisibility: boolean[];
+    onTogglePanel: (idx: number) => void;
+};
+export declare const TMPanelLayoutToolbar: React.FC<TMPanelLayoutToolbarProps>;