@topconsultnpm/sdkui-react-beta 6.14.16 → 6.14.17

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

@@ -112,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 }) => {

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,8 +29,9 @@ 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
@@ -434,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',
@@ -525,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',
@@ -565,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;

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

@@ -195,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/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/package.json

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