@topconsultnpm/sdkui-react-beta 6.14.15 → 6.14.17

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

@@ -11,12 +11,12 @@ export interface ITMPanelProps {
     totalItems?: number;
     toolbar?: any;
     padding?: string;
-    keepActiveState?: boolean;
     isVisible?: boolean;
     onBack?: () => void;
     onClose?: () => void;
     onHeaderDoubleClick?: () => void;
     onMaximize?: (isMaximized: boolean) => void;
+    onActiveChanged?: (isActive: boolean) => void;
 }
 declare const TMPanel: React.FC<ITMPanelProps>;
 export default TMPanel;

package/lib/components/base/TMPanel.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from 'react';
+import { useCallback, useRef, useState } from 'react';
 import styled from 'styled-components';
 import { IconArrowLeft, IconClearButton, IconWindowMaximize, IconWindowMinimize, isPositiveNumber, SDKUI_Globals, SDKUI_Localizator } from '../../helper';
 import TMButton from './TMButton';
@@ -65,23 +65,29 @@ const StyledPanelContent = styled.div `
         outline: none;
     }
 `;
-const TMPanel = ({ allowMaximize = true, color, backgroundColor, backgroundColorContainer, children, showHeader = true, title, totalItems, displayedItemsCount, toolbar, padding = '5px', keepActiveState = false, isVisible = true, onBack, onClose, onHeaderDoubleClick, onMaximize }) => {
+const TMPanel = ({ allowMaximize = true, color, backgroundColor, backgroundColorContainer, children, showHeader = true, title, totalItems, displayedItemsCount, toolbar, padding = '5px', isVisible = true, onBack, onClose, onHeaderDoubleClick, onMaximize, onActiveChanged }) => {
     const [isActive, setIsActive] = useState(false);
     const [isMaximized, setIsMaximized] = useState(false);
     const titleRowRef = useRef(null);
-    // If keepActiveState is true, always force isActive to true
-    useEffect(() => {
-        if (keepActiveState)
+    const handleFocus = useCallback(() => {
+        if (!isActive) {
             setIsActive(true);
-    }, [keepActiveState]);
-    const handleFocus = () => {
-        if (!keepActiveState)
-            setIsActive(true);
-    };
-    const handleBlur = () => {
-        if (!keepActiveState)
-            setIsActive(false);
-    };
+            onActiveChanged?.(true);
+        }
+    }, [isActive, onActiveChanged]);
+    const handleBlur = useCallback(() => {
+        // Usiamo un setTimeout per dare il tempo al browser di spostare il focus
+        // e controllare se il focus è andato a un figlio che poi si è disconnesso
+        // o se il focus è uscito definitivamente dal pannello
+        setTimeout(() => {
+            if (!document.activeElement || !document.activeElement.closest('tmpanel-container')) {
+                if (isActive) {
+                    setIsActive(false);
+                    onActiveChanged?.(false);
+                }
+            }
+        }, 0); // Un piccolo ritardo per consentire al browser di stabilire il nuovo activeElement
+    }, [isActive, onActiveChanged]);
     // handler for external maximize management
     const handleMaximize = () => {
         setIsMaximized(prevState => {
@@ -92,7 +98,7 @@ const TMPanel = ({ allowMaximize = true, color, backgroundColor, backgroundColor
             return newValue;
         });
     };
-    return (_jsxs(StyledPanelContainer, { "$isMaximized": onMaximize ? false : isMaximized, style: {
+    return (_jsxs(StyledPanelContainer, { className: "tmpanel-container", "$isMaximized": onMaximize ? false : isMaximized, style: {
             visibility: isVisible ? 'visible' : 'hidden',
         }, children: [showHeader &&
                 _jsx(StyledPanelHeader, { "$backgroundColor": backgroundColor, "$color": color, "$isActive": isActive, onDoubleClick: () => {

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

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from 'react';
 import Logo from '../../../assets/Toppy-generico.png';
 import { DcmtTypeListCacheService, LayoutModes, SDK_Localizator } from '@topconsultnpm/sdk-ts-beta';
-import { IconTree, SDKUI_Globals, SDKUI_Localizator, IconRecentlyViewed, IconPreview, IconShow, IconBoard, IconDcmtTypeSys } from '../../../helper';
+import { IconTree, SDKUI_Globals, SDKUI_Localizator, IconRecentlyViewed, IconPreview, IconShow, IconBoard, IconDcmtTypeSys, removeMruTid } from '../../../helper';
 import { useDeviceType, DeviceType } from '../../base/TMDeviceProvider';
 import TMLayoutContainer, { TMLayoutItem } from '../../base/TMLayout';
 import TMRecentsManager from '../../grids/TMRecentsManager';
@@ -13,13 +13,12 @@ import TMPanel from '../../base/TMPanel';
 import { TMPanelManagerProvider, useTMPanelManagerContext } from '../../layout/panelManager/TMPanelManagerContext';
 import TMPanelManagerContainer from '../../layout/panelManager/TMPanelManagerContainer';
 const TMArchive = ({ inputTID, fileFromConnector = null }) => {
-    const TIDs = SDKUI_Globals.userSettings.archivingSettings.mruTIDs;
     const [currentTID, setCurrentTID] = useState(0);
-    const [mruTIDs, setMruTIDs] = useState(TIDs);
+    const [mruTIDs, setMruTIDs] = useState([]);
     const [currentMruTID, setCurrentMruTID] = useState(0);
     const [fromDTD, setFromDTD] = useState();
     const deviceType = useDeviceType();
-    useEffect(() => { setMruTIDs(TIDs); }, []);
+    useEffect(() => { console.log(SDKUI_Globals.userSettings.archivingSettings.mruTIDs); setMruTIDs(SDKUI_Globals.userSettings.archivingSettings.mruTIDs); }, []);
     useEffect(() => {
         if (!inputTID)
             return;
@@ -33,10 +32,9 @@ const TMArchive = ({ inputTID, fileFromConnector = null }) => {
             setFromDTD(dtd);
         });
     }, [currentTID]);
-    const setSearchByTID = (tid) => { setCurrentTID(tid); };
     const isMobile = deviceType === DeviceType.MOBILE;
     const tmTreeSelectorElement = useMemo(() => _jsx(TMTreeSelectorWrapper, { isMobile: isMobile, onSelectedTIDChanged: (tid) => {
-            setSearchByTID(tid);
+            setCurrentTID(tid);
             if (tid && mruTIDs.includes(tid))
                 setCurrentMruTID(tid);
             else
@@ -46,11 +44,8 @@ const TMArchive = ({ inputTID, fileFromConnector = null }) => {
             setCurrentMruTID(tid);
             setCurrentTID(tid);
         }, onDeletedTID: (tid) => {
-            let newMruTIDS = mruTIDs.slice();
-            let index = newMruTIDS.findIndex(o => o == tid);
-            if (index >= 0)
-                newMruTIDS.splice(index, 1);
-            SDKUI_Globals.userSettings.searchSettings.mruTIDs = newMruTIDS.filter(tid => tid != undefined && tid != null);
+            let newMruTIDS = removeMruTid(SDKUI_Globals.userSettings.archivingSettings.mruTIDs, tid);
+            SDKUI_Globals.userSettings.archivingSettings.mruTIDs = newMruTIDS;
             setMruTIDs(newMruTIDS);
         } }), [mruTIDs, currentMruTID, deviceType]);
     const tmFormElement = useMemo(() => currentTID ?
@@ -117,7 +112,7 @@ const TMArchive = ({ inputTID, fileFromConnector = null }) => {
             ]
         },
     ], [tmTreeSelectorElement, tmRecentsManagerElement, tmFormElement, currentTID, mruTIDs]);
-    return (_jsx(TMPanelManagerProvider, { panels: initialPanels, initialVisibility: allInitialPanelVisibility, initialDimensions: initialPanelDimensions, initialMobilePanelId: 'tmRecentsManager', children: _jsx(TMPanelManagerContainer, { panels: initialPanels, direction: "horizontal", showToolbar: true }) }));
+    return (_jsx(TMPanelManagerProvider, { panels: initialPanels, initialVisibility: allInitialPanelVisibility, defaultDimensions: initialPanelDimensions, initialDimensions: initialPanelDimensions, initialMobilePanelId: 'tmRecentsManager', children: _jsx(TMPanelManagerContainer, { panels: initialPanels, direction: "horizontal", showToolbar: true }) }));
 };
 export default TMArchive;
 const TMTreeSelectorWrapper = ({ isMobile, onSelectedTIDChanged }) => {
@@ -136,6 +131,7 @@ const TMTreeSelectorWrapper = ({ isMobile, onSelectedTIDChanged }) => {
 };
 const TMRecentsManagerWrapper = ({ mruTIDs, currentMruTID, deviceType, onSelectedTID, onDeletedTID }) => {
     const { setPanelVisibilityById, setToolbarButtonVisibility } = useTMPanelManagerContext();
+    useEffect(() => { console.log('TMRecentsManagerWrapper -mruTIDs', mruTIDs); }, [mruTIDs]);
     return (_jsx(TMRecentsManager, { mruTIDs: mruTIDs, currentMruTID: currentMruTID, deviceType: deviceType, onSelectedTID: (tid) => {
             onSelectedTID?.(tid);
             if (deviceType === DeviceType.MOBILE)

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

@@ -9,7 +9,7 @@ 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, IconPreview, defaultDcmtFormLayout } 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';
@@ -29,12 +29,13 @@ import TMDcmtBlog from './TMDcmtBlog';
 import { useInputAttachmentsDialog } from '../../../hooks/useInputDialog';
 import TMModal from '../../base/TMModal';
 import toppy from '../../../assets/Toppy-generico.png';
-import { TMPanelManagerProvider, useTMPanelManagerContext } from '../../layout/panelManager/TMPanelManagerContext';
+import { useTMPanelManagerContext } from '../../layout/panelManager/TMPanelManagerContext';
 import TMPanelManagerContainer from '../../layout/panelManager/TMPanelManagerContainer';
+import { TMPanelManagerWithPersistenceProvider } from '../../layout/panelManager/TMPanelManagerWithPersistenceProvider';
+import { updateMruTids } from '../../../helper';
 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, allowNavigation = true, allowRelations = true, isClosable = false, isExpertMode = SDKUI_Globals.userSettings.advancedSettings.expertMode === 1, showDcmtFormSidebar = true, invokedByTodo = false, titleModal, isModal = false, widthModal = "100%", heightModal = "100%", groupId, onWFOperationCompleted, fileFromConnector = null, }) => {
-    const mruTIDs = SDKUI_Globals.userSettings.archivingSettings.mruTIDs;
     const [id, setID] = useState('');
     const [showWaitPanelLocal, setShowWaitPanelLocal] = useState(false);
     const [waitPanelTitleLocal, setWaitPanelTitleLocal] = useState('');
@@ -326,14 +327,8 @@ const TMDcmtForm = ({ showHeader = true, onSaveRecents, layoutMode = LayoutModes
             });
             await setMetadataListAsync(fromDTD?.metadata ?? [], true, res);
             resetHandler();
-            let newMruTIDS = mruTIDs ? mruTIDs.slice() : [];
-            let index = newMruTIDS.findIndex((o) => o == TID);
-            if (index >= 0)
-                newMruTIDS.splice(index, 1);
-            if (newMruTIDS.length >= 10)
-                newMruTIDS.splice(0, 1);
-            newMruTIDS.push(TID);
-            SDKUI_Globals.userSettings.archivingSettings.mruTIDs = newMruTIDS.filter(tid => tid != undefined && tid != null);
+            let newMruTIDS = updateMruTids(SDKUI_Globals.userSettings.archivingSettings.mruTIDs, TID);
+            SDKUI_Globals.userSettings.archivingSettings.mruTIDs = newMruTIDS;
             onSaveRecents?.(newMruTIDS);
             ShowAlert({ mode: 'success', title: 'Archiviazione', message: 'Il documento è stato archiviato con successo', duration: 3000 });
         }
@@ -440,55 +435,18 @@ const TMDcmtForm = ({ showHeader = true, onSaveRecents, layoutMode = LayoutModes
             setDcmtFile(setFile);
         } }), [currentDcmt, dcmtFile, deviceType, fromDTD, layoutMode]);
     const normalizedTID = TID !== undefined ? Number(TID) : undefined;
-    const dcmtFormSettings = SDKUI_Globals.userSettings.dcmtFormSettings.find(o => o.TID === normalizedTID);
-    const layout = dcmtFormSettings?.layout;
-    const layoutToDo = dcmtFormSettings?.layoutToDo;
-    const layoutObj = invokedByTodo ? layoutToDo : layout;
     const defaultPanelDimensions = {
         'tmDcmtForm': { width: '20%', height: '100%' },
         'tmBlog': { width: '30%', height: '100%' },
         'tmSysMetadata': { width: '20%', height: '100%' },
         'tmDcmtPreview': { width: '30%', height: '100%' },
     };
-    const allInitialPanelVisibility = useMemo(() => {
-        if (layoutObj) {
-            return {
-                'tmDcmtForm': layoutObj['tmDcmtForm']?.visible ?? true,
-                'tmBlog': layoutObj['tmBlog']?.visible ?? false,
-                'tmSysMetadata': layoutObj['tmSysMetadata']?.visible ?? false,
-                'tmDcmtPreview': layoutObj['tmDcmtPreview']?.visible ?? true,
-            };
-        }
-        return {
-            'tmDcmtForm': true,
-            'tmBlog': false,
-            'tmSysMetadata': false,
-            'tmDcmtPreview': true,
-        };
-    }, [layoutObj]);
-    const initialPanelDimensions = useMemo(() => {
-        if (layoutObj) {
-            return {
-                'tmDcmtForm': {
-                    width: layoutObj['tmDcmtForm']?.width ?? '20%',
-                    height: layoutObj['tmDcmtForm']?.height ?? '100%',
-                },
-                'tmBlog': {
-                    width: layoutObj['tmBlog']?.width ?? '30%',
-                    height: layoutObj['tmBlog']?.height ?? '100%',
-                },
-                'tmSysMetadata': {
-                    width: layoutObj['tmSysMetadata']?.width ?? '20%',
-                    height: layoutObj['tmSysMetadata']?.height ?? '100%',
-                },
-                'tmDcmtPreview': {
-                    width: layoutObj['tmDcmtPreview']?.width ?? '30%',
-                    height: layoutObj['tmDcmtPreview']?.height ?? '100%',
-                },
-            };
-        }
-        return defaultPanelDimensions;
-    }, [layoutObj]);
+    const allInitialPanelVisibility = {
+        'tmDcmtForm': true,
+        'tmBlog': false,
+        'tmSysMetadata': false,
+        'tmDcmtPreview': true,
+    };
     const initialPanels = useMemo(() => [
         {
             id: 'tmDcmtForm',
@@ -531,36 +489,58 @@ const TMDcmtForm = ({ showHeader = true, onSaveRecents, layoutMode = LayoutModes
             toolbarOptions: { icon: _jsx(IconShow, { fontSize: 24 }), disabled: isPreviewDisabled, visible: true, orderNumber: 4, isActive: allInitialPanelVisibility['tmDcmtPreview'] }
         }
     ], [tmDcmtForm, tmBlog, tmSysMetadata, tmDcmtPreview, isPreviewDisabled, isBoardDisabled, isSysMetadataDisabled, isClosable]);
-    function saveLayout(panelVisibility, panelDimensions) {
-        // console.log('panelVisibility', panelVisibility)
-        // console.log('panelDimensions', panelDimensions)
-        if (normalizedTID === undefined)
-            return;
-        const layoutPanels = {};
-        Object.keys(panelVisibility).forEach(id => {
-            layoutPanels[id] = {
-                visible: panelVisibility[id],
-                width: panelDimensions[id]?.width ?? defaultPanelDimensions[id]?.width ?? '100%',
-                height: panelDimensions[id]?.height ?? defaultPanelDimensions[id]?.height ?? '100%'
-            };
-        });
-        // console.log('layoutPanels', layoutPanels)
+    // Retrieves the current document form setting based on the normalized TID
+    const getCurrentDcmtFormSetting = () => {
         const settings = SDKUI_Globals.userSettings.dcmtFormSettings;
+        // Find the index of the setting that matches the normalized TID
         const idx = settings.findIndex(s => Number(s.TID) === normalizedTID);
-        const prevSetting = settings[idx] ?? {};
+        // Return both the index and the corresponding setting (or empty object if not found)
+        return { idx, setting: settings[idx] ?? {} };
+    };
+    // Checks if there's a saved panel layout for the current context (ToDo or general)
+    const hasSavedLayout = () => {
+        const { setting } = getCurrentDcmtFormSetting();
+        if (invokedByTodo) {
+            // If invoked by ToDo, check for existence of layoutToDo and that it has keys
+            return setting.layoutToDo !== undefined && Object.keys(setting.layoutToDo).length > 0;
+        }
+        else {
+            // Otherwise, check for general layout
+            return setting.layout !== undefined && Object.keys(setting.layout).length > 0;
+        }
+    };
+    // Persists the current panel states (layout) into user settings
+    const persistPanelStates = (state) => {
+        // If no valid TID or empty state, skip saving
+        if (normalizedTID === undefined || Object.keys(state).length === 0)
+            return;
+        const settings = SDKUI_Globals.userSettings.dcmtFormSettings;
+        const { idx, setting: existingSetting } = getCurrentDcmtFormSetting();
+        // Prepare the new setting object with updated layout depending on context
         const newSetting = {
             TID: normalizedTID,
-            layout: invokedByTodo ? (prevSetting.layout ?? defaultDcmtFormLayout) : layoutPanels,
-            layoutToDo: invokedByTodo ? layoutPanels : (prevSetting.layoutToDo ?? defaultDcmtFormLayout),
+            layout: invokedByTodo ? (existingSetting.layout ?? {}) : state,
+            layoutToDo: invokedByTodo ? state : (existingSetting.layoutToDo ?? {}),
         };
+        // Replace existing setting if found, otherwise push a new one
         if (idx >= 0) {
             settings[idx] = newSetting;
         }
         else {
             settings.push(newSetting);
         }
+        // Assign the updated settings array back to the global settings
         SDKUI_Globals.userSettings.dcmtFormSettings = [...settings];
-    }
+    };
+    // Retrieves the persisted panel states (layout) for the current context
+    const getPersistedPanelStates = () => {
+        // Do not return layout on mobile devices
+        if (isMobile)
+            return undefined;
+        const settings = getCurrentDcmtFormSetting()?.setting;
+        // Return the appropriate layout based on context
+        return invokedByTodo ? settings?.layoutToDo : settings?.layout;
+    };
     const renderDcmtForm = () => {
         return (_jsxs("div", { style: {
                 display: 'flex',
@@ -571,7 +551,7 @@ const TMDcmtForm = ({ showHeader = true, onSaveRecents, layoutMode = LayoutModes
                 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: [(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, onLayoutChanged: saveLayout }) }), isOpenDistinctValues &&
+                            : _jsx(TMPanelManagerWithPersistenceProvider, { panels: initialPanels, initialVisibility: allInitialPanelVisibility, defaultDimensions: defaultPanelDimensions, initialDimensions: defaultPanelDimensions, initialMobilePanelId: 'tmDcmtForm', isPersistenceEnabled: !isMobile ? hasSavedLayout() : false, persistPanelStates: !isMobile ? (state) => persistPanelStates(state) : undefined, persistedPanelStates: getPersistedPanelStates(), 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;
@@ -585,10 +565,8 @@ const TMDcmtForm = ({ showHeader = true, onSaveRecents, layoutMode = LayoutModes
                                         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 &&
+                                } }), (isModal && onClose) && _jsx("div", { id: "TMDcmtFormShowConfirmForClose-" + id })] }), (fromDTD?.templateTID === TemplateTIDs.WF_WIApprView && !isOpenDetails && !isOpenMaster && layoutMode === LayoutModes.Update) &&
+                    _jsx(ToppyHelpCenter, { deviceType: deviceType, 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 &&
                     _jsx(StyledModalContainer, { style: { backgroundColor: 'white' }, children: _jsx(TMMasterDetailDcmts, { deviceType: deviceType, isForMaster: false, inputDcmts: getSelectionDcmtInfo(), allowNavigation: allowNavigation, canNext: canNext, canPrev: canPrev, onNext: onNext, onPrev: onPrev, onBack: () => setIsOpenDetails(false) }) }), isOpenMaster &&
                     _jsxs(StyledModalContainer, { style: { backgroundColor: 'white' }, children: [_jsx(TMMasterDetailDcmts, { deviceType: deviceType, inputDcmts: getSelectionDcmtInfo(), isForMaster: true, allowNavigation: allowNavigation, canNext: canNext, canPrev: canPrev, onNext: onNext, onPrev: onPrev, 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}`));

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

@@ -483,7 +483,7 @@ const TMMasterDetailDcmts = ({ deviceType, inputDcmts, isForMaster, showCurrentD
             toolbarOptions: { icon: _jsx(IconSearchCheck, { fontSize: 24 }), visible: false, orderNumber: 2, isActive: allInitialPanelVisibility['tmFormOrResult'] }
         }
     ], [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 }) }) }));
+    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, defaultDimensions: initialPanelDimensions, initialDimensions: initialPanelDimensions, initialMobilePanelId: 'tmTreeView', children: _jsx(TMPanelManagerContainer, { panels: initialPanels, direction: "horizontal", showToolbar: true }) }) }));
 };
 export default TMMasterDetailDcmts;
 function getMetadataKeys(obj) {

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

@@ -5,7 +5,7 @@ import TMSavedQuerySelector from './TMSavedQuerySelector';
 import TMTreeSelector from './TMTreeSelector';
 import { TabPanel, Item } from 'devextreme-react/tab-panel';
 import TMSearchQueryPanel, { refreshLastSearch } from './TMSearchQueryPanel';
-import { getSysAllDcmtsSQD, IconFilter, IconRecentlyViewed, IconSavedQuery, IconTree, SDKUI_Globals, SDKUI_Localizator } from '../../../helper';
+import { getSysAllDcmtsSQD, IconFilter, IconRecentlyViewed, IconSavedQuery, IconTree, removeMruTid, SDKUI_Globals, SDKUI_Localizator, updateMruTids } from '../../../helper';
 import TMSearchResult from './TMSearchResult';
 import TMRecentsManager from '../../grids/TMRecentsManager';
 import { SearchResultContext } from '../../../ts';
@@ -131,11 +131,8 @@ const TMSearch = ({ inputTID, inputSqdID, isExpertMode = SDKUI_Globals.userSetti
             setCurrentMruTID(tid);
             setCurrentTID(tid);
         }, onDeletedTID: (tid) => {
-            let newMruTIDS = mruTIDs.slice();
-            let index = newMruTIDS.findIndex(o => o == tid);
-            if (index >= 0)
-                newMruTIDS.splice(index, 1);
-            SDKUI_Globals.userSettings.searchSettings.mruTIDs = newMruTIDS.filter(tid => tid != undefined && tid != null);
+            let newMruTIDS = removeMruTid(SDKUI_Globals.userSettings.searchSettings.mruTIDs, tid);
+            SDKUI_Globals.userSettings.searchSettings.mruTIDs = newMruTIDS;
             setMruTIDs(newMruTIDS);
         } }), [mruTIDs, currentMruTID, deviceType]);
     const tmSearchQueryPanelElement = useMemo(() => _jsx(TMSearchQueryPanelWrapper, { isExpertMode: isExpertMode, showBackToResultButton: searchResult.length > 0, fromDTD: fromDTD, SQD: currentSQD, onBackToResult: () => { setCurrentSearchView(TMSearchViews.Result); }, onSearchCompleted: (searchResult, qd) => {
@@ -146,16 +143,10 @@ const TMSearch = ({ inputTID, inputSqdID, isExpertMode = SDKUI_Globals.userSetti
             setCurrentSearchView(TMSearchViews.Result);
             // Salvataggio ultimi 10 TIDs 
             let fromTID = searchResult?.[0].fromTID;
-            let newMruTIDS = mruTIDs.slice();
-            let index = newMruTIDS.findIndex(o => o == fromTID);
-            if (index >= 0)
-                newMruTIDS.splice(index, 1);
-            if (newMruTIDS.length >= 10)
-                newMruTIDS.splice(0, 1);
-            newMruTIDS.push(fromTID);
+            let newMruTIDS = updateMruTids(SDKUI_Globals.userSettings.searchSettings.mruTIDs, fromTID);
+            SDKUI_Globals.userSettings.searchSettings.mruTIDs = newMruTIDS;
             setMruTIDs(newMruTIDS);
             setCurrentMruTID(fromTID);
-            SDKUI_Globals.userSettings.searchSettings.mruTIDs = newMruTIDS.filter(tid => tid != undefined && tid != null);
         }, onSqdSaved: async (newSqd) => {
             await loadDataSQDsAsync(true, newSqd.masterTID);
             await setSQDAsync(newSqd);
@@ -204,7 +195,7 @@ const TMSearch = ({ inputTID, inputSqdID, isExpertMode = SDKUI_Globals.userSetti
             toolbarOptions: { icon: _jsx(IconSavedQuery, { fontSize: 24 }), visible: true, orderNumber: 4, isActive: allInitialPanelVisibility['TMSavedQuerySelector'] }
         }
     ], [tmTreeSelectorElement, tmRecentsManagerElement, tmSearchQueryPanelElement, tmSavedQuerySelectorElement, fromDTD, mruTIDs]);
-    return (_jsxs(_Fragment, { children: [_jsx(StyledMultiViewPanel, { "$isVisible": currentSearchView === TMSearchViews.Search, children: _jsx(TMPanelManagerProvider, { panels: initialPanels, initialVisibility: allInitialPanelVisibility, initialDimensions: initialPanelDimensions, initialMobilePanelId: 'TMRecentsManager', children: _jsx(TMPanelManagerContainer, { panels: initialPanels, direction: "horizontal", showToolbar: true }) }) }), searchResult.length > 0 &&
+    return (_jsxs(_Fragment, { children: [_jsx(StyledMultiViewPanel, { "$isVisible": currentSearchView === TMSearchViews.Search, children: _jsx(TMPanelManagerProvider, { panels: initialPanels, initialVisibility: allInitialPanelVisibility, defaultDimensions: initialPanelDimensions, initialDimensions: initialPanelDimensions, initialMobilePanelId: 'TMRecentsManager', children: _jsx(TMPanelManagerContainer, { panels: initialPanels, direction: "horizontal", showToolbar: true }) }) }), searchResult.length > 0 &&
                 _jsx(TMSearchResult, { isVisible: currentSearchView === TMSearchViews.Result, context: SearchResultContext.METADATA_SEARCH, searchResults: searchResult, onRefreshAfterAddDcmtToFavs: onRefreshAfterAddDcmtToFavs, onRefreshSearchAsync: async () => {
                         setSearchResult(await refreshLastSearch(lastQdSearched) ?? []);
                     }, onTaskCreateRequest: onTaskCreateRequest, onClose: () => { setCurrentSearchView(TMSearchViews.Search); }, onFileOpened: onFileOpened })] }));

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { PlatformObjectValidator, WhereItem, SDK_Localizator, OrderByItem, SelectItem, SelectItemVisibilities, SDK_Globals, SavedQueryCacheService, SearchEngine, QueryOperators } from '@topconsultnpm/sdk-ts-beta';
 import styled from 'styled-components';
 import TMSearchQueryEditor from './TMSearchQueryEditor';
@@ -26,7 +26,8 @@ import TMShowAllOrMaxItemsButton from '../../base/TMShowAllOrMaxItemsButton';
 const TMSearchQueryPanel = ({ fromDTD, showBackToResultButton, isExpertMode = SDKUI_Globals.userSettings.advancedSettings.expertMode === 1, SQD, onSearchCompleted, onSqdSaved, onBack, onClosePanel, onMaximizePanel, onBackToResult }) => {
     const [confirmQueryParams, ConfirmQueryParamsDialog] = useQueryParametersDialog();
     const [qd, setQd] = useState();
-    const [shouldSearch, setShouldSearch] = useState(false); // Nuovo stato per attivare la ricerca
+    const [shouldSearch, setShouldSearch] = useState(false);
+    const [isQueryPanelActive, setIsQueryPanelActive] = useState(false);
     const [lastQdParams, setLastQdParams] = useState([]);
     const [dcmtTypesList, setDcmtTypesList] = useState([]);
     const [showSqdForm, setShowSqdForm] = useState(false);
@@ -41,7 +42,6 @@ const TMSearchQueryPanel = ({ fromDTD, showBackToResultButton, isExpertMode = SD
     const deviceType = useDeviceType();
     const isMobile = deviceType === DeviceType.MOBILE;
     let initialMaxItems = deviceType === DeviceType.MOBILE ? 8 : 12;
-    const panelRef = useRef(null);
     useEffect(() => {
         if (!SQD)
             return;
@@ -59,8 +59,7 @@ const TMSearchQueryPanel = ({ fromDTD, showBackToResultButton, isExpertMode = SD
     }, [shouldSearch, qd, showAdvancedSearch]);
     useEffect(() => {
         const handleKeyDown = (e) => {
-            if (panelRef.current &&
-                panelRef.current.contains(document.activeElement)) {
+            if (isQueryPanelActive) {
                 if (e.key === 'Enter') {
                     e.preventDefault();
                     // Disattiva l'elemento attivo per forzare l'onBlur
@@ -76,7 +75,7 @@ const TMSearchQueryPanel = ({ fromDTD, showBackToResultButton, isExpertMode = SD
         return () => {
             window.removeEventListener('keydown', handleKeyDown);
         };
-    }, []);
+    }, [isQueryPanelActive]);
     const setDataAsync = async (sqd) => {
         let newSqd = (sqd?.id == 1) ? sqd : await SavedQueryCacheService.GetAsync(sqd?.id);
         let newQd = SearchEngine.NormalizeQueryDescriptor(newSqd?.qd);
@@ -146,6 +145,9 @@ const TMSearchQueryPanel = ({ fromDTD, showBackToResultButton, isExpertMode = SD
             setQd(newQd);
         }
     }, []);
+    const handlePanelActiveChanged = useCallback((isActive) => {
+        setIsQueryPanelActive(isActive);
+    }, []);
     const handleAdvancedMenuClick = useCallback((e) => {
         if (e.button === AdvancedMenuButtons.DistinctValues) {
             setShowDistinctValuesPanel(true);
@@ -227,7 +229,7 @@ const TMSearchQueryPanel = ({ fromDTD, showBackToResultButton, isExpertMode = SD
         }
         setQd({ ...qd, orderBy: newOrderBy });
     }, [qd, fromDTD?.metadata, SQD?.masterTID]);
-    return (_jsxs("div", { ref: panelRef, style: { height: '100%' }, children: [_jsxs(TMPanel, { title: fromDTD?.nameLoc ?? SDKUI_Localizator.Search_Metadata, allowMaximize: !isMobile, onMaximize: isMobile ? undefined : onMaximizePanel, onHeaderDoubleClick: isMobile ? undefined : onMaximizePanel, onBack: onBack, toolbar: _jsx(_Fragment, { children: (SQD && !showSqdForm) ?
+    return (_jsxs(_Fragment, { children: [_jsxs(TMPanel, { title: fromDTD?.nameLoc ?? SDKUI_Localizator.Search_Metadata, allowMaximize: !isMobile, onMaximize: isMobile ? undefined : onMaximizePanel, onHeaderDoubleClick: isMobile ? undefined : onMaximizePanel, onBack: onBack, onActiveChanged: handlePanelActiveChanged, toolbar: _jsx(_Fragment, { children: (SQD && !showSqdForm) ?
                         _jsx(TMDropDownMenu, { backgroundColor: 'white', borderRadius: '3px', content: _jsx(TMButton, { btnStyle: 'icon', caption: 'Altro', icon: _jsx(IconMenuVertical, { color: 'white' }), showTooltip: false }), items: [
                                 ...(showBackToResultButton ? [{ icon: _jsx(IconArrowRight, {}), text: "Vai a risultato", onClick: () => { onBackToResult?.(); } }] : []),
                                 { icon: _jsx(IconAddCircleOutline, {}), beginGroup: true, text: SDKUI_Localizator.SavedQueryNew, onClick: () => { openSqdForm(FormModes.Create); } },

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

@@ -427,7 +427,7 @@ const TMSearchResult = ({ context = SearchResultContext.METADATA_SEARCH, isVisib
                 }, 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: (groupId && groupId.length > 0) ?
                         _jsx(TMPanelManagerContainer, { panels: initialPanels, direction: "horizontal", parentId: groupId, showToolbar: showSearchResultSidebar })
                         :
-                            _jsx(TMPanelManagerProvider, { panels: initialPanels, initialVisibility: allInitialPanelVisibility, initialDimensions: initialPanelDimensions, initialMobilePanelId: 'tmSearchResult', children: _jsx(TMPanelManagerContainer, { panels: initialPanels, direction: "horizontal", parentId: groupId, showToolbar: showSearchResultSidebar }) }) }) }), _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) => {
+                            _jsx(TMPanelManagerProvider, { panels: initialPanels, initialVisibility: allInitialPanelVisibility, defaultDimensions: initialPanelDimensions, initialDimensions: initialPanelDimensions, initialMobilePanelId: 'tmSearchResult', children: _jsx(TMPanelManagerContainer, { panels: initialPanels, direction: "horizontal", parentId: groupId, showToolbar: showSearchResultSidebar }) }) }) }), _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, { isModal: openDcmtFormAsModal, titleModal: fromDTD?.name ?? '', TID: focusedItem?.TID, DID: focusedItem?.DID, layoutMode: dcmtFormLayoutMode, 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); }, onWFOperationCompleted: onWFOperationCompleted, onSavedAsyncCallback: async (tid, did) => { await refreshFocusedDataRowAsync(tid, did, true); } }) })] }));
 };

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

@@ -1,12 +1,9 @@
-import { TMPanelDefinition, TMPanelDimensionsMap, TMPanelDirection } from './types';
+import { TMPanelDefinition, TMPanelDirection } from './types';
 interface TMPanelManagerContainerProps {
     panels: Array<TMPanelDefinition>;
     showToolbar: boolean;
     direction: TMPanelDirection;
     parentId?: string;
-    onLayoutChanged?: (panelVisibility: {
-        [id: string]: boolean;
-    }, panelDimensions: TMPanelDimensionsMap) => void;
 }
 declare const TMPanelManagerContainer: (props: TMPanelManagerContainerProps) => import("react/jsx-runtime").JSX.Element | null;
 export default TMPanelManagerContainer;

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useRef, useMemo, useEffect } from 'react';
+import React, { useRef, useMemo } from 'react';
 import styled from 'styled-components';
 import { useTMPanelManagerContext } from './TMPanelManagerContext';
 import TMPanelWrapper from './TMPanelWrapper';
@@ -23,13 +23,8 @@ const StyledResizerGutter = styled.div `
   z-index: 10;
 `;
 const TMPanelManagerContainer = (props) => {
-    const { panels, showToolbar, direction, parentId, onLayoutChanged } = props;
-    const { panelVisibility, panelDimensions, setPanelDimensionsById, hasVisiblePanels, maximizedPanels, updateIsResizingActive } = useTMPanelManagerContext();
-    // Returns data to parent for saving layout, only for desktop
-    useEffect(() => {
-        // console.log('useEffect panelVisibility, panelDimensions', panelVisibility, panelDimensions)
-        deviceType === DeviceType.DESKTOP && onLayoutChanged?.(panelVisibility, panelDimensions);
-    }, [panelVisibility, panelDimensions]);
+    const { panels, showToolbar, direction, parentId } = props;
+    const { panelVisibility, setPanelDimensionsById, hasVisiblePanels, maximizedPanels, updateIsResizingActive } = useTMPanelManagerContext();
     // 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

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

@@ -28,8 +28,10 @@ interface TMPanelManagerProviderProps {
     initialVisibility: {
         [id: string]: boolean;
     };
+    defaultDimensions: TMPanelDimensionsMap;
     initialDimensions: TMPanelDimensionsMap;
     initialMobilePanelId: string;
+    isPersistenceEnabled?: boolean;
 }
 export declare const TMPanelManagerProvider: (props: TMPanelManagerProviderProps) => import("react/jsx-runtime").JSX.Element;
 export declare const useTMPanelManagerContext: () => TMPanelManagerContextType;

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

@@ -5,13 +5,13 @@ import { DeviceType, useDeviceType } from '../../base/TMDeviceProvider';
 // Create a React context for the panel state and actions
 const TMPanelManagerContext = createContext(undefined);
 export const TMPanelManagerProvider = (props) => {
-    const { children, panels, initialDimensions, initialVisibility, initialMobilePanelId } = props;
+    const { children, panels, initialVisibility, defaultDimensions, initialDimensions, initialMobilePanelId, isPersistenceEnabled = false } = props;
     // 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
     let isMobile = useMemo(() => { return deviceType === DeviceType.MOBILE; }, [deviceType]);
     // Ref to persist the initial panel dimensions across renders without causing re-renders
-    const initialPanelDimensionsRef = useRef(initialDimensions);
+    const defaultPanelDimensionsRef = useRef(defaultDimensions);
     // Memoize the panel hierarchy map to avoid re-generating it on every render unless `panels` change
     const hierarchyMap = useMemo(() => generatePanelHierarchyMap(panels), [panels]);
     // State to track the dimensions (width and height) of each panel, initialized with props
@@ -32,69 +32,78 @@ export const TMPanelManagerProvider = (props) => {
         setToolbarButtonsDisabled(disabledMap);
     }, []);
     // Callback to update the visibility state of a specific panel and its related hierarchy
-    const updatePanelVisibility = useCallback((id, isVisible, prevVisibility) => {
+    const adjustPanelVisibilityAndSize = useCallback((id, isVisible, prevVisibility) => {
         // Clone previous visibility state to work with
-        let updated = { ...prevVisibility };
+        let updatedVisibility = { ...prevVisibility };
         if (isMobile) {
             if (isVisible) {
                 // On mobile, showing one panel hides all others first
-                updated = Object.keys(prevVisibility).reduce((acc, key) => { acc[key] = false; return acc; }, {});
+                updatedVisibility = Object.keys(prevVisibility).reduce((acc, key) => { acc[key] = false; return acc; }, {});
                 // Recursively determine and show parent panels
                 const parentsToShow = showParentRecursively(id, hierarchyMap);
-                parentsToShow.forEach(([pid, visible]) => { updated[pid] = visible; });
+                parentsToShow.forEach(([pid, visible]) => { updatedVisibility[pid] = visible; });
                 // Show the target panel
-                updated[id] = true;
+                updatedVisibility[id] = true;
                 // Redistribute dimensions to account for newly shown panel
-                setPanelDimensions(prev => redistributeDimensionsOnShow(id, prev, initialPanelDimensionsRef.current, hierarchyMap, updated));
+                setPanelDimensions(prev => redistributeDimensionsOnShow(id, prev, defaultPanelDimensionsRef.current, hierarchyMap, updatedVisibility));
             }
             else {
                 // Hide the panel
-                updated[id] = false;
+                updatedVisibility[id] = false;
                 // Recursively hide parents
-                const parentsToHide = hideParentRecursively(id, hierarchyMap, updated);
-                parentsToHide.forEach(([pid, visible]) => { updated[pid] = visible; });
+                const parentsToHide = hideParentRecursively(id, hierarchyMap, updatedVisibility);
+                parentsToHide.forEach(([pid, visible]) => { updatedVisibility[pid] = visible; });
                 4;
                 // Redistribute dimensions after hiding
-                setPanelDimensions(prev => redistributeDimensionsOnHide(id, prev, hierarchyMap, updated));
+                setPanelDimensions(prev => redistributeDimensionsOnHide(id, prev, hierarchyMap, updatedVisibility));
             }
         }
         else {
             if (isVisible) {
                 // On desktop, show panel and its parents without hiding others
                 const parentsToShow = showParentRecursively(id, hierarchyMap);
-                parentsToShow.forEach(([pid, visible]) => { updated[pid] = visible; });
+                parentsToShow.forEach(([pid, visible]) => { updatedVisibility[pid] = visible; });
                 // Show the panel
-                updated[id] = true;
+                updatedVisibility[id] = true;
                 // Adjust panel dimensions accordingly
-                setPanelDimensions(prev => redistributeDimensionsOnShow(id, prev, initialPanelDimensionsRef.current, hierarchyMap, updated));
+                setPanelDimensions(prev => redistributeDimensionsOnShow(id, prev, defaultPanelDimensionsRef.current, hierarchyMap, updatedVisibility));
             }
             else {
                 // Hide the panel
-                updated[id] = false;
+                updatedVisibility[id] = false;
                 // Recursively hide parent panels
-                const parentsToHide = hideParentRecursively(id, hierarchyMap, updated);
-                parentsToHide.forEach(([pid, visible]) => { updated[pid] = visible; });
+                const parentsToHide = hideParentRecursively(id, hierarchyMap, updatedVisibility);
+                parentsToHide.forEach(([pid, visible]) => { updatedVisibility[pid] = visible; });
                 // Adjust dimensions after hiding
-                setPanelDimensions(prev => redistributeDimensionsOnHide(id, prev, hierarchyMap, updated));
+                setPanelDimensions(prev => redistributeDimensionsOnHide(id, prev, hierarchyMap, updatedVisibility));
             }
         }
-        return updated;
+        return updatedVisibility;
     }, [hierarchyMap, isMobile]);
     // On initial mount: initialize panel visibility using the provided `initialVisibility` config
     // Each panel's visibility is processed through `updatePanelVisibility` to ensure hierarchy logic is applied
     useEffect(() => {
-        let updated = { ...initialVisibility };
-        Object.entries(initialVisibility).forEach(([id, isVisible]) => {
-            updated = updatePanelVisibility(id, isVisible, updated);
-        });
-        setPanelVisibility(updated);
+        if (isPersistenceEnabled) {
+            // If persistence is enabled, visibility and dimensions are already synced from persisted state, so just set them directly
+            setPanelVisibility(initialVisibility);
+            setPanelDimensions(initialDimensions);
+        }
+        else {
+            // If persistence is not enabled, recalculate visibility and dimensions based on the initial visibility, applying the hierarchy logic
+            let updated = { ...initialVisibility };
+            Object.entries(initialVisibility).forEach(([id, isVisible]) => {
+                updated = adjustPanelVisibilityAndSize(id, isVisible, updated);
+            });
+            // Update panel visibility state with recalculated values
+            setPanelVisibility(updated);
+        }
     }, []);
     // On mobile devices: automatically show the initial mobile panel when layout switches to mobile
     // This ensures the correct panel is visible by default on smaller screens
     useEffect(() => {
         if (isMobile) {
             setPanelVisibility(prev => {
-                return updatePanelVisibility(initialMobilePanelId, true, prev);
+                return adjustPanelVisibilityAndSize(initialMobilePanelId, true, prev);
             });
         }
     }, [isMobile]);
@@ -130,18 +139,18 @@ export const TMPanelManagerProvider = (props) => {
         // Clone the current visibility state of panels
         let updatedVisibility = { ...panelVisibility };
         // Start with the initial panel dimensions as the base for restoration
-        let nextDimensions = { ...initialPanelDimensionsRef.current };
+        let nextDimensions = { ...defaultPanelDimensionsRef.current };
         nextDimensions = Object.entries(updatedVisibility).reduce((acc, [id, isVisible]) => {
             if (isVisible) {
                 // If the panel is visible, adjust dimensions to show it properly
-                acc = redistributeDimensionsOnShow(id, acc, initialPanelDimensionsRef.current, hierarchyMap, updatedVisibility);
+                acc = redistributeDimensionsOnShow(id, acc, defaultPanelDimensionsRef.current, hierarchyMap, updatedVisibility);
             }
             else {
                 // If the panel is hidden, adjust dimensions to hide it
                 acc = redistributeDimensionsOnHide(id, acc, hierarchyMap, updatedVisibility);
             }
             return acc;
-        }, initialPanelDimensionsRef.current);
+        }, defaultPanelDimensionsRef.current);
         // Apply the recalculated dimensions to the panel state
         setPanelDimensions(nextDimensions);
     }, [initialVisibility, panelVisibility, hierarchyMap]);
@@ -165,17 +174,17 @@ export const TMPanelManagerProvider = (props) => {
             // Then update the visibility of the panel, toggling its current state
             setPanelVisibility(prev => {
                 const isCurrentlyVisible = prev[id];
-                return updatePanelVisibility(id, !isCurrentlyVisible, prev);
+                return adjustPanelVisibilityAndSize(id, !isCurrentlyVisible, prev);
             });
         }
         else {
             // If the panel is not maximized, simply toggle its visibility
             setPanelVisibility(prev => {
                 const isCurrentlyVisible = prev[id];
-                return updatePanelVisibility(id, !isCurrentlyVisible, prev);
+                return adjustPanelVisibilityAndSize(id, !isCurrentlyVisible, prev);
             });
         }
-    }, [maximizedPanels, resetMaximization, updatePanelVisibility]);
+    }, [maximizedPanels, resetMaximization, adjustPanelVisibilityAndSize]);
     // Sets the visibility of a panel by its ID to a specific value (true = show, false = hide)
     const setPanelVisibilityById = useCallback((id, isVisible) => {
         // If we are trying to hide a panel that is currently maximized, first reset the maximization to restore normal view before hiding
@@ -183,12 +192,12 @@ export const TMPanelManagerProvider = (props) => {
             resetMaximization();
         }
         // Then update the visibility state of the panel to the given value
-        setPanelVisibility(prev => updatePanelVisibility(id, isVisible, prev));
-    }, [maximizedPanels, resetMaximization, updatePanelVisibility]);
+        setPanelVisibility(prev => adjustPanelVisibilityAndSize(id, isVisible, prev));
+    }, [maximizedPanels, resetMaximization, adjustPanelVisibilityAndSize]);
     // Sets the dimensions (width and height) of a specific panel by its ID
     const setPanelDimensionsById = useCallback((id, width, height) => {
         // Update the ref holding the initial dimensions
-        initialPanelDimensionsRef.current = { ...initialPanelDimensionsRef.current, [id]: { width, height } };
+        defaultPanelDimensionsRef.current = { ...defaultPanelDimensionsRef.current, [id]: { width, height } };
         // Update the panel dimensions state
         setPanelDimensions(prev => ({ ...prev, [id]: { width, height } }));
     }, []);
@@ -222,7 +231,7 @@ export const TMPanelManagerProvider = (props) => {
             setToolbarButtonVisibility,
             setToolbarButtonDisabled,
             isResizingActive,
-            updateIsResizingActive
+            updateIsResizingActive,
         }, children: children }));
 };
 export const useTMPanelManagerContext = () => {

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

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+import type { TMPanelDefinition, TMPanelDimensionsMap } from './types';
+interface TMPanelManagerWithPersistenceProps {
+    children: ReactNode;
+    panels: Array<TMPanelDefinition>;
+    initialVisibility: {
+        [id: string]: boolean;
+    };
+    defaultDimensions: TMPanelDimensionsMap;
+    initialDimensions: TMPanelDimensionsMap;
+    initialMobilePanelId: string;
+    isPersistenceEnabled?: boolean;
+    persistPanelStates?: (state: Record<string, {
+        visible: boolean;
+        width: string;
+        height: string;
+    }>) => void;
+    persistedPanelStates?: Record<string, any>;
+}
+export declare const TMPanelManagerWithPersistenceProvider: (props: TMPanelManagerWithPersistenceProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

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

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect, useState } from 'react';
+import { TMPanelManagerProvider, useTMPanelManagerContext } from './TMPanelManagerContext';
+export const TMPanelManagerWithPersistenceProvider = (props) => {
+    const { children, panels, initialVisibility, defaultDimensions, initialDimensions, initialMobilePanelId, isPersistenceEnabled = false, persistedPanelStates, persistPanelStates } = props;
+    // Track when persisted state is loaded
+    const [loaded, setLoaded] = useState(false);
+    // State for visibility and dimensions based on persisted state (or fallback to props)
+    const [persistedInitialVisibility, setPersistedInitialVisibility] = useState(initialVisibility);
+    const [persistedInitialDimensions, setPersistedInitialDimensions] = useState(initialDimensions);
+    // Effect to initialize panel state from persisted data
+    useEffect(() => {
+        const loadPersistedState = () => {
+            if (persistedPanelStates && typeof persistedPanelStates === 'object' && Object.keys(persistedPanelStates).length > 0) {
+                try {
+                    const visibility = {};
+                    const dimensions = {};
+                    for (const [key, panel] of Object.entries(persistedPanelStates)) {
+                        visibility[key] = panel.visible;
+                        dimensions[key] = { width: panel.width, height: panel.height };
+                    }
+                    setPersistedInitialVisibility(visibility);
+                    setPersistedInitialDimensions(dimensions);
+                }
+                catch (err) {
+                    console.warn('Error retrieving data', err);
+                }
+            }
+            // Mark that initial load is complete (even if nothing is loaded)
+            setLoaded(true);
+        };
+        loadPersistedState();
+    }, []);
+    if (!loaded)
+        return null;
+    return (_jsxs(TMPanelManagerProvider, { panels: panels, initialVisibility: persistedInitialVisibility, defaultDimensions: defaultDimensions, initialDimensions: persistedInitialDimensions, initialMobilePanelId: initialMobilePanelId, isPersistenceEnabled: isPersistenceEnabled, children: [_jsx(PanelDimensionPersistenceEffect, { persistPanelStates: persistPanelStates }), children] }));
+};
+// Effect to watch for panel visibility and size changes and persist them
+const PanelDimensionPersistenceEffect = (props) => {
+    const { persistPanelStates } = props;
+    const { panelDimensions, panelVisibility, maximizedPanels } = useTMPanelManagerContext();
+    // Track if this is the first time persistence effect runs after initialization
+    const didSkipFirstSave = React.useRef(false);
+    useEffect(() => {
+        if (Object.keys(panelVisibility).length === 0 || Object.keys(panelDimensions).length === 0)
+            return;
+        // Skip the very first save to avoid saving immediately after init
+        if (!didSkipFirstSave.current) {
+            didSkipFirstSave.current = true;
+            return;
+        }
+        // If any panel is maximized, don't persist to avoid saving intermediate states
+        if (maximizedPanels.length > 0)
+            return;
+        const panelState = {};
+        for (const panelKey in panelVisibility) {
+            const visibility = panelVisibility[panelKey] ?? false;
+            const dimensions = panelDimensions[panelKey] ?? { width: "0%", height: "0%" };
+            panelState[panelKey] = { visible: visibility, width: dimensions.width, height: dimensions.height };
+        }
+        persistPanelStates?.(panelState);
+    }, [panelVisibility, panelDimensions, maximizedPanels]);
+    return null;
+};

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

@@ -14,8 +14,8 @@ const TMPanelWrapper = (props) => {
     // This avoids unnecessary re-renders by only recalculating when deviceType changes
     let isMobile = useMemo(() => { return deviceType === DeviceType.MOBILE; }, [deviceType]);
     // Extract panel dimensions based on panel id
-    const width = panelDimensions[panel.id].width;
-    const height = panelDimensions[panel.id].height;
+    const width = panelDimensions[panel.id]?.width ?? '0%';
+    const height = panelDimensions[panel.id]?.height ?? '0%';
     // Determine visibility:
     // - If any panels are maximized, only show those maximized panels
     // - Otherwise, rely on the normal panel visibility state

package/lib/helper/SDKUI_Globals.d.ts

@@ -55,13 +55,6 @@ export declare class AdvancedSettings {
         expertMode: number;
     };
 }
-export declare const defaultDcmtFormLayout: {
-    [id: string]: {
-        visible: boolean;
-        width: string;
-        height: string;
-    };
-};
 export declare class DcmtFormSettings {
     TID: number | undefined;
     layout: {

package/lib/helper/SDKUI_Globals.js

@@ -115,16 +115,10 @@ export class AdvancedSettings {
         };
     }
 }
-export const defaultDcmtFormLayout = {
-    'tmDcmtForm': { visible: true, width: '20%', height: '100%' },
-    'tmBlog': { visible: false, width: '30%', height: '100%' },
-    'tmSysMetadata': { visible: false, width: '20%', height: '100%' },
-    'tmDcmtPreview': { visible: true, width: '30%', height: '100%' },
-};
 export class DcmtFormSettings {
     constructor() {
-        this.layout = defaultDcmtFormLayout;
-        this.layoutToDo = defaultDcmtFormLayout;
+        this.layout = {};
+        this.layoutToDo = {};
     }
 }
 export class SDKUI_Globals {

package/lib/helper/helpers.d.ts

@@ -57,3 +57,7 @@ export declare function getContrastColor(inputColor: string): {
     bgColor: string;
     textColor: string;
 };
+/** Adds TID to a list of "most recently used" (MRU) TIDs, keeping a maximum of 10 elements  */
+export declare function updateMruTids(currentMruTIDs: number[] | undefined | null, newTid: unknown): number[];
+/** Remove TID to a list of "most recently used" (MRU) TIDs, keeping a maximum of 10 elements  */
+export declare function removeMruTid(currentMruTIDs: number[] | undefined | null, tidToRemove: unknown): number[];

package/lib/helper/helpers.js

@@ -718,3 +718,47 @@ export function getContrastColor(inputColor) {
         textColor: luminance > 0.6 ? '#2559A5' : '#FFFFFF'
     };
 }
+// #endregion
+/** Adds TID to a list of "most recently used" (MRU) TIDs, keeping a maximum of 10 elements  */
+export function updateMruTids(currentMruTIDs, newTid) {
+    // 1. Make sure newTid is a valid number.
+    // Using unknown forces validation. 
+    // This is a best practice for robust functions that need to handle potentially non-compliant input.
+    const tidAsNumber = Number(newTid);
+    if (isNaN(tidAsNumber)) {
+        console.warn(`Tentativo di aggiungere un TID non numerico: ${newTid}. Ignorato.`);
+        return currentMruTIDs ? currentMruTIDs.filter(tid => tid != null) : [];
+    }
+    // 2. Initialize or copy existing MRU list.
+    let updatedMruTIDs = currentMruTIDs ? currentMruTIDs.filter(tid => tid != null) : [];
+    // 3. Remove the TID if it already exists to avoid duplicates and update its position.
+    const existingIndex = updatedMruTIDs.findIndex((o) => o === tidAsNumber);
+    if (existingIndex >= 0) {
+        updatedMruTIDs.splice(existingIndex, 1);
+    }
+    // 4. Remove oldest element if list exceeds maximum size of 10.
+    if (updatedMruTIDs.length >= 10) {
+        updatedMruTIDs.splice(0, 1); // Rimuove il primo elemento (il più vecchio)
+    }
+    // 5. Add new TID to queue (most recent).
+    updatedMruTIDs.push(tidAsNumber);
+    return updatedMruTIDs;
+}
+/** Remove TID to a list of "most recently used" (MRU) TIDs, keeping a maximum of 10 elements  */
+export function removeMruTid(currentMruTIDs, tidToRemove) {
+    // 1. Make sure tidToRemove is a valid number.
+    const tidAsNumber = Number(tidToRemove);
+    if (isNaN(tidAsNumber)) {
+        console.warn(`Tentativo di rimuovere un TID non numerico: ${tidToRemove}. Ignorato.`);
+        return currentMruTIDs ? currentMruTIDs.filter(tid => tid != null) : [];
+    }
+    // 2. Initialize or copy existing MRU list.
+    let updatedMruTIDs = currentMruTIDs ? currentMruTIDs.filter(tid => tid != null) : [];
+    // 3. Find the TID index to remove.
+    const indexToRemove = updatedMruTIDs.findIndex((o) => o === tidAsNumber);
+    // 4. If the TID is found, remove it from the list.
+    if (indexToRemove >= 0) {
+        updatedMruTIDs.splice(indexToRemove, 1);
+    }
+    return updatedMruTIDs;
+}

package/package.json

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