@topconsultnpm/sdkui-react-beta 6.13.63 → 6.13.65

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

@@ -26,6 +26,8 @@ export interface ITMHtmlEditor {
     isEditorEnabled?: boolean;
     /** Defines the toolbar layout mode (compact: Shows a minimal toolbar, expanded: Displays the full toolbar */
     toolbarMode?: 'compact' | 'expanded';
+    /** If true, the editor will be focused on mount */
+    autoFocus?: boolean;
 }
 declare const TMHtmlEditor: (props: ITMHtmlEditor) => import("react/jsx-runtime").JSX.Element;
 export default TMHtmlEditor;

package/lib/components/editors/TMHtmlEditor.js

@@ -4,7 +4,7 @@ import HtmlEditor, { Toolbar, Item } from 'devextreme-react/html-editor';
 import TMVilViewer from '../base/TMVilViewer';
 import { SDKUI_Localizator } from '../../helper';
 const TMHtmlEditor = (props) => {
-    const { width = "100%", height = "100%", initialMarkup = "", mentionsConfig, onValueChanged, validationItems = [], isEditorEnabled: isEditorEnabledProp = false, toolbarMode = 'compact' } = props;
+    const { width = "100%", height = "100%", initialMarkup = "", mentionsConfig, onValueChanged, validationItems = [], isEditorEnabled: isEditorEnabledProp = false, toolbarMode = 'compact', autoFocus = false } = props;
     // Ref for HtmlEditor instance
     const editorRef = useRef(null);
     // State for editor enable/disable
@@ -27,6 +27,15 @@ const TMHtmlEditor = (props) => {
             onValueChanged({ value: text });
         }
     };
+    // Focuses the HtmlEditor when the component mounts, if autoFocus is enabled
+    useEffect(() => {
+        if (autoFocus && editorRef.current?.instance) {
+            // Delay to ensure DOM is ready
+            setTimeout(() => {
+                editorRef.current?.instance().focus();
+            }, 500);
+        }
+    }, [autoFocus]);
     // Memoized check for validation errors
     const hasValidationErrors = useMemo(() => {
         return validationItems && validationItems.length > 0;

package/lib/components/features/documents/TMDcmtForm.d.ts

@@ -23,6 +23,7 @@ interface ITMDcmtFormProps {
     canNext?: boolean;
     canPrev?: boolean;
     isClosable?: boolean;
+    groupId?: string;
     onNext?: () => void;
     onPrev?: () => void;
     onClose?: () => void;

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

@@ -2,20 +2,19 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useEffect, useMemo, useState } from 'react';
 import styled, { keyframes } from 'styled-components';
 import TMDcmtPreview from './TMDcmtPreview';
-import { AccessLevels, ArchiveConstraints, ArchiveEngineByID, DcmtTypeListCacheService, LayoutModes, MetadataDataTypes, ResultTypes, SDK_Globals, SystemMIDsAsNumber, TemplateTIDs, UpdateEngineByID, ValidationItem } from '@topconsultnpm/sdk-ts-beta';
+import { AccessLevels, ArchiveConstraints, ArchiveEngineByID, DcmtTypeListCacheService, LayoutModes, MetadataDataTypes, ResultTypes, SDK_Globals, SDK_Localizator, SystemMIDsAsNumber, TemplateTIDs, UpdateEngineByID, ValidationItem } from '@topconsultnpm/sdk-ts-beta';
 import { ContextMenu } from 'devextreme-react';
 import { WorkFlowApproveRejectPopUp, WorkFlowOperationButtons, WorkFlowReAssignPopUp } from '../workflow/TMWorkflowPopup';
 import { DownloadTypes, FormModes } from '../../../ts';
 import { DeviceType, useDeviceType } from '../../base/TMDeviceProvider';
 import { useDcmtOperations } from '../../../hooks/useDcmtOperations';
 import { handleArchiveVisibility, searchResultToMetadataValues } from '../../../helper/queryHelper';
-import { genUniqueId, IconShow, SDKUI_Localizator, IconBoard, IconDcmtTypeSys, IconDetailDcmts, svgToString, IconDownload, calcIsModified, IconMenuVertical, Globalization, getListMaxItems, getSystemMetadata, IconBoxArchiveIn, IconClear, IconUndo, SDKUI_Globals, IconRoundFileUpload, IconArrowLeft, IconPreview } from '../../../helper';
+import { genUniqueId, IconShow, SDKUI_Localizator, IconBoard, IconDcmtTypeSys, IconDetailDcmts, svgToString, IconDownload, calcIsModified, IconMenuVertical, Globalization, getListMaxItems, getSystemMetadata, IconBoxArchiveIn, IconClear, IconUndo, SDKUI_Globals, IconPreview } from '../../../helper';
 import { hasDetailRelations, hasMasterRelations, isXMLFileExt } from '../../../helper/dcmtsHelper';
 import { TMColors } from '../../../utils/theme';
 import { StyledFormButtonsContainer, StyledModalContainer, StyledToolbarCardContainer } from '../../base/Styled';
 import ShowAlert from '../../base/TMAlert';
 import TMButton from '../../base/TMButton';
-import { TMSplitterLayout, TMLayoutItem } from '../../base/TMLayout';
 import { TMExceptionBoxManager, TMMessageBoxManager, ButtonNames } from '../../base/TMPopUp';
 import TMSpinner from '../../base/TMSpinner';
 import { TMLayoutWaitingContainer } from '../../base/TMWaitPanel';
@@ -29,12 +28,12 @@ import TMMasterDetailDcmts from './TMMasterDetailDcmts';
 import TMDcmtBlog from './TMDcmtBlog';
 import { useInputAttachmentsDialog } from '../../../hooks/useInputDialog';
 import TMModal from '../../base/TMModal';
-import TMPanel from '../../base/TMPanel';
-import TMCommandsPanel from '../../sidebar/TMCommandsPanel';
 import toppy from '../../../assets/Toppy-generico.png';
+import { TMPanelManagerProvider, useTMPanelManagerContext } from '../../layout/panelManager/TMPanelManagerContext';
+import TMPanelManagerContainer from '../../layout/panelManager/TMPanelManagerContainer';
 let abortControllerLocal = new AbortController();
 //#endregion
-const TMDcmtForm = ({ showHeader = true, onSaveRecents, layoutMode = LayoutModes.Update, onClose, onSavedAsyncCallback, TID, DID, formMode = FormModes.Update, canNext, canPrev, count, itemIndex, onNext, onPrev, customRightSidebarItems = [], allowNavigation = true, allowRelations = true, isClosable = false, isExpertMode = SDKUI_Globals.userSettings.advancedSettings.expertMode === 1, showDcmtForm = true, showDcmtFormSidebar = true, showPreview = false, showBoard = false, showSysMetadata = false, onClosePreviewPanel, onCloseBlogPanel, onCloseSysMetadataPanel, titleModal, isModal = false, widthModal = "100%", heightModal = "100%" }) => {
+const TMDcmtForm = ({ showHeader = true, onSaveRecents, layoutMode = LayoutModes.Update, onClose, onSavedAsyncCallback, TID, DID, formMode = FormModes.Update, canNext, canPrev, count, itemIndex, onNext, onPrev, customRightSidebarItems = [], allowNavigation = true, allowRelations = true, isClosable = false, isExpertMode = SDKUI_Globals.userSettings.advancedSettings.expertMode === 1, showDcmtForm = true, showDcmtFormSidebar = true, showPreview = false, showBoard = false, showSysMetadata = false, onClosePreviewPanel, onCloseBlogPanel, onCloseSysMetadataPanel, titleModal, isModal = false, widthModal = "100%", heightModal = "100%", groupId }) => {
     const mruTIDs = SDKUI_Globals.userSettings.archivingSettings.mruTIDs;
     const [id, setID] = useState('');
     const [showWaitPanelLocal, setShowWaitPanelLocal] = useState(false);
@@ -75,7 +74,6 @@ const TMDcmtForm = ({ showHeader = true, onSaveRecents, layoutMode = LayoutModes
     const { openConfirmAttachmentsDialog, ConfirmAttachmentsDialog } = useInputAttachmentsDialog();
     const { abortController, showWaitPanel, waitPanelTitle, showPrimary, waitPanelTextPrimary, waitPanelValuePrimary, waitPanelMaxValuePrimary, showSecondary, waitPanelTextSecondary, waitPanelValueSecondary, waitPanelMaxValueSecondary, downloadDcmtsAsync } = useDcmtOperations();
     const deviceType = useDeviceType();
-    const isOpenMiddlePanel = () => isOpenSysMetadata || isOpenBoard || isOpenTags || isOpenFormulaEditor;
     const retrieveMetadataAsync = async () => {
         try {
             await DcmtTypeListCacheService.GetAsync(TID).then(async (dtd) => {
@@ -138,62 +136,7 @@ const TMDcmtForm = ({ showHeader = true, onSaveRecents, layoutMode = LayoutModes
         setFocusedMetadataValue(undefined);
     }, [fromDTD, layoutMode]);
     const fileIsNotValid = (fromDTD?.archiveConstraint === ArchiveConstraints.ContentCompulsory && !dcmtFile);
-    const fileManagerIcon = useMemo(() => {
-        if (layoutMode === LayoutModes.Ark) {
-            return _jsx(IconRoundFileUpload, { color: fileIsNotValid ? TMColors.error : undefined });
-        }
-        return _jsx(IconShow, {});
-    }, [layoutMode, fileIsNotValid]);
-    const closeMiddlePanel = () => {
-        if (isOpenSysMetadata)
-            onCloseSysMetadataPanel?.();
-        if (isOpenBoard)
-            onCloseBlogPanel?.();
-        setIsOpenBoard(false);
-        setIsOpenSysMetadata(false);
-        setIsOpenTags(false);
-        setIsOpenFormulaEditor(false);
-    };
-    const titleText = () => {
-        if (isOpenTags)
-            return 'Tags';
-        if (isOpenSysMetadata)
-            return 'Metadati di sistema';
-        if (isOpenBoard)
-            return 'Bacheca';
-        if (isOpenFormulaEditor)
-            return `${SDKUI_Localizator.FormulaEditorTitle} (${focusedMetadataValue?.md?.nameLoc})`;
-        return '';
-    };
     const middlePanelToolbar = _jsxs("div", { style: { width: 'max-content', display: 'flex', alignItems: 'center', gap: '10px' }, children: [layoutMode === LayoutModes.Update && _jsx(TMSaveFormButtonPrevious, { btnStyle: 'icon', isModified: false, formMode: FormModes.ReadOnly, canPrev: canPrev, onPrev: () => onPrev?.() }), layoutMode === LayoutModes.Update && _jsx(TMSaveFormButtonNext, { btnStyle: 'icon', isModified: false, formMode: FormModes.ReadOnly, canNext: canNext, onNext: () => onNext?.() })] });
-    const getPrimarySplitterStartLayout = () => {
-        let size = isOpenDcmtForm ? ['100%', '0'] : ['0%', '100%'];
-        if (deviceType !== DeviceType.MOBILE) {
-            if (isOpenPreview || isOpenMiddlePanel()) {
-                if (layoutMode === LayoutModes.Ark) {
-                    size = ['50%', '50%'];
-                }
-                else if (isOpenDcmtForm) {
-                    size = ['50%', '50%'];
-                }
-                else
-                    size = ['0%', '100%'];
-            }
-        }
-        else {
-            size = (isOpenPreview || isOpenMiddlePanel()) ? ['0', '100%'] : ['100%', '0'];
-        }
-        return size;
-    };
-    const getSecondarySplitterStartLayout = () => {
-        if (isOpenPreview && !isOpenMiddlePanel()) {
-            return ['0', '100%'];
-        }
-        if (!isOpenPreview && isOpenMiddlePanel()) {
-            return ['100%', '0'];
-        }
-        return ['40%', '60%'];
-    };
     const getSelectionDcmtInfo = () => {
         let dcmts = [];
         dcmts.push({ TID: TID ?? 0, DID: DID ?? 0 });
@@ -206,12 +149,22 @@ const TMDcmtForm = ({ showHeader = true, onSaveRecents, layoutMode = LayoutModes
     const handleRemoveItem = (tid, did) => {
         setSecondaryMasterDcmts((prevItems) => prevItems.filter(item => item.TID !== tid && item.DID !== did));
     };
+    const isPreviewDisabled = layoutMode === LayoutModes.Ark && fromDTD?.archiveConstraint === ArchiveConstraints.OnlyMetadata;
+    const isBoardDisabled = layoutMode !== LayoutModes.Update;
+    const isSysMetadataDisabled = layoutMode !== LayoutModes.Update;
+    const isDetailsDisabled = layoutMode !== LayoutModes.Update || !DID;
+    const isMasterDisabled = layoutMode !== LayoutModes.Update || !DID;
     const getDcmts = () => { return [{ TID: currentDcmt?.tid, DID: currentDcmt?.did, FILEEXT: currentDcmt?.fileExt }]; };
     const commandsMenuItems = [
         { icon: svgToString(_jsx(IconDownload, {})), operationType: 'singleRow', disabled: fromDTD?.perm?.canRetrieveFile !== AccessLevels.Yes, text: "Download file", onClick: async () => await downloadDcmtsAsync(getDcmts(), DownloadTypes.Dcmt) },
         { icon: svgToString(_jsx(IconDownload, {})), operationType: 'singleRow', disabled: !isXMLFileExt(currentDcmt?.fileExt), text: "Download allegati XML", onClick: async () => await downloadDcmtsAsync(getDcmts(), DownloadTypes.Attachment, openConfirmAttachmentsDialog) },
+        ...(allowRelations && currentTIDHasMasterRelations ? [{ icon: svgToString(_jsx(IconDetailDcmts, { transform: 'scale(-1, 1)' })), operationType: 'singleRow', disabled: isMasterDisabled, text: SDKUI_Localizator.DcmtsMaster, onClick: () => { if (!isMasterDisabled)
+                    setIsOpenMaster(!isOpenMaster); } }] : []),
+        ...(allowRelations && currentTIDHasDetailRelations ? [{ icon: svgToString(_jsx(IconDetailDcmts, {})), operationType: 'singleRow', disabled: isDetailsDisabled, text: SDKUI_Localizator.DcmtsDetail, onClick: () => { if (!isDetailsDisabled)
+                    setIsOpenDetails(!isOpenDetails); } }] : []),
+        // ...customRightSidebarItems
     ];
-    const formToolbar = _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '10px' }, children: [canPrev != undefined && _jsx("p", { style: { textAlign: 'center', padding: '1px 4px', display: 'flex' }, children: `${itemIndex}/${count}` }), canPrev != undefined && _jsx(TMSaveFormButtonPrevious, { btnStyle: 'icon', iconColor: 'white', isModified: calcIsModified(formData, formDataOrig), formMode: formMode, canPrev: canPrev, onPrev: onPrev }), canNext != undefined && _jsx(TMSaveFormButtonNext, { btnStyle: 'icon', iconColor: 'white', isModified: calcIsModified(formData, formDataOrig), formMode: formMode, canNext: canNext, onNext: onNext }), layoutMode === LayoutModes.Update && _jsx(IconMenuVertical, { id: `commands-detail-${id}`, color: 'white', cursor: 'pointer' }), layoutMode === LayoutModes.Update && _jsx(ContextMenu, { showEvent: 'click', dataSource: commandsMenuItems, target: `#commands-detail-${id}` })] });
+    const formToolbar = _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '10px' }, children: [allowNavigation && canPrev != undefined && _jsx("p", { style: { textAlign: 'center', padding: '1px 4px', display: 'flex' }, children: `${itemIndex}/${count}` }), allowNavigation && canPrev != undefined && _jsx(TMSaveFormButtonPrevious, { btnStyle: 'icon', iconColor: 'white', isModified: calcIsModified(formData, formDataOrig), formMode: formMode, canPrev: canPrev, onPrev: onPrev }), allowNavigation && canNext != undefined && _jsx(TMSaveFormButtonNext, { btnStyle: 'icon', iconColor: 'white', isModified: calcIsModified(formData, formDataOrig), formMode: formMode, canNext: canNext, onNext: onNext }), layoutMode === LayoutModes.Update && _jsx(IconMenuVertical, { id: `commands-detail-${id}`, color: 'white', cursor: 'pointer' }), layoutMode === LayoutModes.Update && _jsx(ContextMenu, { showEvent: 'click', dataSource: commandsMenuItems, target: `#commands-detail-${id}` })] });
     function createChange(mid, metadataType, modifiedValue) {
         return { mid, metadataType, modifiedValue };
     }
@@ -432,6 +385,28 @@ const TMDcmtForm = ({ showHeader = true, onSaveRecents, layoutMode = LayoutModes
     const metadataValuesSourceOrig = useMemo(() => {
         return showAll ? formDataOrig.filter(o => o.mid && o.mid > 100) : formDataOrig.filter(o => o.mid && o.mid > 100).slice(0, listMaxItems);
     }, [showAll, formDataOrig]);
+    const handleClose = () => {
+        if (!isModified) {
+            onClose?.();
+            return;
+        }
+        TMMessageBoxManager.show({
+            parentId: isModal ? "TMDcmtFormShowConfirmForClose-" + id : undefined,
+            message: SDKUI_Localizator.SaveQuestion, buttons: [ButtonNames.YES, ButtonNames.NO, ButtonNames.CANCEL],
+            onButtonClick: async (e) => {
+                try {
+                    if (e == ButtonNames.CANCEL)
+                        return;
+                    if (e == ButtonNames.YES)
+                        await onSavedAsync?.();
+                    onClose?.();
+                }
+                catch (ex) {
+                    TMExceptionBoxManager.show({ exception: ex });
+                }
+            }
+        });
+    };
     const getFormula = () => {
         let fd = new FormulaDescriptor();
         fd.expression = FormulaHelper.isFormula(focusedMetadataValue?.value) ? FormulaHelper.removeFormulaTag(focusedMetadataValue?.value) : undefined;
@@ -441,11 +416,101 @@ const TMDcmtForm = ({ showHeader = true, onSaveRecents, layoutMode = LayoutModes
         fd.tid = TID;
         return fd;
     };
-    const isPreviewDisabled = layoutMode === LayoutModes.Ark && fromDTD?.archiveConstraint === ArchiveConstraints.OnlyMetadata;
-    const isBoardDisabled = layoutMode !== LayoutModes.Update;
-    const isSysMetadataDisabled = layoutMode !== LayoutModes.Update;
-    const isDetailsDisabled = layoutMode !== LayoutModes.Update || !DID;
-    const isMasterDisabled = layoutMode !== LayoutModes.Update || !DID;
+    const isMobile = deviceType === DeviceType.MOBILE;
+    const tmDcmtForm = useMemo(() => _jsx(_Fragment, { children: metadataValuesSource.length > 0 &&
+            _jsxs(StyledToolbarCardContainer, { children: [_jsx(TMMetadataValues, { TID: TID, metadataValues: metadataValuesSource, metadataValuesOrig: metadataValuesSourceOrig, isExpertMode: isExpertMode, isOpenDistinctValues: isOpenDistinctValues, openChooserBySingleClick: !isOpenDistinctValues, selectedMID: focusedMetadataValue?.mid, layoutMode: layoutMode, deviceType: deviceType, validationItems: validationItems, onFocusedItemChanged: (item) => { (item?.mid !== focusedMetadataValue?.mid) && setFocusedMetadataValue(item); }, onValueChanged: (newItems) => {
+                            setFormData((prevItems) => prevItems.map((item) => {
+                                const newItem = newItems.find((newItem) => newItem.tid === item.tid && newItem.mid === item.mid);
+                                return newItem ? { ...item, ...newItem } : item;
+                            }));
+                        }, onAdvancedMenuClick: (e) => {
+                            switch (e.button) {
+                                case AdvancedMenuButtons.DistinctValues:
+                                    setIsOpenDistinctValues(!isOpenDistinctValues);
+                                    break;
+                                case AdvancedMenuButtons.FormulaEditor:
+                                    setIsOpenFormulaEditor(!isOpenFormulaEditor);
+                                    break;
+                            }
+                        } }), _jsxs(StyledFormButtonsContainer, { children: [_jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: 10 }, children: _jsx("div", { style: { display: 'flex', justifyContent: 'center', alignItems: 'center', gap: '8px' }, children: layoutMode === LayoutModes.Update ? _jsxs(_Fragment, { children: [_jsx(TMSaveFormButtonSave, { showTooltip: false, btnStyle: 'advanced', advancedColor: '#f09c0a', isModified: isModified, formMode: formMode, errorsCount: validationItems.filter(o => o.ResultType == ResultTypes.ERROR).length, onSaveAsync: confirmActionPopup }), _jsx(TMSaveFormButtonUndo, { btnStyle: 'toolbar', showTooltip: true, color: 'primary', isModified: isModified, formMode: formMode, onUndo: onUndoHandler })] }) :
+                                        _jsxs(_Fragment, { children: [_jsx(TMButton, { disabled: archiveBtnDisabled, btnStyle: 'advanced', icon: _jsx(IconBoxArchiveIn, {}), width: 'auto', showTooltip: false, caption: SDKUI_Localizator.Archive, advancedColor: TMColors.success, onClick: confirmActionPopup }), _jsx(TMButton, { disabled: !clearFormBtnDisabled, btnStyle: 'advanced', icon: _jsx(IconClear, {}), width: 'auto', showTooltip: false, caption: SDKUI_Localizator.Clear, advancedColor: TMColors.tertiary, onClick: clearFormHandler }), DID && _jsx(TMButton, { disabled: undoBtnDisabled, btnStyle: 'advanced', icon: _jsx(IconUndo, {}), width: '150px', showTooltip: false, caption: SDKUI_Localizator.Undo, advancedColor: TMColors.tertiary, onClick: onUndoHandler })] }) }) }), totalItems > listMaxItems && _jsx(TMShowAllOrMaxItemsButton, { showAll: showAll, dataSourceLength: totalItems, onClick: () => { setShowAll(!showAll); } })] }), showApprovePopup && _jsx(WorkFlowApproveRejectPopUp, { deviceType: deviceType, TID: TID, DID: DID, op: 0, onClose: () => setShowApprovePopup(false) }), showRejectPopup && _jsx(WorkFlowApproveRejectPopUp, { deviceType: deviceType, TID: TID, DID: DID, op: 1, onClose: () => setShowRejectPopup(false) }), showReAssignPopup && _jsx(WorkFlowReAssignPopUp, { deviceType: deviceType, TID: TID, DID: DID, onClose: () => setShowReAssignPopup(false) }), _jsx(ConfirmAttachmentsDialog, {})] }) }), [TID, DID, formData, formDataOrig, focusedMetadataValue, isOpenDistinctValues, isOpenFormulaEditor, validationItems, showAll]);
+    const tmBlog = useMemo(() => _jsx(TMDcmtBlog, { tid: TID, did: DID }), [TID, DID]);
+    const tmSysMetadata = useMemo(() => _jsx(TMMetadataValues, { layoutMode: layoutMode, openChooserBySingleClick: !isOpenDistinctValues, TID: TID, isReadOnly: true, deviceType: deviceType, metadataValues: formData.filter(o => (o.mid != undefined && o.mid <= 100)), metadataValuesOrig: formData.filter(o => (o.mid != undefined && o.mid <= 100)), validationItems: [] }), [TID, formData, deviceType]);
+    const tmDcmtPreview = useMemo(() => _jsx(TMDcmtPreviewWrapper, { currentDcmt: currentDcmt, dcmtFile: dcmtFile, deviceType: deviceType, fromDTD: fromDTD, layoutMode: layoutMode, onFileUpload: (setFile) => {
+            setDcmtFile(setFile);
+        } }), [currentDcmt]);
+    const allInitialPanelVisibility = {
+        'tmDcmtForm': true,
+        'tmBlog': false,
+        'tmSysMetadata': false,
+        'tmDcmtPreview': true,
+    };
+    const initialPanelDimensions = {
+        'tmDcmtForm': { width: '25%', height: '100%' },
+        'tmBlog': { width: '25%', height: '100%' },
+        'tmSysMetadata': { width: '25%', height: '100%' },
+        'tmDcmtPreview': { width: '25%', height: '100%' },
+    };
+    const initialPanels = useMemo(() => [
+        {
+            id: 'tmDcmtForm',
+            name: SDK_Localizator.Metadatas,
+            contentOptions: {
+                component: tmDcmtForm,
+                isClosable: isClosable,
+                panelContainer: {
+                    showHeader: showHeader,
+                    title: fromDTD?.nameLoc,
+                    allowMaximize: !isMobile,
+                    onBack: (isClosable && deviceType !== DeviceType.MOBILE) ? undefined : handleClose,
+                    onClose: isClosable ? () => setIsOpenDcmtForm(false) : undefined,
+                    toolbar: allowNavigation ? formToolbar : _jsx(_Fragment, {})
+                },
+            },
+            toolbarOptions: {
+                icon: _jsx(IconPreview, { fontSize: 24 }),
+                visible: true,
+                orderNumber: 1,
+                isActive: allInitialPanelVisibility['tmDcmtForm']
+            }
+        },
+        {
+            id: 'tmBlog',
+            name: SDKUI_Localizator.BlogCase,
+            contentOptions: { component: tmBlog, panelContainer: { title: SDKUI_Localizator.BlogCase, allowMaximize: !isMobile } },
+            toolbarOptions: { icon: _jsx(IconBoard, { fontSize: 24 }), visible: true, disabled: isBoardDisabled, orderNumber: 2, isActive: allInitialPanelVisibility['tmBlog'] }
+        },
+        {
+            id: 'tmSysMetadata',
+            name: SDKUI_Localizator.MetadataSystem,
+            contentOptions: { component: tmSysMetadata, panelContainer: { title: SDKUI_Localizator.MetadataSystem, allowMaximize: !isMobile } },
+            toolbarOptions: { icon: _jsx(IconDcmtTypeSys, { fontSize: 24 }), visible: true, disabled: isSysMetadataDisabled, orderNumber: 3, isActive: allInitialPanelVisibility['tmSysMetadata'] }
+        },
+        {
+            id: 'tmDcmtPreview',
+            name: SDKUI_Localizator.PreviewDocument,
+            contentOptions: { component: tmDcmtPreview },
+            toolbarOptions: { icon: _jsx(IconShow, { fontSize: 24 }), disabled: isPreviewDisabled, visible: true, orderNumber: 4, isActive: allInitialPanelVisibility['tmDcmtPreview'] }
+        }
+    ], [tmDcmtForm, tmBlog, tmSysMetadata, tmDcmtPreview, isPreviewDisabled, isBoardDisabled, isSysMetadataDisabled, isClosable]);
+    // {showDcmtFormSidebar && <TMCommandsPanel
+    //     isMobile={deviceType === DeviceType.MOBILE}
+    //     items={[
+    //         ...(layoutMode === LayoutModes.Ark ? [
+    //             { icon: <IconRoundFileUpload />, selected: isOpenPreview, disabled: isPreviewDisabled, onClick: () => { if (!isPreviewDisabled) setIsOpenPreview(!isOpenPreview); } }
+    //         ] : []),
+    //         ...(layoutMode !== LayoutModes.Ark ? [
+    //             ...(deviceType === DeviceType.MOBILE ? [{ icon: <IconArrowLeft />, onClick: isClosable ? undefined : handleClose }] : []),
+    //             { icon: <IconPreview />, selected: isOpenDcmtForm, onClick: () => { setIsOpenDcmtForm(!isOpenDcmtForm); } },
+    //             { icon: <IconShow />, selected: isOpenPreview, disabled: isPreviewDisabled, onClick: () => { if (!isPreviewDisabled) setIsOpenPreview(!isOpenPreview); } },
+    //             { icon: <IconBoard />, selected: isOpenBoard, disabled: isBoardDisabled, onClick: () => { if (!isBoardDisabled) { closeMiddlePanel(); setIsOpenBoard(!isOpenBoard); } } },
+    //             { icon: <IconDcmtTypeSys />, selected: isOpenSysMetadata, disabled: isSysMetadataDisabled, onClick: () => { if (!isSysMetadataDisabled) { closeMiddlePanel(); setIsOpenSysMetadata(!isOpenSysMetadata); } } },
+    //         ] : []),
+    //         ...(allowRelations && currentTIDHasMasterRelations ? [{ icon: <IconDetailDcmts />, selected: isOpenMaster, disabled: isMasterDisabled, onClick: () => { if (!isMasterDisabled) setIsOpenMaster(!isOpenMaster); } }] : []),
+    //         ...(allowRelations && currentTIDHasDetailRelations ? [{ icon: <IconDetailDcmts transform='scale(-1, 1)' />, selected: isOpenDetails, disabled: isDetailsDisabled, onClick: () => { if (!isDetailsDisabled) setIsOpenDetails(!isOpenDetails); } }] : []),
+    //         ...customRightSidebarItems
+    //     ]}
+    // />}
     const renderDcmtForm = () => {
         return (_jsxs("div", { style: {
                 display: 'flex',
@@ -454,70 +519,24 @@ const TMDcmtForm = ({ showHeader = true, onSaveRecents, layoutMode = LayoutModes
                 gap: SDKUI_Globals.userSettings.themeSettings.gutters,
                 width: '100%',
                 height: '100%',
-            }, children: [_jsx("div", { style: { flex: 1, minWidth: 0, height: '100%' }, children: _jsxs(TMLayoutWaitingContainer, { direction: 'vertical', showWaitPanel: useWaitPanelLocalState ? showWaitPanelLocal : showWaitPanel, showWaitPanelPrimary: useWaitPanelLocalState ? showPrimaryLocal : showPrimary, showWaitPanelSecondary: useWaitPanelLocalState ? showSecondaryLocal : showSecondary, waitPanelTitle: useWaitPanelLocalState ? waitPanelTitleLocal : waitPanelTitle, waitPanelTextPrimary: useWaitPanelLocalState ? waitPanelTextPrimaryLocal : waitPanelTextPrimary, waitPanelValuePrimary: useWaitPanelLocalState ? waitPanelValuePrimaryLocal : waitPanelValuePrimary, waitPanelMaxValuePrimary: useWaitPanelLocalState ? waitPanelMaxValuePrimaryLocal : waitPanelMaxValuePrimary, waitPanelTextSecondary: useWaitPanelLocalState ? waitPanelTextSecondaryLocal : waitPanelTextSecondary, waitPanelValueSecondary: useWaitPanelLocalState ? waitPanelValueSecondaryLocal : waitPanelValueSecondary, waitPanelMaxValueSecondary: useWaitPanelLocalState ? waitPanelMaxValueSecondaryLocal : waitPanelMaxValueSecondary, isCancelable: useWaitPanelLocalState ? dcmtFile ? dcmtFile.size >= 1000000 : false : true, abortController: useWaitPanelLocalState ? abortControllerLocal : abortController, children: [_jsxs(TMSplitterLayout, { direction: 'horizontal', overflow: 'visible', separatorSize: SDKUI_Globals.userSettings.themeSettings.gutters, separatorColor: 'transparent', showSeparator: (isOpenPreview || isOpenMiddlePanel()) && deviceType !== DeviceType.MOBILE && isOpenDcmtForm, start: getPrimarySplitterStartLayout(), min: deviceType !== DeviceType.MOBILE && isOpenDcmtForm ? ['150px', '0'] : ['0', '0'], children: [_jsx(TMLayoutItem, { children: _jsx(TMPanel, { showHeader: showHeader, title: fromDTD?.nameLoc, toolbar: allowNavigation ? formToolbar : _jsx(_Fragment, {}), onBack: (isClosable && deviceType !== DeviceType.MOBILE) ? undefined : handleClose, onClose: isClosable ? () => setIsOpenDcmtForm(false) : undefined, children: metadataValuesSource.length > 0 &&
-                                                _jsxs(StyledToolbarCardContainer, { children: [_jsx(TMMetadataValues, { TID: TID, metadataValues: metadataValuesSource, metadataValuesOrig: metadataValuesSourceOrig, isExpertMode: isExpertMode, isOpenDistinctValues: isOpenDistinctValues, openChooserBySingleClick: !isOpenDistinctValues, selectedMID: focusedMetadataValue?.mid, layoutMode: layoutMode, deviceType: deviceType, validationItems: validationItems, onFocusedItemChanged: (item) => { (item?.mid !== focusedMetadataValue?.mid) && setFocusedMetadataValue(item); }, onValueChanged: (newItems) => {
-                                                                setFormData((prevItems) => prevItems.map((item) => {
-                                                                    const newItem = newItems.find((newItem) => newItem.tid === item.tid && newItem.mid === item.mid);
-                                                                    return newItem ? { ...item, ...newItem } : item;
-                                                                }));
-                                                            }, onAdvancedMenuClick: (e) => {
-                                                                switch (e.button) {
-                                                                    case AdvancedMenuButtons.DistinctValues:
-                                                                        setIsOpenDistinctValues(!isOpenDistinctValues);
-                                                                        break;
-                                                                    case AdvancedMenuButtons.FormulaEditor:
-                                                                        setIsOpenFormulaEditor(!isOpenFormulaEditor);
-                                                                        break;
-                                                                }
-                                                            } }), _jsxs(StyledFormButtonsContainer, { children: [_jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: 10 }, children: _jsx("div", { style: { display: 'flex', justifyContent: 'center', alignItems: 'center', gap: '8px' }, children: layoutMode === LayoutModes.Update ? _jsxs(_Fragment, { children: [_jsx(TMSaveFormButtonSave, { showTooltip: false, btnStyle: 'advanced', advancedColor: '#f09c0a', isModified: isModified, formMode: formMode, errorsCount: validationItems.filter(o => o.ResultType == ResultTypes.ERROR).length, onSaveAsync: confirmActionPopup }), _jsx(TMSaveFormButtonUndo, { btnStyle: 'toolbar', showTooltip: true, color: 'primary', isModified: isModified, formMode: formMode, onUndo: onUndoHandler })] }) :
-                                                                            _jsxs(_Fragment, { children: [_jsx(TMButton, { disabled: archiveBtnDisabled, btnStyle: 'advanced', icon: _jsx(IconBoxArchiveIn, {}), width: 'auto', showTooltip: false, caption: SDKUI_Localizator.Archive, advancedColor: TMColors.success, onClick: confirmActionPopup }), _jsx(TMButton, { disabled: !clearFormBtnDisabled, btnStyle: 'advanced', icon: _jsx(IconClear, {}), width: 'auto', showTooltip: false, caption: SDKUI_Localizator.Clear, advancedColor: TMColors.tertiary, onClick: clearFormHandler }), DID && _jsx(TMButton, { disabled: undoBtnDisabled, btnStyle: 'advanced', icon: _jsx(IconUndo, {}), width: '150px', showTooltip: false, caption: SDKUI_Localizator.Undo, advancedColor: TMColors.tertiary, onClick: onUndoHandler })] }) }) }), totalItems > listMaxItems && _jsx(TMShowAllOrMaxItemsButton, { showAll: showAll, dataSourceLength: totalItems, onClick: () => { setShowAll(!showAll); } })] }), showApprovePopup && _jsx(WorkFlowApproveRejectPopUp, { deviceType: deviceType, TID: TID, DID: DID, op: 0, onClose: () => setShowApprovePopup(false) }), showRejectPopup && _jsx(WorkFlowApproveRejectPopUp, { deviceType: deviceType, TID: TID, DID: DID, op: 1, onClose: () => setShowRejectPopup(false) }), showReAssignPopup && _jsx(WorkFlowReAssignPopUp, { deviceType: deviceType, TID: TID, DID: DID, onClose: () => setShowReAssignPopup(false) }), _jsx(ConfirmAttachmentsDialog, {})] }) }) }), isOpenPreview || isOpenMiddlePanel() ?
-                                        _jsx(TMLayoutItem, { children: _jsxs(TMSplitterLayout, { direction: 'horizontal', overflow: 'visible', separatorSize: SDKUI_Globals.userSettings.themeSettings.gutters, showSeparator: deviceType !== DeviceType.MOBILE && (isOpenPreview && isOpenMiddlePanel()), start: getSecondarySplitterStartLayout(), min: ['0', '0'], separatorColor: 'transparent', children: [isOpenMiddlePanel()
-                                                        ? _jsx(TMLayoutItem, { children: _jsxs(TMPanel, { showHeader: !(isOpenDetails && layoutMode === LayoutModes.Update), title: titleText(), onClose: () => { closeMiddlePanel(); }, children: [isOpenBoard && layoutMode === LayoutModes.Update &&
-                                                                        _jsx(TMDcmtBlog, { tid: TID, did: DID }), isOpenSysMetadata && layoutMode === LayoutModes.Update &&
-                                                                        _jsx(TMMetadataValues, { layoutMode: layoutMode, openChooserBySingleClick: !isOpenDistinctValues, TID: TID, isReadOnly: true, deviceType: deviceType, metadataValues: formData.filter(o => (o.mid != undefined && o.mid <= 100)), metadataValuesOrig: formData.filter(o => (o.mid != undefined && o.mid <= 100)), validationItems: [] }), isOpenFormulaEditor &&
-                                                                        _jsx(TMFormulaEditor, { isModal: false, formMode: FormModes.Update, inputData: getFormula(), showBack: false, onClose: () => setIsOpenFormulaEditor(false), onApplied: (newFormula) => {
-                                                                                setFormData((prevItems) => prevItems.map((item) => item.tid == newFormula.tid && item.mid === newFormula.mid ? { ...item, value: FormulaHelper.addFormulaTag(newFormula.expression), isSelected: true, isEditable: true } : item));
-                                                                                setFocusedMetadataValue(prevState => ({
-                                                                                    ...prevState,
-                                                                                    isSelected: true,
-                                                                                    isEditable: true,
-                                                                                    value: FormulaHelper.addFormulaTag(newFormula.expression)
-                                                                                }));
-                                                                            } })] }) })
-                                                        : _jsx(_Fragment, {}), isOpenPreview
-                                                        ? _jsxs(TMLayoutItem, { children: [layoutMode === LayoutModes.Update ?
-                                                                    _jsx(TMDcmtPreview, { onClosePanel: () => { setIsOpenPreview(false); onClosePreviewPanel?.(); }, dcmtData: currentDcmt }) :
-                                                                    _jsx(TMFileUploader, { onFileUpload: (file) => setDcmtFile(file), onClose: () => setIsOpenPreview(false), isRequired: fromDTD?.archiveConstraint === ArchiveConstraints.ContentCompulsory && dcmtFile === null, defaultBlob: dcmtFile, deviceType: deviceType }), " "] })
-                                                        : _jsx(_Fragment, {})] }) }) : _jsx(_Fragment, {})] }), isOpenDistinctValues &&
-                                _jsx(TMDistinctValues, { tid: TID, mid: focusedMetadataValue?.mid, isModal: true, showHeader: false, layoutMode: layoutMode, onSelectionChanged: (e) => {
-                                        if (!e)
-                                            return;
-                                        setFormData((prevItems) => prevItems.map((item) => item.tid == e.tid && item.mid === e.mid ? { ...item, value: e.newValue } : item));
-                                    } }), (isModal && onClose) && _jsx("div", { id: "TMDcmtFormShowConfirmForClose-" + id })] }) }), showDcmtFormSidebar && _jsx(TMCommandsPanel, { isMobile: deviceType === DeviceType.MOBILE, items: [
-                        ...(layoutMode === LayoutModes.Ark ? [
-                            { icon: _jsx(IconRoundFileUpload, {}), selected: isOpenPreview, disabled: isPreviewDisabled, onClick: () => { if (!isPreviewDisabled)
-                                    setIsOpenPreview(!isOpenPreview); } }
-                        ] : []),
-                        ...(layoutMode !== LayoutModes.Ark ? [
-                            ...(deviceType === DeviceType.MOBILE ? [{ icon: _jsx(IconArrowLeft, {}), onClick: isClosable ? undefined : handleClose }] : []),
-                            { icon: _jsx(IconPreview, {}), selected: isOpenDcmtForm, onClick: () => { setIsOpenDcmtForm(!isOpenDcmtForm); } },
-                            { 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);
-                                } } },
-                        ] : []),
-                        ...(allowRelations && currentTIDHasMasterRelations ? [{ icon: _jsx(IconDetailDcmts, {}), selected: isOpenMaster, disabled: isMasterDisabled, onClick: () => { if (!isMasterDisabled)
-                                    setIsOpenMaster(!isOpenMaster); } }] : []),
-                        ...(allowRelations && currentTIDHasDetailRelations ? [{ icon: _jsx(IconDetailDcmts, { transform: 'scale(-1, 1)' }), selected: isOpenDetails, disabled: isDetailsDisabled, onClick: () => { if (!isDetailsDisabled)
-                                    setIsOpenDetails(!isOpenDetails); } }] : []),
-                        ...customRightSidebarItems
-                    ] }), (fromDTD?.templateTID === TemplateTIDs.WF_WIApprView && !isOpenDetails && !isOpenMaster) &&
+            }, children: [_jsxs(TMLayoutWaitingContainer, { direction: 'vertical', showWaitPanel: useWaitPanelLocalState ? showWaitPanelLocal : showWaitPanel, showWaitPanelPrimary: useWaitPanelLocalState ? showPrimaryLocal : showPrimary, showWaitPanelSecondary: useWaitPanelLocalState ? showSecondaryLocal : showSecondary, waitPanelTitle: useWaitPanelLocalState ? waitPanelTitleLocal : waitPanelTitle, waitPanelTextPrimary: useWaitPanelLocalState ? waitPanelTextPrimaryLocal : waitPanelTextPrimary, waitPanelValuePrimary: useWaitPanelLocalState ? waitPanelValuePrimaryLocal : waitPanelValuePrimary, waitPanelMaxValuePrimary: useWaitPanelLocalState ? waitPanelMaxValuePrimaryLocal : waitPanelMaxValuePrimary, waitPanelTextSecondary: useWaitPanelLocalState ? waitPanelTextSecondaryLocal : waitPanelTextSecondary, waitPanelValueSecondary: useWaitPanelLocalState ? waitPanelValueSecondaryLocal : waitPanelValueSecondary, waitPanelMaxValueSecondary: useWaitPanelLocalState ? waitPanelMaxValueSecondaryLocal : waitPanelMaxValueSecondary, isCancelable: useWaitPanelLocalState ? dcmtFile ? dcmtFile.size >= 1000000 : false : true, abortController: useWaitPanelLocalState ? abortControllerLocal : abortController, children: [(groupId && groupId.length > 0) ?
+                            _jsx(TMPanelManagerContainer, { panels: initialPanels, direction: "horizontal", parentId: groupId, showToolbar: showDcmtFormSidebar })
+                            :
+                                _jsx(TMPanelManagerProvider, { panels: initialPanels, initialVisibility: allInitialPanelVisibility, initialDimensions: initialPanelDimensions, initialMobilePanelId: 'tmDcmtForm', children: _jsx(TMPanelManagerContainer, { panels: initialPanels, direction: "horizontal", parentId: groupId, showToolbar: showDcmtFormSidebar }) }), isOpenDistinctValues &&
+                            _jsx(TMDistinctValues, { tid: TID, mid: focusedMetadataValue?.mid, isModal: true, showHeader: false, layoutMode: layoutMode, onSelectionChanged: (e) => {
+                                    if (!e)
+                                        return;
+                                    setFormData((prevItems) => prevItems.map((item) => item.tid == e.tid && item.mid === e.mid ? { ...item, value: e.newValue } : item));
+                                } }), isOpenFormulaEditor &&
+                            _jsx(TMFormulaEditor, { isModal: true, formMode: FormModes.Update, inputData: getFormula(), showBack: false, onClose: () => setIsOpenFormulaEditor(false), onApplied: (newFormula) => {
+                                    setFormData((prevItems) => prevItems.map((item) => item.tid == newFormula.tid && item.mid === newFormula.mid ? { ...item, value: FormulaHelper.addFormulaTag(newFormula.expression), isSelected: true, isEditable: true } : item));
+                                    setFocusedMetadataValue(prevState => ({
+                                        ...prevState,
+                                        isSelected: true,
+                                        isEditable: true,
+                                        value: FormulaHelper.addFormulaTag(newFormula.expression)
+                                    }));
+                                } }), (isModal && onClose) && _jsx("div", { id: "TMDcmtFormShowConfirmForClose-" + id })] }), (fromDTD?.templateTID === TemplateTIDs.WF_WIApprView && !isOpenDetails && !isOpenMaster) &&
                     _jsx(ToppyHelpCenter, { deviceType: deviceType, 
                         // onClick={() => isMobile ? openConfigureMode?.() : undefined}
                         content: _jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: '10px' }, children: _jsx(WorkFlowOperationButtons, { onApprove: () => setShowApprovePopup(true), onReject: () => setShowRejectPopup(true), onReAssign: () => setShowReAssignPopup(true), isInDcmtForm: deviceType === DeviceType.MOBILE }) }) }), isOpenDetails &&
@@ -526,28 +545,6 @@ const TMDcmtForm = ({ showHeader = true, onSaveRecents, layoutMode = LayoutModes
                                 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}`));
                             })] })] }));
     };
-    const handleClose = () => {
-        if (!isModified) {
-            onClose?.();
-            return;
-        }
-        TMMessageBoxManager.show({
-            parentId: isModal ? "TMDcmtFormShowConfirmForClose-" + id : undefined,
-            message: SDKUI_Localizator.SaveQuestion, buttons: [ButtonNames.YES, ButtonNames.NO, ButtonNames.CANCEL],
-            onButtonClick: async (e) => {
-                try {
-                    if (e == ButtonNames.CANCEL)
-                        return;
-                    if (e == ButtonNames.YES)
-                        await onSavedAsync?.();
-                    onClose?.();
-                }
-                catch (ex) {
-                    TMExceptionBoxManager.show({ exception: ex });
-                }
-            }
-        });
-    };
     return (_jsx(_Fragment, { children: (isModal && onClose) ? _jsx(_Fragment, { children: _jsx(TMModal, { title: titleModal, onClose: handleClose, width: widthModal ?? '100%', height: heightModal ?? '100%', hidePopup: false, askClosingConfirm: true, children: _jsx("div", { style: { width: "100%", height: "100%", display: 'block', padding: "4px" }, children: renderDcmtForm() }) }) })
             : renderDcmtForm() }));
 };
@@ -607,3 +604,9 @@ const ToppyImage = styled.img `
 export const ToppyHelpCenter = ({ content, onClick, deviceType, top = -200 }) => {
     return (_jsxs(ToppyContainer, { children: [_jsx(ToppyImage, { "$isMobile": deviceType === DeviceType.MOBILE, onClick: onClick, src: toppy, alt: "Toppy" }), _jsx("div", { style: { top: deviceType === DeviceType.MOBILE ? -180 : top, right: deviceType === DeviceType.MOBILE ? 20 : 1, transform: 'rotate(20deg)', position: 'absolute', width: 'max-content', height: 'max-content' }, children: content })] }));
 };
+const TMDcmtPreviewWrapper = ({ currentDcmt, layoutMode, fromDTD, dcmtFile, deviceType, onFileUpload }) => {
+    const { setPanelVisibilityById, toggleMaximize, isResizingActive } = useTMPanelManagerContext();
+    return (layoutMode === LayoutModes.Update ?
+        _jsx(TMDcmtPreview, { onClosePanel: () => setPanelVisibilityById('tmDcmtPreview', false), onMaximizePanel: () => toggleMaximize('tmDcmtPreview'), dcmtData: currentDcmt, isResizingActive: isResizingActive }) :
+        _jsx(TMFileUploader, { onFileUpload: onFileUpload, onClose: () => setPanelVisibilityById('tmDcmtPreview', false), isRequired: fromDTD?.archiveConstraint === ArchiveConstraints.ContentCompulsory && dcmtFile === null, defaultBlob: dcmtFile, deviceType: deviceType, isResizingActive: isResizingActive }));
+};

package/lib/components/features/documents/TMDcmtPreview.d.ts

@@ -4,6 +4,7 @@ interface ITMDcmtPreviewProps {
     dcmtData: ITMDcmt | undefined;
     canNext?: boolean;
     canPrev?: boolean;
+    isResizingActive?: boolean;
     onNext?: () => void;
     onPrev?: () => void;
     onClosePanel?: () => void;
@@ -13,6 +14,7 @@ declare const TMDcmtPreview: React.FC<ITMDcmtPreviewProps>;
 export default TMDcmtPreview;
 interface ITMFileViewerProps {
     fileBlob?: Blob;
+    isResizingActive?: boolean;
 }
 export declare const TMFileViewer: React.FC<ITMFileViewerProps>;
 export declare const TMNothingToShow: ({ text, secondText, fileExt, icon }: {

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

@@ -15,7 +15,7 @@ import { TMSaveFormButtonPrevious, TMSaveFormButtonNext } from '../../forms/TMSa
 import { StyledAnimatedComponentOpacity } from '../../base/Styled';
 import TMPanel from '../../base/TMPanel';
 import { DeviceType, useDeviceType } from '../../base/TMDeviceProvider';
-const TMDcmtPreview = ({ dcmtData, onClosePanel, canNext, canPrev, onNext, onPrev, onMaximizePanel }) => {
+const TMDcmtPreview = ({ dcmtData, isResizingActive, onClosePanel, canNext, canPrev, onNext, onPrev, onMaximizePanel }) => {
     const [dcmtBlob, setDcmtBlob] = useState(undefined);
     const [showPreview, setShowPreview] = useState(false);
     const [isFromCache, setIsFromCache] = useState(false);
@@ -92,10 +92,10 @@ const TMDcmtPreview = ({ dcmtData, onClosePanel, canNext, canPrev, onNext, onPre
                                 { icon: _jsx(IconClear, {}), text: "Cancella la cache", onClick: () => { clearDcmtsFileCache(); setIsFromCache(false); } },
                             ] }, "btn13") })] }), children: error
                 ? _jsx(TMNothingToShow, { icon: _jsx(IconCloseOutline, { fontSize: 92, color: TMColors.error }), text: error })
-                : renderedPreview(dcmtData?.tid, dcmtData?.did, dcmtData?.fileExt, dcmtData?.fileSize, dcmtData?.fileCount, extensionHandler(dcmtData?.fileExt), showPreview, () => { loadDocumentWithCache(); setShowPreview(true); }, dcmtBlob) }) }));
+                : renderedPreview(dcmtData?.tid, dcmtData?.did, dcmtData?.fileExt, dcmtData?.fileSize, dcmtData?.fileCount, extensionHandler(dcmtData?.fileExt), showPreview, isResizingActive, () => { loadDocumentWithCache(); setShowPreview(true); }, dcmtBlob) }) }));
 };
 export default TMDcmtPreview;
-export const TMFileViewer = ({ fileBlob }) => {
+export const TMFileViewer = ({ fileBlob, isResizingActive }) => {
     const [blobUrl, setBlobUrl] = useState(undefined);
     const [fileType, setFileType] = useState(undefined);
     const [formattedXml, setFormattedXml] = useState(undefined);
@@ -134,7 +134,7 @@ export const TMFileViewer = ({ fileBlob }) => {
     if (fileBlob.type.includes('image')) {
         return (_jsx(ImageViewer, { fileBlob: fileBlob, alt: '' }));
     }
-    return (_jsx("iframe", { srcDoc: fileType?.includes("xml") && formattedXml ? `<html><body>${formattedXml}</body></html>` : undefined, src: !fileType?.includes("xml") || !formattedXml ? blobUrl : undefined, title: "File Viewer", width: "100%", height: "100%", style: { border: 'none', zIndex: 0 } }));
+    return (_jsx("iframe", { srcDoc: fileType?.includes("xml") && formattedXml ? `<html><body>${formattedXml}</body></html>` : undefined, src: !fileType?.includes("xml") || !formattedXml ? blobUrl : undefined, title: "File Viewer", width: "100%", height: "100%", style: { border: 'none', zIndex: 0, pointerEvents: isResizingActive === true ? "none" : "auto" } }));
 };
 const ImageViewer = ({ fileBlob, alt = 'Image', className }) => {
     const containerRef = useRef(null);
@@ -317,7 +317,7 @@ const ImageViewer = ({ fileBlob, alt = 'Image', className }) => {
 export const TMNothingToShow = ({ text = '', secondText, fileExt, icon = _jsx(IconPreview, { fontSize: 96 }) }) => {
     return (_jsx(StyledAnimatedComponentOpacity, { style: { width: '100%', height: '100%' }, children: _jsxs(StyledPanelStatusContainer, { children: [icon, _jsxs(StyledPreviewNotAvailable, { children: [text && _jsx("div", { children: text }), _jsxs("div", { children: [" ", secondText ?? 'Anteprima non disponibile.', fileExt && _jsx("b", { children: ` (*.${fileExt})` })] })] })] }) }));
 };
-const renderedPreview = (tid, did, fileExt, fileSize, fileCount, extHandler, showPreview, onDownloadShowPreviewClick, dcmtBlob) => {
+const renderedPreview = (tid, did, fileExt, fileSize, fileCount, extHandler, showPreview, isResizingActive, onDownloadShowPreviewClick, dcmtBlob) => {
     if (!did)
         return _jsx(TMNothingToShow, { text: 'Nessun documento selezionato.' });
     if (fileCount == 0) {
@@ -327,7 +327,7 @@ const renderedPreview = (tid, did, fileExt, fileSize, fileCount, extHandler, sho
         return _jsx(TMNothingToShow, { fileExt: fileExt });
     }
     if (showPreview) {
-        return (_jsx(StyledPreviewContainer, { style: { overflow: 'auto' }, children: _jsx(TMFileViewer, { fileBlob: dcmtBlob }) }));
+        return (_jsx(StyledPreviewContainer, { style: { overflow: 'auto' }, children: _jsx(TMFileViewer, { fileBlob: dcmtBlob, isResizingActive: isResizingActive }) }));
     }
     return (_jsx(StyledAnimatedComponentOpacity, { style: { width: '100%', height: '100%' }, children: _jsxs(StyledPanelStatusContainer, { children: [_jsx(IconPreview, { fontSize: 96 }), _jsxs("p", { children: [" La dimensione del file \u00E8 ", _jsx("strong", { children: formatBytes(fileSize) }), ". Visualizzare l'anteprima? "] }), _jsx(TMButton, { caption: "Si", onClick: onDownloadShowPreviewClick, showTooltip: false })] }) }));
 };

package/lib/components/features/documents/TMFileUploader.d.ts

@@ -6,6 +6,7 @@ interface ITMFileUploader {
     isRequired?: boolean;
     defaultBlob?: File | null;
     deviceType?: DeviceType;
+    isResizingActive?: boolean;
 }
 declare const TMFileUploader: React.FC<ITMFileUploader>;
 export default TMFileUploader;

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

@@ -10,7 +10,7 @@ import { DeviceType } from '../../base/TMDeviceProvider';
 import TMTooltip from '../../base/TMTooltip';
 import { TMFileViewer, StyledHeaderIcon } from './TMDcmtPreview';
 import TMPanel from '../../base/TMPanel';
-const TMFileUploader = ({ deviceType = DeviceType.DESKTOP, onClose, onFileUpload, isRequired = false, defaultBlob = null }) => {
+const TMFileUploader = ({ deviceType = DeviceType.DESKTOP, onClose, onFileUpload, isRequired = false, defaultBlob = null, isResizingActive }) => {
     const [dragOver, setDragOver] = useState(false);
     const [uploadedFile, setUploadedFile] = useState(defaultBlob);
     const [fileName, setFileName] = useState('');
@@ -71,7 +71,7 @@ const TMFileUploader = ({ deviceType = DeviceType.DESKTOP, onClose, onFileUpload
     };
     let content = !uploadedFile ?
         _jsx("div", { style: { display: 'flex', gap: 10, width: '100%', height: '100%' }, children: _jsxs(UploadContainer, { ref: uploaderRef, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, style: { backgroundColor: dragOver ? '#76b1e6' : 'white' }, onDoubleClick: browseHandler, "$isRequired": isRequired, children: [_jsx("div", { style: { display: 'flex', gap: '10px', flexDirection: 'column', position: 'absolute', right: 5, top: 5 }, children: _jsx(TMButton, { btnStyle: 'icon', caption: 'Sfoglia', color: isRequired && !uploadedFile ? 'error' : 'primary', onClick: browseHandler, icon: _jsx(IconFolderOpen, { fontSize: 22 }) }) }), _jsx("p", { style: { fontSize: '1.2rem', fontWeight: 'bold' }, children: deviceType === DeviceType.MOBILE ? 'Clicca per sfogliare il tuo file' : 'Trascina il tuo file qui o fai doppio click per sfogliarlo' }), isRequired && _jsxs("p", { style: { fontWeight: 'bold' }, children: [" ", SDKUI_Localizator.RequiredField, " "] })] }) }) :
-        _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 10, width: '100%', height: '100%' }, children: [_jsxs("div", { style: { backgroundColor: 'white', padding: '5px 10px', borderRadius: 8, display: 'flex', alignItems: 'center', justifyContent: 'space-between', color: TMColors.primaryColor }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 5 }, children: [_jsx("p", { children: "File name:" }), _jsxs("div", { style: { fontWeight: 'bold' }, children: [fileName, " ", _jsxs("span", { children: [" ", ` (${formatBytes(fileSize)})`, " "] })] })] }), uploadedFile && _jsx(TMButton, { btnStyle: 'icon', color: 'error', caption: 'Pulisci', onClick: clearFile, icon: _jsx(IconClear, { fontSize: 22 }) })] }), extensionHandler(fileExt) === FileExtensionHandler.READY_TO_SHOW ? _jsx(TMFileViewer, { fileBlob: uploadedFile }) :
+        _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 10, width: '100%', height: '100%' }, children: [_jsxs("div", { style: { backgroundColor: 'white', padding: '5px 10px', borderRadius: 8, display: 'flex', alignItems: 'center', justifyContent: 'space-between', color: TMColors.primaryColor }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 5 }, children: [_jsx("p", { children: "File name:" }), _jsxs("div", { style: { fontWeight: 'bold' }, children: [fileName, " ", _jsxs("span", { children: [" ", ` (${formatBytes(fileSize)})`, " "] })] })] }), uploadedFile && _jsx(TMButton, { btnStyle: 'icon', color: 'error', caption: 'Pulisci', onClick: clearFile, icon: _jsx(IconClear, { fontSize: 22 }) })] }), extensionHandler(fileExt) === FileExtensionHandler.READY_TO_SHOW ? _jsx(TMFileViewer, { fileBlob: uploadedFile, isResizingActive: isResizingActive }) :
                     _jsx("div", { style: { backgroundColor: '#f6dbdb', padding: '5px 10px', borderRadius: 8, display: 'flex', alignItems: 'center', justifyContent: 'space-between', color: TMColors.error }, children: _jsxs("div", { children: [" ", 'Anteprima non disponibile.', fileExt && _jsx("b", { children: ` (*.${fileExt})` })] }) })] });
     return (_jsx(TMPanel, { title: 'Caricamento File', onBack: deviceType === DeviceType.MOBILE ? () => onClose?.() : undefined, toolbar: deviceType !== DeviceType.MOBILE ? _jsx(StyledHeaderIcon, { onClick: onClose, "$color": 'white', children: _jsx(TMTooltip, { content: SDKUI_Localizator.Close, children: _jsx(IconCloseOutline, {}) }) }) : undefined, children: _jsxs("div", { style: { width: '100%', height: '100%', padding: '2px', display: 'flex', flexDirection: 'column', gap: 10 }, children: [_jsx(HiddenInput, { id: "fileInput", type: "file", onChange: handleInputChange }), content] }) }));
 };

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

@@ -5,7 +5,7 @@ import { ContextMenu } from 'devextreme-react';
 import { TMNothingToShow } from './TMDcmtPreview';
 import TMDcmtForm from './TMDcmtForm';
 import TMSearchResult from '../search/TMSearchResult';
-import { genUniqueId, getExceptionMessage, IconFolder, IconShow, IconBoard, IconDcmtTypeSys, IconCheckFile, IconDetailDcmts, SDKUI_Localizator, svgToString, IconMail, IconDcmtTypeOnlyMetadata, IconCopy, IconMultipleSelection, IconMenuVertical, IconSearchCheck, IconDataList } from '../../../helper';
+import { genUniqueId, getExceptionMessage, IconFolder, IconShow, IconBoard, IconDcmtTypeSys, IconCheckFile, IconDetailDcmts, SDKUI_Localizator, svgToString, IconMail, IconDcmtTypeOnlyMetadata, IconCopy, IconMultipleSelection, IconMenuVertical, IconSearchCheck, IconDataList, IconPreview } from '../../../helper';
 import { hasDetailRelations } from '../../../helper/dcmtsHelper';
 import { FormModes, SearchResultContext } from '../../../ts';
 import { TMColors } from '../../../utils/theme';
@@ -22,7 +22,7 @@ import TMDataListItemViewer from '../../viewers/TMDataListItemViewer';
 import { TMDcmtTypeTooltip } from '../../viewers/TMTidViewer';
 import TMTreeView from '../../base/TMTreeView';
 import TMDcmtIcon from './TMDcmtIcon';
-import { TMPanelManagerProvider } from '../../layout/panelManager/TMPanelManagerContext';
+import { TMPanelManagerProvider, useTMPanelManagerContext } from '../../layout/panelManager/TMPanelManagerContext';
 import TMPanelManagerContainer from '../../layout/panelManager/TMPanelManagerContainer';
 let abortController = new AbortController();
 const TMMasterDetailDcmts = ({ deviceType, inputDcmts, isForMaster, showCurrentDcmtIndicator = true, allowNavigation, canNext, canPrev, onNext, onPrev, onBack, appendMasterDcmts, onTaskCreateRequest }) => {
@@ -405,46 +405,66 @@ const TMMasterDetailDcmts = ({ deviceType, inputDcmts, isForMaster, showCurrentD
                 ?
                     _jsx(TMNothingToShow, { text: getTitle(), secondText: SDKUI_Localizator.NoDataToDisplay, icon: isForMaster ? _jsx(IconDetailDcmts, { fontSize: 96, transform: 'scale(-1, 1)' }) : _jsx(IconDetailDcmts, { fontSize: 96 }) })
                 :
-                    _jsx(TMTreeView, { dataSource: data, allowMultipleSelection: allowMultipleSelection, calculateItemsForNode: calculateItemsForNode, itemRender: renderItem, focusedItem: focusedItem, selectedItems: selectedItems, onFocusedItemChanged: handleFocusedItemChanged, onSelectionChanged: handleSelectedItemsChanged, onDataChanged: (items) => setData(updateHiddenProperty(items)) }) }), [data, isLoading, focusedItem, selectedItems, allowMultipleSelection, isForMaster]);
+                    _jsx(TMTreeViewWrapper, { data: data, allowMultipleSelection: allowMultipleSelection, calculateItemsForNode: calculateItemsForNode, renderItem: renderItem, focusedItem: focusedItem, selectedItems: selectedItems, onFocusedItemChanged: handleFocusedItemChanged, onSelectionChanged: handleSelectedItemsChanged, onDataChanged: (items) => setData(updateHiddenProperty(items)) }) }), [data, isLoading, focusedItem, selectedItems, allowMultipleSelection, isForMaster]);
     const tmFormOrResult = useMemo(() => _jsx(_Fragment, { children: focusedItem?.isDcmt ?
-            _jsx(TMDcmtForm, { TID: focusedItem?.tid, DID: focusedItem.did, isClosable: deviceType !== DeviceType.MOBILE, allowNavigation: false, allowRelations: deviceType !== DeviceType.MOBILE, showDcmtFormSidebar: deviceType === DeviceType.MOBILE }) :
-            _jsx(TMSearchResult, { groupId: 'tmFormOrResult', context: SearchResultContext.MASTER_DETAIL, allowFloatingBar: false, allowRelations: false, openDcmtFormAsModal: true, searchResults: focusedItem?.searchResult ?? [], showSearchResultSidebar: false, 
-                // onClose={() => { setShowDcmtForm(false); }}
-                onClosePreviewPanel: () => { }, onTaskCreateRequest: onTaskCreateRequest }) }), [focusedItem, deviceType]);
-    const allInitialPanelVisibility = {
-        'tmTreeView': true,
-        'tmFormOrResult': true,
-        'tmSearchResult': true,
-        'tmBlog': false,
-        'tmSysMetadata': false,
-        'tmDcmtPreview': false,
-    };
+            _jsx(TMDcmtForm, { groupId: 'tmFormOrResult', TID: focusedItem?.tid, DID: focusedItem.did, isClosable: deviceType !== DeviceType.MOBILE, allowNavigation: false, allowRelations: deviceType !== DeviceType.MOBILE, showDcmtFormSidebar: deviceType === DeviceType.MOBILE }) :
+            _jsx(TMSearchResult, { groupId: 'tmFormOrResult', isClosable: deviceType !== DeviceType.MOBILE, context: SearchResultContext.METADATA_SEARCH, allowFloatingBar: false, allowRelations: false, openDcmtFormAsModal: true, searchResults: focusedItem?.searchResult ?? [], showSearchResultSidebar: false, onTaskCreateRequest: onTaskCreateRequest }) }), [focusedItem, deviceType]);
     const initialPanelDimensions = {
         'tmTreeView': { width: '50%', height: '100%' },
         'tmFormOrResult': { width: '50%', height: '100%' },
+        'tmDcmtForm': { width: '25%', height: '100%' },
         'tmSearchResult': { width: '25%', height: '100%' },
         'tmBlog': { width: '25%', height: '100%' },
         'tmSysMetadata': { width: '25%', height: '100%' },
         'tmDcmtPreview': { width: '25%', height: '100%' },
     };
+    const allInitialPanelVisibility = {
+        'tmTreeView': true,
+        'tmFormOrResult': true,
+        'tmDcmtForm': false,
+        'tmSearchResult': true,
+        'tmBlog': false,
+        'tmSysMetadata': false,
+        'tmDcmtPreview': false,
+    };
     const initialPanels = useMemo(() => [
         {
             id: 'tmTreeView',
             name: SDK_Localizator.Relations,
-            contentOptions: { component: tmTreeView, panelContainer: { title: getTitle(), toolbar: toolbar, allowMaximize: !isMobile } },
-            toolbarOptions: { icon: _jsx(IconDataList, { fontSize: 24 }), visible: true, orderNumber: 1, isActive: allInitialPanelVisibility['tmTreeView'] }
+            contentOptions: {
+                component: tmTreeView,
+                isClosable: false,
+                panelContainer: {
+                    title: getTitle(),
+                    toolbar: toolbar,
+                    allowMaximize: !isMobile,
+                    onBack: onBack
+                }
+            },
+            toolbarOptions: {
+                icon: _jsx(IconDataList, { fontSize: 24 }),
+                visible: true,
+                orderNumber: 1,
+                isActive: allInitialPanelVisibility['tmTreeView']
+            }
         },
         {
             id: 'tmFormOrResult',
             name: focusedItem?.isDcmt ? SDK_Localizator.Metadatas : SDKUI_Localizator.SearchResult,
             contentOptions: {
-                component: tmFormOrResult
+                component: tmFormOrResult,
+                isClosable: false
             },
             children: [
+                {
+                    id: 'tmDcmtForm',
+                    name: SDK_Localizator.Metadatas,
+                    toolbarOptions: { icon: _jsx(IconPreview, { fontSize: 24 }), visible: false, orderNumber: 1, isActive: allInitialPanelVisibility['tmDcmtForm'] }
+                },
                 {
                     id: 'tmSearchResult',
-                    name: 'tmSearchResult',
-                    toolbarOptions: { icon: _jsx(IconSearchCheck, { fontSize: 24 }), visible: true, orderNumber: 3, isActive: allInitialPanelVisibility['tmSearchResult'] }
+                    name: SDKUI_Localizator.SearchResult,
+                    toolbarOptions: { icon: _jsx(IconSearchCheck, { fontSize: 24 }), visible: false, orderNumber: 1, isActive: allInitialPanelVisibility['tmSearchResult'] }
                 },
                 {
                     id: 'tmBlog',
@@ -462,9 +482,9 @@ const TMMasterDetailDcmts = ({ deviceType, inputDcmts, isForMaster, showCurrentD
                     toolbarOptions: { icon: _jsx(IconShow, { fontSize: 24 }), visible: true, orderNumber: 6, isActive: allInitialPanelVisibility['tmDcmtPreview'] }
                 }
             ],
-            toolbarOptions: { icon: _jsx(IconSearchCheck, { fontSize: 24 }), visible: true, orderNumber: 2, isActive: allInitialPanelVisibility['tmFormOrResult'] }
+            toolbarOptions: { icon: _jsx(IconSearchCheck, { fontSize: 24 }), visible: false, orderNumber: 2, isActive: allInitialPanelVisibility['tmFormOrResult'] }
         }
-    ], [tmTreeView, tmFormOrResult, focusedItem]);
+    ], [tmTreeView, tmFormOrResult, focusedItem?.isDcmt]);
     return (_jsx(TMLayoutWaitingContainer, { direction: 'vertical', showWaitPanel: showWaitPanel, showWaitPanelPrimary: showPrimary, waitPanelTitle: waitPanelTitle, waitPanelTextPrimary: waitPanelTextPrimary, waitPanelValuePrimary: waitPanelValuePrimary, waitPanelMaxValuePrimary: waitPanelMaxValuePrimary, isCancelable: true, abortController: abortController, children: _jsx(TMPanelManagerProvider, { panels: initialPanels, initialVisibility: allInitialPanelVisibility, initialDimensions: initialPanelDimensions, initialMobilePanelId: 'tmTreeView', children: _jsx(TMPanelManagerContainer, { panels: initialPanels, direction: "horizontal", showToolbar: true }) }) }));
 };
 export default TMMasterDetailDcmts;
@@ -545,3 +565,21 @@ const getDisplayValueByColumn = (col, value) => {
 export function IconBackhandIndexPointingRight(props) {
     return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 128 128", width: "1em", height: "1em", ...props, children: [_jsx("path", { fill: "#E0BB95", d: "M58.7 41.1c10.8.1 53.3.4 54.9.4c12.8.3 12.7 16.7.7 16.9c-1.5 0-25 1.1-32.2 1.3c5.2 2 7.5 11.9-3.1 14.9c5 2.6 6.4 12.9-4.2 14.7c3.8 2.5 4.3 10.9-6 14.2c-8.4 2.7-28.2 2-40.3-2.3c-9.1-3.3-8.4-5.8-16.7-5.6c-1.4 0-2.1-1.1-2.4-2.4c-1.3-5.9-1.9-26.3-.3-33.8c.4-1.6 1.7-1.8 2.2-1.9c2.1-.4 4.2-2.5 5-4.3c3.2-6.4 12.8-12.8 23.4-18.2c5.5-2.8 9.2-8.8 10.4-18.3c.8-6.3 8.6-7.7 11.8-2.5c2.2 3.6 2.9 7 2.9 10.4c.2 6.2-1.6 10.1-6.1 16.5" }), _jsx("defs", { children: _jsx("path", { id: "notoBackhandIndexPointingRightMediumLightSkinTone0", d: "M58.7 41.1c10.8.1 53.3.4 54.9.4c12.8.3 12.7 16.7.7 16.9c-1.5 0-25 1.1-32.2 1.3c5.2 2 7.5 11.9-3.1 14.9c5 2.6 6.4 12.9-4.2 14.7c3.8 2.5 4.3 10.9-6 14.2c-8.4 2.7-28.2 2-40.3-2.3c-9.1-3.3-8.4-5.8-16.7-5.6c-1.4 0-2.1-1.1-2.4-2.4c-1.3-5.9-1.9-26.3-.3-33.8c.4-1.6 1.7-1.8 2.2-1.9c2.1-.4 4.2-2.5 5-4.3c3.2-6.4 12.8-12.8 23.4-18.2c5.5-2.8 9.2-8.8 10.4-18.3c.8-6.3 8.6-7.7 11.8-2.5c2.2 3.6 2.9 7 2.9 10.4c.2 6.2-1.6 10.1-6.1 16.5" }) }), _jsx("clipPath", { id: "notoBackhandIndexPointingRightMediumLightSkinTone1", children: _jsx("use", { href: "#notoBackhandIndexPointingRightMediumLightSkinTone0" }) }), _jsx("g", { fill: "#D19661", clipPath: "url(#notoBackhandIndexPointingRightMediumLightSkinTone1)", children: _jsx("path", { d: "M73.3 59.5c.1 1.6 2.8 2.9 2.8 6.4c0 3.7-3 4.7-3.1 7.5c-.1 2.7 2 3.8 1.5 7.7c-.6 4.5-4.1 4-4.2 7.1c0 2.7 1.8 3.2 1.8 6.6c0 3.1-3 5.8-5.5 7s-1.2 3.4 0 3.4s11.9-1.3 14.5-8.2c3-8 11-29.6 8.8-36.9c-7.1-1-11.5-1.6-13.7-1.8c-.7-.1-2.9-.6-2.9 1.2M60.1 40.7c0 .9.1 1.5 1 1.5c1 0 43.6 2.1 51.6 2.3c9.2.2 8.7 7.6 5.9 10.1c-1.9 1.7.6 4 2.2 2.6s4.4-3.4 4.3-8.4s-4.4-8.6-8.4-8.9c-3.8-.3-56.6.8-56.6.8m-51.9 21c15.9 0 14.1-11.7 25.2-18.9c15.4-10.1 16.3-11.1 19.7-25.2c1.2-4.9 5.7-4.4 7.7-2.1s4.9-1.3 3.6-2.7s-7.8-7.7-14.8-1.1s-42 46.2-42 46.2z" }) }), _jsx("defs", { children: _jsx("use", { href: "#notoBackhandIndexPointingRightMediumLightSkinTone0", id: "notoBackhandIndexPointingRightMediumLightSkinTone2" }) }), _jsx("clipPath", { id: "notoBackhandIndexPointingRightMediumLightSkinTone3", children: _jsx("use", { href: "#notoBackhandIndexPointingRightMediumLightSkinTone2" }) }), _jsx("g", { fill: "#8D542E", clipPath: "url(#notoBackhandIndexPointingRightMediumLightSkinTone3)", children: _jsx("path", { d: "M58.7 41.1h-1.9c-.4 0-.8-.4-.2-1.3s5.8-8 5.8-15c0-3.2-.5-7.7-3.4-12.4c-.6-.9.2-1.4.9-1c.7.5 6.4 3.2 6.5 13.4s-7.7 16.3-7.7 16.3m65.1 8.8c-.5 0-1.1-.2-1.7 1c-.7 1.5-3.1 4.4-8.4 4.7s-38.1 2.5-38.9 2.5c-1.1 0-1.2 1.9.1 1.8c1.7-.1 7.2-.2 7.2-.2s30.9 1.8 36.9-.6c6.1-2.4 4.8-9.2 4.8-9.2M86.6 68.5c-.3-.1-.7-.1-1 .3c-1.5 2-4.6 3.5-10.6 3.3c-1.4 0-1.6 2.7.1 2.7c.7 0 4-.1 4-.1l6.6-.2zm-3.6 15c-.3-.1-.7-.1-1.1.4c-1.5 2-3.5 2.8-9.7 3c-1.5.1-1.4 2.6.2 2.6c1.1 0 2.4-.1 2.4-.1l7-.6zm-5.4 12.7c-.3-.1-.8-.2-1.2.4c-.8 1.1-2.9 3-7.5 4.4c-3.7 1.1-21.3 1.9-32.5-.7c-2.3-.5-9.9-3-13.6-5.3s-7.3-1.6-8.3-1.4s-6.3.7-6.3.7l2.5 3.7l27 8.6l38.5-.6z" }) })] }));
 }
+const TMTreeViewWrapper = ({ data, allowMultipleSelection, focusedItem, selectedItems, renderItem, calculateItemsForNode, onFocusedItemChanged, onSelectionChanged, onDataChanged }) => {
+    const { setPanelVisibilityById, setToolbarButtonVisibility } = useTMPanelManagerContext();
+    return (_jsx(TMTreeView, { dataSource: data, allowMultipleSelection: allowMultipleSelection, calculateItemsForNode: calculateItemsForNode, itemRender: renderItem, focusedItem: focusedItem, selectedItems: selectedItems, onFocusedItemChanged: (item) => {
+            onFocusedItemChanged?.(item);
+            if (item?.isDcmt) {
+                setPanelVisibilityById('tmSearchResult', false);
+                setPanelVisibilityById('tmDcmtForm', true);
+                setToolbarButtonVisibility('tmSearchResult', false);
+                setToolbarButtonVisibility('tmDcmtForm', true);
+            }
+            else {
+                setPanelVisibilityById('tmSearchResult', true);
+                setPanelVisibilityById('tmDcmtForm', false);
+                setToolbarButtonVisibility('tmSearchResult', true);
+                setToolbarButtonVisibility('tmDcmtForm', false);
+            }
+        }, onSelectionChanged: onSelectionChanged, onDataChanged: onDataChanged }));
+};

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

@@ -19,7 +19,6 @@ interface ITMSearchResultProps {
     onSelectedTIDChanged?: (TID: number) => void;
     onRefreshSearchAsync?: () => Promise<void>;
     onRefreshAfterAddDcmtToFavs?: () => void;
-    onClosePreviewPanel?: () => void;
     onTaskCreateRequest?: (taskContext: TaskContext) => void;
 }
 declare const TMSearchResult: React.FC<ITMSearchResultProps>;

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

@@ -49,12 +49,7 @@ const orderByName = (array) => {
         return 1;
     } return 0; });
 };
-const TMSearchResult = ({ context = SearchResultContext.METADATA_SEARCH, isVisible = true, allowRelations = true, openDcmtFormAsModal = false, searchResults = [], showSearchResultSidebar = true, showSelector = false, groupId, onClosePreviewPanel, 
-// showDcmtForm = false, 
-// showBoard = false, 
-// showPreview = false, 
-// showSysMetadata = false, 
-title, isClosable = false, allowFloatingBar = true, showToolbarHeader = true, onRefreshAfterAddDcmtToFavs, onRefreshSearchAsync, onSelectedTIDChanged, onUpdate, onClose, onTaskCreateRequest }) => {
+const TMSearchResult = ({ context = SearchResultContext.METADATA_SEARCH, isVisible = true, allowRelations = true, openDcmtFormAsModal = false, searchResults = [], showSearchResultSidebar = true, showSelector = false, groupId, title, isClosable = false, allowFloatingBar = true, showToolbarHeader = true, onRefreshAfterAddDcmtToFavs, onRefreshSearchAsync, onSelectedTIDChanged, onUpdate, onClose, onTaskCreateRequest }) => {
     const [id, setID] = useState('');
     const [showApprovePopup, setShowApprovePopup] = useState(false);
     const [showRejectPopup, setShowRejectPopup] = useState(false);
@@ -703,6 +698,6 @@ const TMSearchResultSelector = ({ searchResults = [], onSelectionChanged }) => {
 };
 //#endregion TMSearchResultSelector
 const TMDcmtPreviewWrapper = ({ currentDcmt }) => {
-    const { setPanelVisibilityById, toggleMaximize } = useTMPanelManagerContext();
-    return (_jsx(TMDcmtPreview, { onClosePanel: () => setPanelVisibilityById('tmDcmtPreview', false), onMaximizePanel: () => toggleMaximize('tmDcmtPreview'), dcmtData: currentDcmt }));
+    const { setPanelVisibilityById, toggleMaximize, isResizingActive } = useTMPanelManagerContext();
+    return (_jsx(TMDcmtPreview, { onClosePanel: () => setPanelVisibilityById('tmDcmtPreview', false), onMaximizePanel: () => toggleMaximize('tmDcmtPreview'), dcmtData: currentDcmt, isResizingActive: isResizingActive }));
 };

package/lib/components/layout/panelManager/TMPanelWrapper.js

@@ -6,6 +6,9 @@ import TMPanel from '../../base/TMPanel';
 const TMPanelWrapper = (props) => {
     const { panel, children } = props;
     const { panelVisibility, panelDimensions, togglePanelVisibility, maximizedPanels, toggleMaximize } = useTMPanelManagerContext();
+    // Default to true if isMaximizable or isClosable is undefined, ensuring safe and expected behavior
+    const isMaximizable = panel.contentOptions?.isMaximizable ?? true;
+    const isClosable = panel.contentOptions?.isClosable ?? true;
     // Get the current device type (e.g., mobile, tablet, desktop) using a custom hook
     const deviceType = useDeviceType();
     // This avoids unnecessary re-renders by only recalculating when deviceType changes
@@ -30,6 +33,6 @@ const TMPanelWrapper = (props) => {
         pointerEvents: 'auto',
     };
     return (_jsx("div", { "data-panel-id": panel.id, style: panelStyles, children: panel.contentOptions?.panelContainer ?
-            _jsx(TMPanel, { ...panel.contentOptions.panelContainer, allowMaximize: !isMobile, onHeaderDoubleClick: () => toggleMaximize(panel.id), onMaximize: () => toggleMaximize(panel.id), onClose: () => togglePanelVisibility(panel.id), children: children }) : children }));
+            _jsx(TMPanel, { ...panel.contentOptions.panelContainer, allowMaximize: !isMobile, onHeaderDoubleClick: isMaximizable ? () => toggleMaximize(panel.id) : undefined, onMaximize: isMaximizable ? () => toggleMaximize(panel.id) : undefined, onClose: isClosable ? () => togglePanelVisibility(panel.id) : undefined, children: children }) : children }));
 };
 export default TMPanelWrapper;

package/lib/components/layout/panelManager/types.d.ts

@@ -9,6 +9,8 @@ export interface TMPanelDefinition {
     childrenGroupDirection?: TMPanelDirection;
     contentOptions?: {
         component: ReactNode;
+        isClosable?: boolean;
+        isMaximizable?: boolean;
         panelContainer?: ITMPanelProps;
     };
     toolbarOptions?: {

package/package.json

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