@topconsultnpm/sdkui-react-beta 6.13.42 → 6.13.44

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { LayoutModes } from '@topconsultnpm/sdk-ts-beta';
 import { FormModes } from '../../../ts';
+import { DeviceType } from '../../base/TMDeviceProvider';
 import { TMCommandItemProps } from '../../sidebar/TMCommandsPanel';
 interface ITMDcmtFormProps {
     TID?: number;
@@ -37,3 +38,8 @@ interface ITMDcmtFormProps {
 }
 declare const TMDcmtForm: React.FC<ITMDcmtFormProps>;
 export default TMDcmtForm;
+export declare const ToppyHelpCenter: ({ content, onClick, deviceType }: {
+    content?: any;
+    onClick?: () => void;
+    deviceType?: DeviceType;
+}) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from 'react';
-import styled from 'styled-components';
+import styled, { keyframes } from 'styled-components';
 import TMDcmtPreview from './TMDcmtPreview';
 import { AccessLevels, ArchiveConstraints, ArchiveEngineByID, DcmtTypeListCacheService, LayoutModes, MetadataDataTypes, ResultTypes, SDK_Globals, SystemMIDsAsNumber, TemplateTIDs, UpdateEngineByID, ValidationItem } from '@topconsultnpm/sdk-ts-beta';
 import { ContextMenu } from 'devextreme-react';
@@ -31,6 +31,7 @@ import { useInputAttachmentsDialog } from '../../../hooks/useInputDialog';
 import TMModal from '../../base/TMModal';
 import TMPanel from '../../base/TMPanel';
 import TMCommandsPanel from '../../sidebar/TMCommandsPanel';
+import toppy from '../../../assets/Toppy-generico.png';
 let abortControllerLocal = new AbortController();
 //#endregion
 const TMDcmtForm = ({ showHeader = true, onSaveRecents, layoutMode = LayoutModes.Update, onClose, onSavedAsyncCallback, TID, DID, formMode = FormModes.Update, canNext, canPrev, count, itemIndex, onNext, onPrev, customRightSidebarItems = [], allowNavigation = true, allowRelations = true, isClosable = false, isExpertMode = SDKUI_Globals.userSettings.advancedSettings.expertMode === 1, showDcmtForm = true, showDcmtFormSidebar = true, showPreview = false, showBoard = false, showSysMetadata = false, onClosePreviewPanel, onCloseBlogPanel, onCloseSysMetadataPanel, titleModal, isModal = false, widthModal = "100%", heightModal = "100%" }) => {
@@ -453,7 +454,7 @@ const TMDcmtForm = ({ showHeader = true, onSaveRecents, layoutMode = LayoutModes
                 gap: SDKUI_Globals.userSettings.themeSettings.gutters,
                 width: '100%',
                 height: '100%',
-            }, children: [_jsx("div", { style: { flex: 1, minWidth: 0, height: '100%' }, children: _jsxs(TMLayoutWaitingContainer, { direction: 'vertical', showWaitPanel: useWaitPanelLocalState ? showWaitPanelLocal : showWaitPanel, showWaitPanelPrimary: useWaitPanelLocalState ? showPrimaryLocal : showPrimary, showWaitPanelSecondary: useWaitPanelLocalState ? showSecondaryLocal : showSecondary, waitPanelTitle: useWaitPanelLocalState ? waitPanelTitleLocal : waitPanelTitle, waitPanelTextPrimary: useWaitPanelLocalState ? waitPanelTextPrimaryLocal : waitPanelTextPrimary, waitPanelValuePrimary: useWaitPanelLocalState ? waitPanelValuePrimaryLocal : waitPanelValuePrimary, waitPanelMaxValuePrimary: useWaitPanelLocalState ? waitPanelMaxValuePrimaryLocal : waitPanelMaxValuePrimary, waitPanelTextSecondary: useWaitPanelLocalState ? waitPanelTextSecondaryLocal : waitPanelTextSecondary, waitPanelValueSecondary: useWaitPanelLocalState ? waitPanelValueSecondaryLocal : waitPanelValueSecondary, waitPanelMaxValueSecondary: useWaitPanelLocalState ? waitPanelMaxValueSecondaryLocal : waitPanelMaxValueSecondary, isCancelable: useWaitPanelLocalState ? dcmtFile ? dcmtFile.size >= 1000000 : false : true, abortController: useWaitPanelLocalState ? abortControllerLocal : abortController, children: [_jsxs(TMSplitterLayout, { direction: 'horizontal', overflow: 'visible', separatorSize: SDKUI_Globals.userSettings.themeSettings.gutters, separatorColor: 'transparent', showSeparator: (isOpenPreview || isOpenMiddlePanel()) && deviceType !== DeviceType.MOBILE && isOpenDcmtForm, start: getPrimarySplitterStartLayout(), min: deviceType !== DeviceType.MOBILE && isOpenDcmtForm ? ['150px', '0'] : ['0', '0'], children: [_jsx(TMLayoutItem, { children: _jsx(TMPanel, { showHeader: showHeader, title: fromDTD?.nameLoc, toolbar: allowNavigation ? formToolbar : _jsx(_Fragment, {}), onBack: isClosable && deviceType !== DeviceType.MOBILE ? undefined : handleClose, onClose: isClosable ? handleClose : undefined, children: metadataValuesSource.length > 0 && _jsxs(StyledToolbarCardContainer, { children: [_jsx(TMMetadataValues, { TID: TID, metadataValues: metadataValuesSource, metadataValuesOrig: metadataValuesSourceOrig, isExpertMode: isExpertMode, isOpenDistinctValues: isOpenDistinctValues, openChooserBySingleClick: !isOpenDistinctValues, selectedMID: focusedMetadataValue?.mid, layoutMode: layoutMode, deviceType: deviceType, validationItems: validationItems, onFocusedItemChanged: (item) => { (item?.mid !== focusedMetadataValue?.mid) && setFocusedMetadataValue(item); }, onValueChanged: (newItems) => {
+            }, children: [_jsx("div", { style: { flex: 1, minWidth: 0, height: '100%' }, children: _jsxs(TMLayoutWaitingContainer, { direction: 'vertical', showWaitPanel: useWaitPanelLocalState ? showWaitPanelLocal : showWaitPanel, showWaitPanelPrimary: useWaitPanelLocalState ? showPrimaryLocal : showPrimary, showWaitPanelSecondary: useWaitPanelLocalState ? showSecondaryLocal : showSecondary, waitPanelTitle: useWaitPanelLocalState ? waitPanelTitleLocal : waitPanelTitle, waitPanelTextPrimary: useWaitPanelLocalState ? waitPanelTextPrimaryLocal : waitPanelTextPrimary, waitPanelValuePrimary: useWaitPanelLocalState ? waitPanelValuePrimaryLocal : waitPanelValuePrimary, waitPanelMaxValuePrimary: useWaitPanelLocalState ? waitPanelMaxValuePrimaryLocal : waitPanelMaxValuePrimary, waitPanelTextSecondary: useWaitPanelLocalState ? waitPanelTextSecondaryLocal : waitPanelTextSecondary, waitPanelValueSecondary: useWaitPanelLocalState ? waitPanelValueSecondaryLocal : waitPanelValueSecondary, waitPanelMaxValueSecondary: useWaitPanelLocalState ? waitPanelMaxValueSecondaryLocal : waitPanelMaxValueSecondary, isCancelable: useWaitPanelLocalState ? dcmtFile ? dcmtFile.size >= 1000000 : false : true, abortController: useWaitPanelLocalState ? abortControllerLocal : abortController, children: [_jsxs(TMSplitterLayout, { direction: 'horizontal', overflow: 'visible', separatorSize: SDKUI_Globals.userSettings.themeSettings.gutters, separatorColor: 'transparent', showSeparator: (isOpenPreview || isOpenMiddlePanel()) && deviceType !== DeviceType.MOBILE && isOpenDcmtForm, start: getPrimarySplitterStartLayout(), min: deviceType !== DeviceType.MOBILE && isOpenDcmtForm ? ['150px', '0'] : ['0', '0'], children: [_jsx(TMLayoutItem, { children: _jsx(TMPanel, { showHeader: showHeader, title: fromDTD?.nameLoc, toolbar: allowNavigation ? formToolbar : _jsx(_Fragment, {}), onBack: (isClosable && deviceType !== DeviceType.MOBILE) ? undefined : handleClose, onClose: isClosable ? handleClose : undefined, children: metadataValuesSource.length > 0 && _jsxs(StyledToolbarCardContainer, { children: [_jsx(TMMetadataValues, { TID: TID, metadataValues: metadataValuesSource, metadataValuesOrig: metadataValuesSourceOrig, isExpertMode: isExpertMode, isOpenDistinctValues: isOpenDistinctValues, openChooserBySingleClick: !isOpenDistinctValues, selectedMID: focusedMetadataValue?.mid, layoutMode: layoutMode, deviceType: deviceType, validationItems: validationItems, onFocusedItemChanged: (item) => { (item?.mid !== focusedMetadataValue?.mid) && setFocusedMetadataValue(item); }, onValueChanged: (newItems) => {
                                                             setFormData((prevItems) => prevItems.map((item) => {
                                                                 const newItem = newItems.find((newItem) => newItem.tid === item.tid && newItem.mid === item.mid);
                                                                 return newItem ? { ...item, ...newItem } : item;
@@ -467,8 +468,8 @@ const TMDcmtForm = ({ showHeader = true, onSaveRecents, layoutMode = LayoutModes
                                                                     setIsOpenFormulaEditor(!isOpenFormulaEditor);
                                                                     break;
                                                             }
-                                                        } }), _jsxs(StyledFormButtonsContainer, { children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 10 }, children: [fromDTD?.templateTID === TemplateTIDs.WF_WIApprView && _jsx(WorkFlowOperationButtons, { onApprove: () => setShowApprovePopup(true), onReject: () => setShowRejectPopup(true), onReAssign: () => setShowReAssignPopup(true), isInDcmtForm: true }), _jsx("div", { style: { display: 'flex', justifyContent: 'center', alignItems: 'center', gap: '8px' }, children: layoutMode === LayoutModes.Update ? _jsxs(_Fragment, { children: [_jsx(TMSaveFormButtonSave, { showTooltip: false, btnStyle: 'advanced', advancedColor: '#f09c0a', isModified: isModified, formMode: formMode, errorsCount: validationItems.filter(o => o.ResultType == ResultTypes.ERROR).length, onSaveAsync: confirmActionPopup }), _jsx(TMSaveFormButtonUndo, { btnStyle: 'toolbar', showTooltip: true, color: 'primary', isModified: isModified, formMode: formMode, onUndo: onUndoHandler })] }) :
-                                                                            _jsxs(_Fragment, { children: [_jsx(TMButton, { disabled: archiveBtnDisabled, btnStyle: 'advanced', icon: _jsx(IconBoxArchiveIn, {}), showTooltip: false, caption: 'Archivia', advancedColor: TMColors.success, onClick: confirmActionPopup }), _jsx(TMButton, { disabled: !clearFormBtnDisabled, btnStyle: 'advanced', icon: _jsx(IconClear, {}), showTooltip: false, caption: 'Pulisci', advancedColor: TMColors.tertiary, onClick: clearFormHandler }), DID && _jsx(TMButton, { disabled: undoBtnDisabled, btnStyle: 'advanced', icon: _jsx(IconUndo, {}), width: '150px', showTooltip: false, caption: 'Annulla modifiche', advancedColor: TMColors.tertiary, onClick: onUndoHandler })] }) })] }), totalItems > listMaxItems && _jsx(TMShowAllOrMaxItemsButton, { showAll: showAll, dataSourceLength: totalItems, onClick: () => { setShowAll(!showAll); } })] }), showApprovePopup && _jsx(WorkFlowApproveRejectPopUp, { deviceType: deviceType, TID: TID, DID: DID, op: 0, onClose: () => setShowApprovePopup(false) }), showRejectPopup && _jsx(WorkFlowApproveRejectPopUp, { deviceType: deviceType, TID: TID, DID: DID, op: 1, onClose: () => setShowRejectPopup(false) }), showReAssignPopup && _jsx(WorkFlowReAssignPopUp, { deviceType: deviceType, TID: TID, DID: DID, onClose: () => setShowReAssignPopup(false) }), _jsx(ConfirmAttachmentsDialog, {})] }) }) }), isOpenPreview || isOpenMiddlePanel() ?
+                                                        } }), _jsxs(StyledFormButtonsContainer, { children: [_jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: 10 }, children: _jsx("div", { style: { display: 'flex', justifyContent: 'center', alignItems: 'center', gap: '8px' }, children: layoutMode === LayoutModes.Update ? _jsxs(_Fragment, { children: [_jsx(TMSaveFormButtonSave, { showTooltip: false, btnStyle: 'advanced', advancedColor: '#f09c0a', isModified: isModified, formMode: formMode, errorsCount: validationItems.filter(o => o.ResultType == ResultTypes.ERROR).length, onSaveAsync: confirmActionPopup }), _jsx(TMSaveFormButtonUndo, { btnStyle: 'toolbar', showTooltip: true, color: 'primary', isModified: isModified, formMode: formMode, onUndo: onUndoHandler })] }) :
+                                                                        _jsxs(_Fragment, { children: [_jsx(TMButton, { disabled: archiveBtnDisabled, btnStyle: 'advanced', icon: _jsx(IconBoxArchiveIn, {}), showTooltip: false, caption: 'Archivia', advancedColor: TMColors.success, onClick: confirmActionPopup }), _jsx(TMButton, { disabled: !clearFormBtnDisabled, btnStyle: 'advanced', icon: _jsx(IconClear, {}), showTooltip: false, caption: 'Pulisci', advancedColor: TMColors.tertiary, onClick: clearFormHandler }), DID && _jsx(TMButton, { disabled: undoBtnDisabled, btnStyle: 'advanced', icon: _jsx(IconUndo, {}), width: '150px', showTooltip: false, caption: 'Annulla modifiche', advancedColor: TMColors.tertiary, onClick: onUndoHandler })] }) }) }), totalItems > listMaxItems && _jsx(TMShowAllOrMaxItemsButton, { showAll: showAll, dataSourceLength: totalItems, onClick: () => { setShowAll(!showAll); } })] }), showApprovePopup && _jsx(WorkFlowApproveRejectPopUp, { deviceType: deviceType, TID: TID, DID: DID, op: 0, onClose: () => setShowApprovePopup(false) }), showRejectPopup && _jsx(WorkFlowApproveRejectPopUp, { deviceType: deviceType, TID: TID, DID: DID, op: 1, onClose: () => setShowRejectPopup(false) }), showReAssignPopup && _jsx(WorkFlowReAssignPopUp, { deviceType: deviceType, TID: TID, DID: DID, onClose: () => setShowReAssignPopup(false) }), _jsx(ConfirmAttachmentsDialog, {})] }) }) }), isOpenPreview || isOpenMiddlePanel() ?
                                         _jsx(TMLayoutItem, { children: _jsxs(TMSplitterLayout, { direction: 'horizontal', overflow: 'visible', separatorSize: SDKUI_Globals.userSettings.themeSettings.gutters, showSeparator: deviceType !== DeviceType.MOBILE && (isOpenPreview && isOpenMiddlePanel()), start: getSecondarySplitterStartLayout(), min: ['0', '0'], separatorColor: 'transparent', children: [isOpenMiddlePanel()
                                                         ? _jsx(TMLayoutItem, { children: _jsxs(TMPanel, { showHeader: !(isOpenDetails && layoutMode === LayoutModes.Update), title: titleText(), onClose: () => { closeMiddlePanel(); }, children: [isOpenBoard && layoutMode === LayoutModes.Update &&
                                                                         _jsx(TMDcmtBlog, { tid: TID, did: DID }), isOpenSysMetadata && layoutMode === LayoutModes.Update &&
@@ -514,7 +515,10 @@ const TMDcmtForm = ({ showHeader = true, onSaveRecents, layoutMode = LayoutModes
                         ...(allowRelations && currentTIDHasDetailRelations ? [{ icon: _jsx(IconDetailDcmts, { transform: 'scale(-1, 1)' }), selected: isOpenDetails, disabled: isDetailsDisabled, onClick: () => { if (!isDetailsDisabled)
                                     setIsOpenDetails(!isOpenDetails); } }] : []),
                         ...customRightSidebarItems
-                    ] }), isOpenDetails &&
+                    ] }), (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 &&
                     _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}`));
@@ -546,10 +550,6 @@ const TMDcmtForm = ({ showHeader = true, onSaveRecents, layoutMode = LayoutModes
             : renderDcmtForm() }));
 };
 export default TMDcmtForm;
-//#region  Styled Components
-const StyledSectionContainer = styled.div ` width:  100%; height: 100%; display:flex; flex-direction: column; `;
-const StyledSidebarItemsContentContainer = styled.div `width: 100%; height: 100%; overflow:auto;`;
-//#endregion Styled Components
 //#region Validaion
 const validateMetadataList = (mvdList = []) => {
     if (!Array.isArray(mvdList)) {
@@ -580,3 +580,28 @@ const validateMaxLength = (mvd, value, validationItems) => {
         validationItems.push(new ValidationItem(ResultTypes.ERROR, mvd.md.nameLoc ?? "", message));
     }
 };
+//#endregion Validation
+const toppyEntrance = keyframes `
+  0% { right: -200px; opacity: 0; }
+  60% { opacity: 1; }
+  100% { right: -70px; opacity: 1; }
+`;
+const ToppyContainer = styled.div `
+  position: absolute;
+  bottom: ${props => props.$isMobile ? '-70px' : '-50px'};
+  right: ${props => props.$isMobile ? '-70px' : '-50px'};
+  transform: rotate(-20deg);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: ${toppyEntrance} 0.5s cubic-bezier(0.23, 1, 0.32, 1);
+  z-index: 1000;
+`;
+const ToppyImage = styled.img `
+  width: ${props => props.$isMobile ? '120px' : '170px'};
+  height: ${props => props.$isMobile ? '140px' : '200px'};
+  cursor: ${props => props.$isMobile ? 'pointer' : 'default'};
+`;
+export const ToppyHelpCenter = ({ content, onClick, deviceType }) => {
+    return (_jsxs(ToppyContainer, { children: [_jsx(ToppyImage, { "$isMobile": deviceType === DeviceType.MOBILE, onClick: onClick, src: toppy, alt: "Toppy" }), _jsx("div", { style: { top: deviceType === DeviceType.MOBILE ? -180 : -200, right: deviceType === DeviceType.MOBILE ? 20 : 1, transform: 'rotate(20deg)', position: 'absolute', width: 'max-content', height: 'max-content' }, children: content })] }));
+};

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

@@ -387,7 +387,7 @@ const TMMasterDetailDcmts = ({ deviceType, inputDcmts, isForMaster, showCurrentD
     const renderTMFormOrResult = useMemo(() => (handleTogglePanel) => {
         return (_jsx(_Fragment, { children: focusedItem?.isDcmt ?
                 _jsx(TMDcmtForm, { TID: focusedItem?.tid, DID: focusedItem.did, isClosable: deviceType !== DeviceType.MOBILE, allowNavigation: false, allowRelations: deviceType !== DeviceType.MOBILE, showDcmtFormSidebar: deviceType === DeviceType.MOBILE, showPreview: showPreview, showBoard: showBoard, showSysMetadata: showSysMetadata, showDcmtForm: showDcmtForm, onClose: () => { setShowDcmtForm(false); }, onClosePreviewPanel: () => { setShowPreview(false); } }) :
-                _jsx(TMSearchResult, { context: SearchResultContext.METADATA_SEARCH, allowFloatingBar: false, searchResults: focusedItem?.searchResult ?? [], showPreview: showPreview, showSearchResultSidebar: false, onClose: () => { setShowDcmtForm(false); }, onClosePreviewPanel: () => {
+                _jsx(TMSearchResult, { context: SearchResultContext.METADATA_SEARCH, allowFloatingBar: false, searchResults: focusedItem?.searchResult ?? [], showPreview: showPreview, showBoard: showBoard, showSysMetadata: showSysMetadata, showSearchResultSidebar: false, onClose: () => { setShowDcmtForm(false); }, onClosePreviewPanel: () => {
                         setShowPreview(false);
                         handleTogglePanel("commandPreview");
                     }, onTaskCreateRequest: onTaskCreateRequest }) }));
@@ -482,6 +482,7 @@ const TMMasterDetailDcmts = ({ deviceType, inputDcmts, isForMaster, showCurrentD
                 visible: true,
                 isActive: showZeroDcmts,
                 orderNumber: 3,
+                beginGroup: true,
             },
             type: 'button',
             buttonOptions: {

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

@@ -1,17 +1,21 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { SavedQueryCacheService, DcmtTypeListCacheService, SDK_Localizator } from '@topconsultnpm/sdk-ts-beta';
 import TMSavedQuerySelector from './TMSavedQuerySelector';
 import TMTreeSelector from './TMTreeSelector';
 import { TabPanel, Item } from 'devextreme-react/tab-panel';
 import TMSearchQueryPanel, { refreshLastSearch } from './TMSearchQueryPanel';
-import { getSysAllDcmtsSQD, IconArrowRight, IconFilter, IconRecentlyViewed, IconSavedQuery, IconTree, SDKUI_Globals, SDKUI_Localizator } from '../../../helper';
+import { getSysAllDcmtsSQD, IconFilter, IconInfo, IconRecentlyViewed, IconSavedQuery, IconTree, SDKUI_Globals, SDKUI_Localizator } from '../../../helper';
 import TMSearchResult from './TMSearchResult';
 import TMRecentsManager from '../../grids/TMRecentsManager';
 import { SearchResultContext } from '../../../ts';
 import { useDeviceType, DeviceType } from '../../base/TMDeviceProvider';
 import { StyledMultiViewPanel } from '../../base/Styled';
-import TMPanelManager from '../../base/TMPanelManager';
+import { TMPanelManagerContextProvider, useTMPanelContext } from '../../layout/panel/TMPanelContext';
+import { TMPanelToolbar } from '../../layout/panel/TMPanelToolbar';
+import { useResizablePanels } from '../../layout/panel/useResizablePanels';
+import TMPanel from '../../base/TMPanel';
+import { Gutters } from '../../../utils/theme';
 var TMSearchViews;
 (function (TMSearchViews) {
     TMSearchViews[TMSearchViews["Search"] = 0] = "Search";
@@ -118,18 +122,18 @@ const TMSearch = ({ inputTID, inputSqdID, isExpertMode = SDKUI_Globals.userSetti
             await setSqdAsync?.(sqdToBeSet);
     }, []);
     const isMobile = deviceType === DeviceType.MOBILE;
-    const renderTMTreeSelector = (handleTogglePanel) => _jsx(TMTreeSelector, { onClosePanel: () => handleTogglePanel('TMTreeSelector'), onSelectedTIDChanged: (tid) => {
+    const renderTMTreeSelector = (handleTogglePanel) => _jsx(TMTreeSelector, { onClosePanel: () => handleTogglePanel?.('TMTreeSelector'), onSelectedTIDChanged: (tid) => {
             setCurrentTID(tid);
             if (tid && mruTIDs.includes(tid))
                 setCurrentMruTID(tid);
             else
                 setCurrentMruTID(0);
-            isMobile && handleTogglePanel('TMSearchQueryPanel');
+            isMobile && handleTogglePanel?.('TMSearchQueryPanel');
         } });
     const renderTMRecentsManager = (handleTogglePanel) => _jsx(TMRecentsManager, { mruTIDs: mruTIDs, currentMruTID: currentMruTID, deviceType: deviceType, onSelectedTID: (tid) => {
             setCurrentMruTID(tid);
             setCurrentTID(tid);
-            isMobile && handleTogglePanel('TMSearchQueryPanel');
+            isMobile && handleTogglePanel?.('TMSearchQueryPanel');
         }, onDeletedTID: (tid) => {
             let newMruTIDS = mruTIDs.slice();
             let index = newMruTIDS.findIndex(o => o == tid);
@@ -162,90 +166,156 @@ const TMSearch = ({ inputTID, inputSqdID, isExpertMode = SDKUI_Globals.userSetti
         } });
     const renderTMSavedQuerySelector = (handleTogglePanel) => _jsxs(TabPanel, { width: "100%", height: "100%", showNavButtons: true, repaintChangesOnly: true, selectedIndex: currentSQDMode, onSelectedIndexChange: (index) => setCurrentSQDMode(index), children: [(currentTID || currentSQD) ? _jsx(Item, { title: fromDTD?.nameLoc, children: _jsx(TMSavedQuerySelector, { allowShowSearch: false, items: filteredByTIDSQDs, selectedId: currentSQD?.id, onRefreshData: () => { loadDataSQDsAsync(true); }, onItemClick: (sqd) => {
                         onSQDItemClick(sqd, setSQDAsync);
-                        isMobile && handleTogglePanel('TMSearchQueryPanel');
+                        isMobile && handleTogglePanel?.('TMSearchQueryPanel');
                     }, onDeleted: (sqd) => onSQDDeleted(sqd, sqd.id == currentSQD?.id ? filteredByTIDSQDs.find(o => o.id == 1) : currentSQD, setSQDAsync) }) }) : _jsx(_Fragment, {}), _jsx(Item, { title: SDKUI_Localizator.Alls2, children: _jsx(TMSavedQuerySelector, { allowShowSearch: true, items: allSQDs, manageDefault: false, 
                     // selectedId={currentSQD?.id}
                     onItemClick: (sqd) => {
                         onSQDItemClick(sqd, setSQDAsync);
-                        isMobile && handleTogglePanel('TMSearchQueryPanel');
+                        isMobile && handleTogglePanel?.('TMSearchQueryPanel');
                     }, onDeleted: (sqd) => onSQDDeleted(sqd, sqd.id == currentSQD?.id ? undefined : currentSQD, setSQDAsync) }) })] });
-    const panelsConfig = [
-        {
-            id: 'TMTreeSelector',
-            name: SDK_Localizator.Trees,
-            toolbarOptions: { icon: _jsx(IconTree, { fontSize: 24 }), visible: true, isActive: true, orderNumber: 1 },
-            type: 'content',
-            contentOptions: {
-                visible: true,
-                height: '100%',
-                width: '20%',
-                content: renderTMTreeSelector,
-            },
-        },
-        {
-            id: 'TMRecentsManager',
-            name: "Scorciatoie",
-            toolbarOptions: { icon: _jsx(IconRecentlyViewed, { fontSize: 24 }), visible: true, isActive: true, orderNumber: 2 },
-            type: 'content',
-            contentOptions: {
-                visible: true,
-                height: '100%',
-                width: '20%',
-                content: (handleTogglePanel) => renderTMRecentsManager(handleTogglePanel),
-                panelContainer: {
-                    title: "Scorciatoie",
-                    totalItems: mruTIDs.length,
-                    allowMaximize: !isMobile
-                },
-            },
-        },
-        {
-            id: 'TMSearchQueryPanel',
-            name: SDK_Localizator.QueryWhere,
-            toolbarOptions: { icon: _jsx(IconFilter, { fontSize: 24 }), visible: true, isActive: true, orderNumber: 3 },
-            type: 'content',
-            contentOptions: {
-                visible: true,
-                height: '100%',
-                width: '40%',
-                content: renderTMSearchQueryPanel,
-            },
-        },
-        {
-            id: 'TMSavedQuerySelector',
-            name: SDK_Localizator.SavedQueries,
-            toolbarOptions: { icon: _jsx(IconSavedQuery, { fontSize: 24 }), visible: true, isActive: true, orderNumber: 4 },
-            type: 'content',
-            contentOptions: {
-                visible: true,
-                height: '100%',
-                width: '20%',
-                content: renderTMSavedQuerySelector,
-                panelContainer: {
-                    title: SDK_Localizator.SavedQueries,
-                    allowMaximize: !isMobile
-                },
-            },
-        },
-        {
-            id: 'goToResult',
-            name: 'Vai a risultato',
-            toolbarOptions: {
-                icon: _jsx(IconArrowRight, { fontSize: 24 }),
-                visible: searchResult.length > 0,
-                isActive: searchResult.length > 0,
-                orderNumber: 5,
-                beginGroup: true
-            },
-            type: 'button',
-            buttonOptions: {
-                onClick: () => setCurrentSearchView(TMSearchViews.Result),
-            },
-        },
-    ];
-    return (_jsxs(_Fragment, { children: [_jsx(StyledMultiViewPanel, { "$isVisible": currentSearchView === TMSearchViews.Search, children: _jsx(TMPanelManager, { panels: panelsConfig, initialMobilePanelId: 'TMRecentsManager', toolbarMode: 1 }) }), searchResult.length > 0 &&
+    return (_jsxs(_Fragment, { children: [_jsx(StyledMultiViewPanel, { "$isVisible": currentSearchView === TMSearchViews.Search, children: _jsx(TMPanelManagerContextProvider, { panels: panels, initialMobilePanelId: "TMRecentsManager", children: _jsx(TMSearchPanelContent, { isMobile: isMobile, panelTMTreeSelector: renderTMTreeSelector, panelTMRecentsManager: renderTMRecentsManager, panelTMSearchQueryPanel: renderTMSearchQueryPanel(), panelTMSavedQuerySelector: renderTMSavedQuerySelector }) }) }), 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); } })] }));
 };
+const TMSearchPanelContent = ({ isMobile, panelTMTreeSelector, panelTMRecentsManager, panelTMSearchQueryPanel, panelTMSavedQuerySelector }) => {
+    const gutters = Gutters.getGutters();
+    console.log('TMSearchPanelContent gutters', gutters);
+    const { visibility, maximizedPanelId, getPanelDimensions, togglePanel, toggleMaximizePanel, setPanelDisabledById, setPanelVisibility, hasVisiblePanels } = useTMPanelContext();
+    const containerRef = useRef(null);
+    const { onMouseDown } = useResizablePanels(containerRef);
+    const { width: widthPanel1, height: heightPanel1 } = getPanelDimensions('TMTreeSelector');
+    const { width: widthPanel2, height: heightPanel2 } = getPanelDimensions('TMRecentsManager');
+    const { width: widthPanel3, height: heightPanel3 } = getPanelDimensions('TMSearchQueryPanel');
+    const { width: widthPanel4, height: heightPanel4 } = getPanelDimensions('TMSavedQuerySelector');
+    return (_jsxs("div", { style: { display: 'flex', height: '100%', width: '100%', flexDirection: isMobile ? 'column' : 'row', gap: gutters }, children: [_jsx("div", { style: {
+                    display: 'flex',
+                    flexGrow: 1,
+                    width: `calc(100% - ${isMobile ? 0 : 70}px)`,
+                    height: `calc(100% - ${isMobile ? 55 : 0}px)`,
+                    flexDirection: 'row'
+                }, children: _jsxs("div", { style: { width: '100%', height: '100%' }, children: [_jsxs("div", { ref: containerRef, style: {
+                                display: hasVisiblePanels() ? 'flex' : 'none',
+                                width: '100%',
+                                height: '100%',
+                            }, children: [_jsx("div", { style: {
+                                        display: visibility.TMTreeSelector ? 'block' : 'none',
+                                        width: widthPanel1,
+                                        height: heightPanel1,
+                                        overflow: 'hidden',
+                                    }, children: panelTMTreeSelector(() => togglePanel('TMSearchQueryPanel')) }), visibility.TMTreeSelector && visibility.TMRecentsManager && maximizedPanelId === null && (_jsx("div", { style: {
+                                        background: 'transparent',
+                                        cursor: 'col-resize',
+                                        width: `${gutters}px`,
+                                        height: '100%',
+                                        userSelect: 'none',
+                                    }, onMouseDown: (e) => onMouseDown(e, 'TMTreeSelector', 'TMRecentsManager', true) })), _jsx("div", { style: {
+                                        display: visibility.TMRecentsManager ? 'block' : 'none',
+                                        width: widthPanel2,
+                                        height: heightPanel2,
+                                        overflow: 'hidden',
+                                    }, children: _jsx(TMPanel, { title: 'Scorciatoie', onClose: () => togglePanel('TMRecentsManager'), onMaximize: () => toggleMaximizePanel('TMRecentsManager'), onHeaderDoubleClick: () => toggleMaximizePanel('TMRecentsManager'), allowMaximize: !isMobile, children: panelTMRecentsManager(() => togglePanel('TMSearchQueryPanel')) }) }), visibility.TMRecentsManager && visibility.TMSearchQueryPanel && maximizedPanelId === null && (_jsx("div", { style: {
+                                        background: 'transparent',
+                                        cursor: 'col-resize',
+                                        width: `${gutters}px`,
+                                        height: '100%',
+                                        userSelect: 'none',
+                                    }, onMouseDown: (e) => onMouseDown(e, 'TMRecentsManager', 'TMSearchQueryPanel', true) })), _jsx("div", { style: {
+                                        display: visibility.TMSearchQueryPanel ? 'block' : 'none',
+                                        width: widthPanel3,
+                                        height: heightPanel3,
+                                        overflow: 'hidden',
+                                    }, children: panelTMSearchQueryPanel }), visibility.TMSearchQueryPanel && visibility.TMSavedQuerySelector && maximizedPanelId === null && (_jsx("div", { style: {
+                                        background: 'transparent',
+                                        cursor: 'col-resize',
+                                        width: `${gutters}px`,
+                                        height: '100%',
+                                        userSelect: 'none',
+                                    }, onMouseDown: (e) => onMouseDown(e, 'TMSearchQueryPanel', 'TMSavedQuerySelector', true) })), _jsx("div", { style: {
+                                        display: visibility.TMSavedQuerySelector ? 'block' : 'none',
+                                        width: widthPanel4,
+                                        height: heightPanel4,
+                                        overflow: 'hidden',
+                                    }, children: _jsx(TMPanel, { title: SDK_Localizator.SavedQueries, onClose: () => togglePanel('TMSavedQuerySelector'), onMaximize: () => toggleMaximizePanel('TMSavedQuerySelector'), onHeaderDoubleClick: () => toggleMaximizePanel('TMSavedQuerySelector'), allowMaximize: !isMobile, children: panelTMSavedQuerySelector(() => togglePanel('TMSearchQueryPanel')) }) })] }), _jsxs("div", { style: {
+                                display: hasVisiblePanels() ? 'none' : 'flex',
+                                flexDirection: 'column',
+                                width: '100%',
+                                height: '100%',
+                                justifyContent: 'center',
+                                alignItems: 'center',
+                                fontSize: '1.5rem',
+                                fontWeight: 'bold',
+                                color: '#888',
+                                backgroundColor: '#fff',
+                                borderRadius: '10px'
+                            }, children: [_jsx(IconInfo, { style: { fontSize: 50 } }), _jsx("div", { children: SDKUI_Localizator.NoPanelSelected })] })] }) }), _jsx("div", { style: {
+                    display: 'flex',
+                    flexDirection: isMobile ? 'row' : 'column',
+                    alignItems: 'center',
+                    width: isMobile ? '100%' : '50px',
+                    height: isMobile ? '50px' : 'max-content',
+                    background: 'transparent linear-gradient(90deg, #CCE0F4 0%, #7EC1E7 14%, #39A6DB 28%, #1E9CD7 35%, #0075BE 78%, #005B97 99%) 0% 0% no-repeat padding-box',
+                    borderRadius: isMobile ? '10px' : '10px 0px 0px 10px',
+                    padding: '10px',
+                    gap: '10px'
+                }, children: _jsx(TMPanelToolbar, {}) })] }));
+};
 export default TMSearch;
+const panels = [
+    {
+        id: 'TMTreeSelector',
+        name: SDK_Localizator.Trees,
+        children: [],
+        contentOptions: {
+            width: '20%',
+            height: '100%',
+        },
+        toolbarOptions: {
+            icon: _jsx(IconTree, { fontSize: 24 }),
+            visible: true,
+            isActive: true
+        }
+    },
+    {
+        id: 'TMRecentsManager',
+        name: 'Scorciatoie',
+        children: [],
+        contentOptions: {
+            width: '20%',
+            height: '100%',
+        },
+        toolbarOptions: {
+            icon: _jsx(IconRecentlyViewed, { fontSize: 24 }),
+            visible: true,
+            isActive: true
+        }
+    },
+    {
+        id: 'TMSearchQueryPanel',
+        name: SDK_Localizator.QueryWhere,
+        children: [],
+        contentOptions: {
+            width: '40%',
+            height: '100%',
+        },
+        toolbarOptions: {
+            icon: _jsx(IconFilter, { fontSize: 24 }),
+            visible: false,
+            isActive: true
+        }
+    },
+    {
+        id: 'TMSavedQuerySelector',
+        name: SDK_Localizator.SavedQueries,
+        children: [],
+        contentOptions: {
+            width: '20%',
+            height: '100%',
+        },
+        toolbarOptions: {
+            icon: _jsx(IconSavedQuery, { fontSize: 24 }),
+            visible: true,
+            isActive: true
+        }
+    },
+];

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

@@ -30,7 +30,7 @@ import TMFloatingToolbar from '../../base/TMFloatingToolbar';
 import { WorkFlowApproveRejectPopUp, WorkFlowOperationButtons, WorkFlowReAssignPopUp } from '../workflow/TMWorkflowPopup';
 import TMMasterDetailDcmts from '../documents/TMMasterDetailDcmts';
 import TMBatchUpdateForm from '../../features/documents/TMBatchUpdateForm';
-import TMDcmtForm from '../documents/TMDcmtForm';
+import TMDcmtForm, { ToppyHelpCenter } from '../documents/TMDcmtForm';
 import TMDcmtBlog from '../documents/TMDcmtBlog';
 import TMDcmtIcon from '../documents/TMDcmtIcon';
 import TMPanelManager from '../../base/TMPanelManager';
@@ -325,7 +325,7 @@ const TMSearchResult = ({ context = SearchResultContext.METADATA_SEARCH, isVisib
                 break;
         }
     };
-    const searchResutlToolbar = _jsxs(_Fragment, { children: [context !== SearchResultContext.METADATA_SEARCH && fromDTD?.templateTID === TemplateTIDs.WF_WIApprView && _jsx(WorkFlowOperationButtons, { deviceType: deviceType, onApprove: () => setShowApprovePopup(true), onReject: () => setShowRejectPopup(true), onReAssign: () => setShowReAssignPopup(true), approveDisable: disable, rejectDisable: disable, reassignDisable: disable, infoDisable: getSelectedDcmtsOrFocused(selectedItems, focusedItem).length !== 1 }), (dcmtsReturned != dcmtsFound) && _jsx("p", { style: { backgroundColor: `white`, color: TMColors.primaryColor, textAlign: 'center', padding: '1px 4px', borderRadius: '3px', display: 'flex' }, children: `${dcmtsReturned}/${dcmtsFound} restituiti` }), context === SearchResultContext.FAVORITES_AND_RECENTS &&
+    const searchResutlToolbar = _jsxs(_Fragment, { children: [(dcmtsReturned != dcmtsFound) && _jsx("p", { style: { backgroundColor: `white`, color: TMColors.primaryColor, textAlign: 'center', padding: '1px 4px', borderRadius: '3px', display: 'flex' }, children: `${dcmtsReturned}/${dcmtsFound} restituiti` }), context === SearchResultContext.FAVORITES_AND_RECENTS &&
                 _jsx("div", { style: { display: 'flex', alignItems: 'center', gap: '5px' }, children: _jsx(TMButton, { btnStyle: 'icon', icon: _jsx(IconDelete, { color: 'white' }), caption: "Rimuovi da " + (selectedSearchResult?.category === "Favorites" ? '"Preferiti"' : '"Recenti"'), disabled: getSelectedDcmtsOrFocused(selectedItems, focusedItem).length <= 0, onClick: removeDcmtFromFavsOrRecents }) }), _jsx(TMButton, { btnStyle: 'icon', icon: _jsx(IconRefresh, { color: 'white' }), caption: SDKUI_Localizator.Refresh, onClick: onRefreshSearchAsync }), _jsx(IconMenuVertical, { id: `commands-header-${id}`, color: 'white', cursor: 'pointer' }), _jsx(CommandsContextMenu, { target: `#commands-header-${id}`, menuItems: getCommandsMenuItems(fromDTD, selectedItems, focusedItem, context, showFloatingBar, setShowFloatingBar, openFormHandler, downloadDcmtsAsync, runOperationAsync, onRefreshSearchAsync, refreshSelectionDataRowsAsync, onRefreshAfterAddDcmtToFavs, confirmFormat, openConfirmAttachmentsDialog, openTaskFormHandler, openDetailDcmtsFormHandler, openMasterDcmtsFormHandler, openBatchUpdateFormHandler) })] });
     const middlePanelToolbar = _jsxs("div", { style: { width: 'max-content', display: 'flex', alignItems: 'center', gap: '10px' }, children: [_jsx(TMSaveFormButtonPrevious, { btnStyle: 'icon', isModified: false, iconColor: TMColors.default_background, formMode: FormModes.ReadOnly, canPrev: canNavigateHandler('prev'), onPrev: () => onNavigateHandler('prev') }), _jsx(TMSaveFormButtonNext, { btnStyle: 'icon', isModified: false, iconColor: TMColors.default_background, formMode: FormModes.ReadOnly, canNext: canNavigateHandler('next'), onNext: () => onNavigateHandler('next') })] });
     const handleAddItem = (tid, did) => {
@@ -346,7 +346,10 @@ const TMSearchResult = ({ context = SearchResultContext.METADATA_SEARCH, isVisib
                                     , { 
                                         // allowMultipleSelection={allowMultipleSelection}
                                         inputFocusedItem: focusedItem, inputSelectedItems: selectedItems, searchResult: searchResults.length > 1 ? selectedSearchResult : searchResults[0], lastUpdateSearchTime: lastUpdateSearchTime, onDblClick: () => openFormHandler(LayoutModes.Update), onContextMenuPreparing: onContextMenuPreparing, onSelectionChanged: (items) => { setSelectedItems(items); }, onVisibleItemChanged: setVisibleItems, onFocusedItemChanged: setFocusedItem }), allowFloatingBar && showFloatingBar && deviceType !== DeviceType.MOBILE &&
-                                        _jsxs(TMFloatingToolbar, { backgroundColor: TMColors.primaryColor, initialLeft: '10px', initialTop: 'calc(100% - 75px)', children: [fromDTD?.perm?.canRetrieveFile === AccessLevels.Yes && _jsx(TMButton, { btnStyle: 'icon', caption: "Download file", disabled: fromDTD?.perm?.canRetrieveFile !== AccessLevels.Yes, icon: _jsx(IconDownload, { color: 'white' }), onClick: () => { downloadDcmtsAsync(getSelectedDcmtsOrFocused(selectedItems, focusedItem), DownloadTypes.Dcmt); } }), _jsx(TMButton, { btnStyle: 'icon', caption: 'Firma e marca', icon: _jsx(IconSignature, { color: 'white' }), onClick: () => { ShowAlert({ message: "TODO Firma e marca ", mode: 'info', title: `${"TODO"}`, duration: 3000 }); } }), _jsx(IconMenuVertical, { id: `commands-floating-${id}`, color: 'white', cursor: 'pointer' }), _jsx(CommandsContextMenu, { target: `#commands-floating-${id}`, menuItems: getCommandsMenuItems(fromDTD, selectedItems, focusedItem, context, showFloatingBar, setShowFloatingBar, openFormHandler, downloadDcmtsAsync, runOperationAsync, onRefreshSearchAsync, refreshSelectionDataRowsAsync, onRefreshAfterAddDcmtToFavs, confirmFormat, openConfirmAttachmentsDialog, openTaskFormHandler, openDetailDcmtsFormHandler, openMasterDcmtsFormHandler, openBatchUpdateFormHandler) })] })] })] }), showApprovePopup && _jsx(WorkFlowApproveRejectPopUp, { deviceType: deviceType, onUpdate: onUpdate, selectedItems: getSelectedDcmtsOrFocused(selectedItems, focusedItem), op: 0, onClose: () => setShowApprovePopup(false) }), showRejectPopup && _jsx(WorkFlowApproveRejectPopUp, { deviceType: deviceType, onUpdate: onUpdate, selectedItems: getSelectedDcmtsOrFocused(selectedItems, focusedItem), op: 1, onClose: () => setShowRejectPopup(false) }), showReAssignPopup && _jsx(WorkFlowReAssignPopUp, { deviceType: deviceType, onUpdate: onUpdate, selectedItems: getSelectedDcmtsOrFocused(selectedItems, focusedItem), onClose: () => setShowReAssignPopup(false) })] }), _jsx(ConfirmFormatDialog, {}), _jsx(ConfirmAttachmentsDialog, {})] });
+                                        _jsxs(TMFloatingToolbar, { backgroundColor: TMColors.primaryColor, initialLeft: '10px', initialTop: 'calc(100% - 75px)', children: [fromDTD?.perm?.canRetrieveFile === AccessLevels.Yes && _jsx(TMButton, { btnStyle: 'icon', caption: "Download file", disabled: fromDTD?.perm?.canRetrieveFile !== AccessLevels.Yes, icon: _jsx(IconDownload, { color: 'white' }), onClick: () => { downloadDcmtsAsync(getSelectedDcmtsOrFocused(selectedItems, focusedItem), DownloadTypes.Dcmt); } }), _jsx(TMButton, { btnStyle: 'icon', caption: 'Firma e marca', icon: _jsx(IconSignature, { color: 'white' }), onClick: () => { ShowAlert({ message: "TODO Firma e marca ", mode: 'info', title: `${"TODO"}`, duration: 3000 }); } }), _jsx(IconMenuVertical, { id: `commands-floating-${id}`, color: 'white', cursor: 'pointer' }), _jsx(CommandsContextMenu, { target: `#commands-floating-${id}`, menuItems: getCommandsMenuItems(fromDTD, selectedItems, focusedItem, context, showFloatingBar, setShowFloatingBar, openFormHandler, downloadDcmtsAsync, runOperationAsync, onRefreshSearchAsync, refreshSelectionDataRowsAsync, onRefreshAfterAddDcmtToFavs, confirmFormat, openConfirmAttachmentsDialog, openTaskFormHandler, openDetailDcmtsFormHandler, openMasterDcmtsFormHandler, openBatchUpdateFormHandler) })] })] })] }), showApprovePopup && _jsx(WorkFlowApproveRejectPopUp, { deviceType: deviceType, onUpdate: onUpdate, selectedItems: getSelectedDcmtsOrFocused(selectedItems, focusedItem), op: 0, onClose: () => setShowApprovePopup(false) }), showRejectPopup && _jsx(WorkFlowApproveRejectPopUp, { deviceType: deviceType, onUpdate: onUpdate, selectedItems: getSelectedDcmtsOrFocused(selectedItems, focusedItem), op: 1, onClose: () => setShowRejectPopup(false) }), showReAssignPopup && _jsx(WorkFlowReAssignPopUp, { deviceType: deviceType, onUpdate: onUpdate, selectedItems: getSelectedDcmtsOrFocused(selectedItems, focusedItem), onClose: () => setShowReAssignPopup(false) }), (isVisible && fromDTD?.templateTID === TemplateTIDs.WF_WIApprView && !isOpenDcmtForm && !isOpenDetails && !isOpenMaster) &&
+                        _jsx(ToppyHelpCenter, { deviceType: deviceType, 
+                            // onClick={() => isMobile ? openConfigureMode?.() : undefined}
+                            content: _jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: '10px' }, children: _jsx(WorkFlowOperationButtons, { deviceType: deviceType, onApprove: () => setShowApprovePopup(true), onReject: () => setShowRejectPopup(true), onReAssign: () => setShowReAssignPopup(true), approveDisable: disable, rejectDisable: disable, reassignDisable: disable, infoDisable: getSelectedDcmtsOrFocused(selectedItems, focusedItem).length !== 1 }) }) })] }), _jsx(ConfirmFormatDialog, {}), _jsx(ConfirmAttachmentsDialog, {})] });
     const renderTMBlog = (handleTogglePanel) => _jsx(TMDcmtBlog, { tid: focusedItem?.TID, did: focusedItem?.DID });
     const renderTMSysMetadata = (handleTogglePanel) => _jsx(TMMetadataValues, { layoutMode: LayoutModes.Update, openChooserBySingleClick: true, TID: focusedItem?.TID, isReadOnly: true, deviceType: deviceType, metadataValues: currentMetadataValues.filter(o => (o.mid != undefined && o.mid <= 100)), metadataValuesOrig: currentMetadataValues.filter(o => (o.mid != undefined && o.mid <= 100)), validationItems: [] });
     const renderTMDcmtPreview = (handleTogglePanel) => _jsx(TMDcmtPreview, { onClose: () => {
@@ -373,7 +376,7 @@ const TMSearchResult = ({ context = SearchResultContext.METADATA_SEARCH, isVisib
                     title: getTitleHeader(),
                     showHeader: showToolbarHeader,
                     allowMaximize: !isMobile,
-                    onBack: !isClosable ? onBack : undefined,
+                    onBack: (!isClosable && context === SearchResultContext.METADATA_SEARCH) ? onBack : undefined,
                     onClose: isClosable ? onBack : undefined,
                     toolbar: searchResutlToolbar
                 },
@@ -456,7 +459,7 @@ const TMSearchResult = ({ context = SearchResultContext.METADATA_SEARCH, isVisib
             },
         },
         {
-            id: 'showMaster',
+            id: 'commandMaster',
             name: SDKUI_Localizator.DcmtsMaster,
             toolbarOptions: {
                 icon: _jsx(IconDetailDcmts, { fontSize: 24 }),
@@ -472,7 +475,7 @@ const TMSearchResult = ({ context = SearchResultContext.METADATA_SEARCH, isVisib
             },
         },
         {
-            id: 'showDetails',
+            id: 'commandDetails',
             name: SDKUI_Localizator.DcmtsDetail,
             toolbarOptions: {
                 icon: _jsx(IconDetailDcmts, { transform: 'scale(-1, 1)', fontSize: 24 }),

package/lib/components/features/workflow/TMWorkflowPopup.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo, useState } from "react";
 import { SDK_Globals } from '@topconsultnpm/sdk-ts-beta';
-import { Menu } from "devextreme-react";
 import styled from "styled-components";
 import { SDKUI_Localizator, IconApply, IconCloseOutline, IconUser, IconInfo } from "../../../helper";
 import { TMColors } from "../../../utils/theme";
@@ -16,6 +15,7 @@ const StyledWorkFlowOperationButtonsContainer = styled.div `
     align-items: center;
     gap: 15px;
     margin-left: ${props => props.$isInDcmtForm ? '0' : '50px'};
+    flex-direction: column;
 `;
 const StyledTextArea = styled.textarea `
     width: 100%; 
@@ -41,9 +41,16 @@ export const WorkFlowOperationButtons = ({ isInDcmtForm = false, deviceType = De
                 ],
             }]);
     }, []);
-    return (deviceType === DeviceType.DESKTOP ?
-        _jsxs(StyledWorkFlowOperationButtonsContainer, { "$isInDcmtForm": isInDcmtForm, children: [_jsx(TMButton, { btnStyle: isInDcmtForm ? 'toolbar' : 'advanced', showTooltip: isInDcmtForm, icon: _jsx(IconApply, {}), caption: SDKUI_Localizator.Approve, disabled: approveDisable, onClick: () => !approveDisable && onApprove && onApprove(), advancedColor: TMColors.success, color: 'success' }), _jsx(TMButton, { btnStyle: isInDcmtForm ? 'toolbar' : 'advanced', showTooltip: isInDcmtForm, icon: _jsx(IconCloseOutline, {}), caption: SDKUI_Localizator.Reject, disabled: rejectDisable, onClick: () => !rejectDisable && onReject && onReject(), advancedColor: TMColors.error, color: 'error' }), _jsx(TMButton, { btnStyle: isInDcmtForm ? 'toolbar' : 'advanced', showTooltip: isInDcmtForm, icon: _jsx(IconUser, { fontSize: 16 }), caption: SDKUI_Localizator.Reassign, disabled: reassignDisable, onClick: () => !reassignDisable && onReAssign && onReAssign(), advancedColor: TMColors.tertiary, color: 'tertiary' }), _jsx(TMButton, { btnStyle: isInDcmtForm ? 'toolbar' : 'advanced', showTooltip: isInDcmtForm, icon: _jsx(IconInfo, { fontSize: 16 }), caption: SDKUI_Localizator.MoreInformation, width: '180px', disabled: infoDisable, onClick: () => alert('TODO!!!'), advancedColor: TMColors.info, color: 'info' })] }) :
-        _jsx(Menu, { elementAttr: { class: 'custom-dx-menu' }, disabled: approveDisable && reassignDisable && rejectDisable && infoDisable, dataSource: operations, displayExpr: "name" }));
+    return (
+    // deviceType === DeviceType.DESKTOP ?
+    _jsxs(StyledWorkFlowOperationButtonsContainer, { "$isInDcmtForm": isInDcmtForm, children: [_jsx(TMButton, { btnStyle: isInDcmtForm ? 'toolbar' : 'advanced', showTooltip: isInDcmtForm, icon: _jsx(IconApply, {}), caption: SDKUI_Localizator.Approve, disabled: approveDisable, onClick: () => !approveDisable && onApprove && onApprove(), advancedColor: TMColors.success, color: 'success' }), _jsx(TMButton, { btnStyle: isInDcmtForm ? 'toolbar' : 'advanced', showTooltip: isInDcmtForm, icon: _jsx(IconCloseOutline, {}), caption: SDKUI_Localizator.Reject, disabled: rejectDisable, onClick: () => !rejectDisable && onReject && onReject(), advancedColor: TMColors.error, color: 'error' }), _jsx(TMButton, { btnStyle: isInDcmtForm ? 'toolbar' : 'advanced', showTooltip: isInDcmtForm, icon: _jsx(IconUser, { fontSize: 16 }), caption: SDKUI_Localizator.Reassign, disabled: reassignDisable, onClick: () => !reassignDisable && onReAssign && onReAssign(), advancedColor: TMColors.tertiary, color: 'tertiary' }), _jsx(TMButton, { btnStyle: isInDcmtForm ? 'toolbar' : 'advanced', showTooltip: isInDcmtForm, icon: _jsx(IconInfo, { fontSize: 16 }), caption: SDKUI_Localizator.MoreInformation, width: '180px', disabled: infoDisable, onClick: () => alert('TODO!!!'), advancedColor: TMColors.info, color: 'info' })] })
+    //             : <Menu
+    //     elementAttr={{ class: 'custom-dx-menu' }}
+    //     disabled={approveDisable && reassignDisable && rejectDisable && infoDisable}
+    //     dataSource={operations}
+    //     displayExpr="name"
+    // />
+    );
 };
 export const WorkFlowApproveRejectPopUp = ({ TID = 0, DID = 0, deviceType = DeviceType.DESKTOP, op, onClose, selectedItems = [], onUpdate }) => {
     const [commentValue, setCommentValue] = useState('');

package/lib/components/index.d.ts

@@ -81,3 +81,6 @@ export { default as TMFileManagerThumbnailItems } from "./base/TMFileManagerThum
 export { default as TMCounterContainer } from "./base/TMCounterContainer";
 export * from "./base/TMCounterContainer";
 export { default as TMAreaManager } from "./base/TMAreaManager";
+export * from "./layout/panel/TMPanelContext";
+export * from "./layout/panel/TMPanelToolbar";
+export * from "./layout/panel/useResizablePanels";

package/lib/components/index.js

@@ -96,3 +96,7 @@ export { default as TMFileManagerThumbnailItems } from "./base/TMFileManagerThum
 export { default as TMCounterContainer } from "./base/TMCounterContainer";
 export * from "./base/TMCounterContainer";
 export { default as TMAreaManager } from "./base/TMAreaManager";
+// layout
+export * from "./layout/panel/TMPanelContext";
+export * from "./layout/panel/TMPanelToolbar";
+export * from "./layout/panel/useResizablePanels";

package/lib/components/layout/TMPanelLayout.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useRef, useState, Children, cloneElement, isValidElement, useEffect, useMemo, } from 'react';
 import { SDKUI_Globals } from '../../helper';
+import { useDeviceType } from '../base/TMDeviceProvider';
 export const TMPanelItem = (props) => (_jsx("div", { style: {
         flexBasis: props.width || props.height || 'auto',
         minWidth: props.minWidth,
@@ -9,7 +10,7 @@ export const TMPanelItem = (props) => (_jsx("div", { style: {
         flexShrink: 0,
         height: '100%',
         width: '100%',
-        overflow: 'auto',
+        // overflow: 'auto',
         position: 'relative',
         boxSizing: 'border-box',
         display: 'flex',
@@ -100,35 +101,32 @@ export const TMPanelGroup = ({ orientation = 'horizontal', allowItemResize = fal
             filteredAccHidden += renderedSizes[i];
         }
     }
-    // --- CORRECTED MERGING LOGIC ---
+    // --- CORRECTED MERGING LOGIC: merge hidden into previous visible, or into the first visible if at the start ---
     // Merge hidden panel sizes into the nearest visible sibling (prefer previous, else next)
     const mergedPanels = [];
     const mergedSizes = [];
     const mergedPaths = [];
+    let lastVisibleIdx = -1;
     for (let i = 0; i < filteredPanels.length; i++) {
         if (filteredPanels[i] !== null && filteredPanels[i] !== undefined) {
+            // If there were hidden panels before the first visible, merge their sizes into this first visible
+            if (lastVisibleIdx === -1 && i > 0) {
+                let acc = 0;
+                for (let j = 0; j < i; j++)
+                    acc += filteredSizes[j];
+                mergedSizes.push(filteredSizes[i] + acc);
+            }
+            else {
+                mergedSizes.push(filteredSizes[i]);
+            }
             mergedPanels.push(filteredPanels[i]);
-            mergedSizes.push(filteredSizes[i]);
             mergedPaths.push(filteredPaths[i]);
+            lastVisibleIdx = mergedSizes.length - 1;
         }
         else {
-            // Hidden panel: merge its size into previous visible, or next if first
-            if (mergedPanels.length > 0) {
-                mergedSizes[mergedSizes.length - 1] += filteredSizes[i];
-            }
-            else {
-                // No previous, merge into next visible
-                let j = i + 1;
-                while (j < filteredPanels.length &&
-                    (filteredPanels[j] === null || filteredPanels[j] === undefined)) {
-                    j++;
-                }
-                if (j < filteredPanels.length) {
-                    // Next visible found
-                    if (filteredSizes[j] !== undefined) {
-                        filteredSizes[j] += filteredSizes[i];
-                    }
-                }
+            // Hidden panel: merge its size into the last visible panel (if any)
+            if (lastVisibleIdx >= 0) {
+                mergedSizes[lastVisibleIdx] += filteredSizes[i];
             }
         }
     }
@@ -268,6 +266,8 @@ const TMPanelLayout = ({ children, showToolbar = true, emptyContent, }) => {
     };
     // For nested: you can extend this to track nested visibility state if needed
     const allHidden = isAllPanelsHidden();
+    const deviceType = useDeviceType();
+    const isMobile = useMemo(() => deviceType === 'mobile', [deviceType]);
     return (_jsx("div", { style: {
             width: '100%',
             height: '100%',
@@ -275,23 +275,21 @@ const TMPanelLayout = ({ children, showToolbar = true, emptyContent, }) => {
             overflow: 'hidden',
             display: 'flex',
             flexDirection: 'column',
-        }, children: _jsxs("div", { style: { width: '100%', height: '100%', position: 'relative' }, children: [!allHidden &&
+        }, children: _jsxs("div", { style: { display: 'flex', flexDirection: isMobile ? 'column' : 'row', height: '100%', width: '100%', gap: !isMobile ? SDKUI_Globals.userSettings.themeSettings.gutters : 0 }, children: [!allHidden &&
                     cloneElement(group, {
                         panelVisibility,
                         onTogglePanel: handleTogglePanel,
                         panelLabels: allPanels.map(p => p.label),
                     }), showToolbar && (_jsx("div", { style: {
-                        position: 'absolute',
-                        top: 10,
-                        right: 10,
-                        zIndex: 1000,
-                        background: 'rgba(255,255,255,0.9)',
-                        borderRadius: 8,
-                        boxShadow: '0 2px 8px #0002',
-                        padding: 8,
                         display: 'flex',
-                        flexDirection: 'column',
-                        gap: 8,
+                        flexDirection: isMobile ? 'row' : 'column',
+                        alignItems: 'center',
+                        width: isMobile ? '100%' : '50px',
+                        height: isMobile ? '50px' : 'max-content',
+                        background: 'transparent linear-gradient(90deg, #CCE0F4 0%, #7EC1E7 14%, #39A6DB 28%, #1E9CD7 35%, #0075BE 78%, #005B97 99%) 0% 0% no-repeat padding-box',
+                        borderRadius: isMobile ? '10px' : '10px 0px 0px 10px',
+                        padding: '10px',
+                        gap: '10px'
                     }, children: _jsx(TMPanelLayoutToolbar, { panelLabels: allPanels.map(p => p.label), panelVisibility: panelVisibility, onTogglePanel: handleTogglePanel }) })), allHidden && (_jsx("div", { style: {
                         position: 'absolute',
                         left: 0,

package/lib/components/layout/panel/TMPanelContext.d.ts

@@ -0,0 +1,45 @@
+import { ReactNode } from 'react';
+export interface TMPanelManagerItemContext {
+    id: string;
+    name: string;
+    contentOptions: {
+        width: string;
+        height: string;
+    };
+    toolbarOptions: {
+        icon: string | JSX.Element;
+        visible: boolean;
+        isActive: boolean;
+        disabled?: boolean;
+        orderNumber?: number;
+        beginGroup?: boolean;
+        alwaysActiveColor?: boolean;
+    };
+    children: Array<TMPanelManagerItemContext>;
+}
+interface ITMPanelManagerContext {
+    panelTree: Array<TMPanelManagerItemContext>;
+    visibility: Record<string, boolean>;
+    calculateEffectiveVisibility: Record<string, boolean>;
+    setPanelVisibility: (id: string, visible: boolean) => void;
+    togglePanel: (id: string) => void;
+    findPanelById: (id: string) => TMPanelManagerItemContext | undefined;
+    getPanelDimensions: (id: string) => {
+        width: string;
+        height: string;
+    };
+    toggleMaximizePanel: (id: string) => void;
+    maximizedPanelId: string | null;
+    updatePanelSize: (id: string, width: string | number, height: string | number) => void;
+    setPanelVisibleById: (id: string, visible: boolean) => void;
+    setPanelDisabledById: (id: string, disabled: boolean) => void;
+    hasVisiblePanels: () => boolean;
+}
+export declare function useTMPanelContext(): ITMPanelManagerContext;
+interface TMPanelContextProviderProps {
+    panels: Array<TMPanelManagerItemContext>;
+    initialMobilePanelId: string;
+    children: ReactNode;
+}
+export declare const TMPanelManagerContextProvider: (props: TMPanelContextProviderProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/layout/panel/TMPanelContext.js

@@ -0,0 +1,314 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo, useState, useEffect, } from 'react';
+import { DeviceType, useDeviceType } from '../../base/TMDeviceProvider';
+// Creazione del context
+const TMPanelManagerContext = createContext(undefined);
+// Hook custom per accedere al context
+export function useTMPanelContext() {
+    const context = useContext(TMPanelManagerContext);
+    if (!context) {
+        throw new Error('useTMPanelContext must be used within a TMPanelContextProvider');
+    }
+    return context;
+}
+// Provider del context
+export const TMPanelManagerContextProvider = (props) => {
+    const { panels, initialMobilePanelId, children } = props;
+    const [panelTree, setPanelTree] = useState(panels);
+    const [maximizedPanelId, setMaximizedPanelId] = useState(null);
+    const deviceType = useDeviceType();
+    let isMobile = useMemo(() => { return deviceType === DeviceType.MOBILE; }, [deviceType]);
+    useEffect(() => {
+        if (isMobile) {
+            setVisibility(prev => updatePanelVisibility(initialMobilePanelId, true, prev));
+        }
+    }, [isMobile]);
+    // Stato iniziale per dimensioni pannelli
+    const [panelSizes, setPanelSizes] = useState(() => {
+        const sizes = {};
+        const flattenPanels = (panels) => panels.reduce((acc, p) => [...acc, p, ...flattenPanels(p.children)], []);
+        const allPanels = flattenPanels(panelTree);
+        allPanels.forEach(panel => {
+            sizes[panel.id] = { width: panel.contentOptions.width, height: panel.contentOptions.height };
+        });
+        return sizes;
+    });
+    // Trova un pannello tramite ID
+    const findPanelById = (id) => {
+        const findRecursive = (panels) => {
+            for (const panel of panels) {
+                if (panel.id === id)
+                    return panel;
+                const found = findRecursive(panel.children);
+                if (found)
+                    return found;
+            }
+            return undefined;
+        };
+        return findRecursive(panelTree);
+    };
+    // Mappa figlio -> genitori
+    const parentMap = useMemo(() => {
+        const map = new Map();
+        const buildMap = (panels, parents = []) => {
+            for (const panel of panels) {
+                map.set(panel.id, [...parents]);
+                buildMap(panel.children, [...parents, panel.id]);
+            }
+        };
+        buildMap(panelTree);
+        return map;
+    }, [panelTree]);
+    // Mappa genitore -> figli
+    const parentToChildrenMap = useMemo(() => {
+        const map = new Map();
+        const buildMap = (panels) => {
+            for (const panel of panels) {
+                map.set(panel.id, panel.children.map(c => c.id));
+                buildMap(panel.children);
+            }
+        };
+        buildMap(panelTree);
+        return map;
+    }, [panelTree]);
+    // Stato visibilità iniziale
+    const getInitialVisibility = (panels) => {
+        const vis = {};
+        const collect = (panels) => {
+            for (const panel of panels) {
+                vis[panel.id] = panel.toolbarOptions?.isActive ?? false;
+                collect(panel.children);
+            }
+        };
+        collect(panels);
+        return vis;
+    };
+    const [visibility, setVisibility] = useState(() => getInitialVisibility(panelTree));
+    const getParentsOfPanel = (id) => parentMap.get(id) || [];
+    // Visibilità effettiva tenendo conto della gerarchia
+    const calculateEffectiveVisibility = useMemo(() => {
+        if (maximizedPanelId) {
+            return { ...visibility };
+        }
+        const updatedVisibility = { ...visibility };
+        const propagateToParents = (id) => {
+            for (const parent of parentMap.get(id) || []) {
+                if (!updatedVisibility[parent]) {
+                    updatedVisibility[parent] = true;
+                    propagateToParents(parent);
+                }
+            }
+        };
+        Object.entries(updatedVisibility).forEach(([id, isVisible]) => {
+            if (isVisible)
+                propagateToParents(id);
+        });
+        const deactivateIfNoVisibleChildren = (parentId) => {
+            const children = parentToChildrenMap.get(parentId) || [];
+            if (children.length === 0)
+                return;
+            const anyVisible = children.some(id => updatedVisibility[id]);
+            if (!anyVisible && updatedVisibility[parentId]) {
+                updatedVisibility[parentId] = false;
+                for (const grand of parentMap.get(parentId) || []) {
+                    deactivateIfNoVisibleChildren(grand);
+                }
+            }
+        };
+        for (const parentId of parentToChildrenMap.keys()) {
+            deactivateIfNoVisibleChildren(parentId);
+        }
+        return updatedVisibility;
+    }, [visibility, parentMap, parentToChildrenMap, maximizedPanelId]);
+    // Calcolo delle dimensioni dinamiche in base alla visibilità
+    const dynamicSizesMap = useMemo(() => {
+        const flattenPanels = (panels) => panels.reduce((acc, p) => [...acc, p, ...flattenPanels(p.children)], []);
+        const allPanels = flattenPanels(panelTree);
+        const originalHeights = new Map();
+        const originalWidths = new Map();
+        allPanels.forEach(panel => {
+            originalHeights.set(panel.id, parseFloat(panel.contentOptions.height) || 0);
+            originalWidths.set(panel.id, parseFloat(panel.contentOptions.width) || 0);
+        });
+        if (maximizedPanelId) {
+            const parents = getParentsOfPanel(maximizedPanelId);
+            const allowed = new Set([maximizedPanelId, ...parents]);
+            const sizesMap = {};
+            allPanels.forEach(panel => {
+                sizesMap[panel.id] = allowed.has(panel.id)
+                    ? { width: '100%', height: '100%' }
+                    : { width: '0%', height: '0%' };
+            });
+            return sizesMap;
+        }
+        const calcSiblingSizes = (siblings, originalSizes) => {
+            const visibleSiblings = siblings.filter(s => calculateEffectiveVisibility[s.id]);
+            const totalVisible = visibleSiblings.reduce((sum, s) => sum + (originalSizes.get(s.id) || 0), 0);
+            const totalAll = siblings.reduce((sum, s) => sum + (originalSizes.get(s.id) || 0), 0);
+            const map = {};
+            visibleSiblings.forEach(s => {
+                const orig = originalSizes.get(s.id) || 0;
+                map[s.id] = totalVisible === 0 ? 0 : (orig / totalVisible) * totalAll;
+            });
+            siblings.forEach(s => {
+                if (!calculateEffectiveVisibility[s.id])
+                    map[s.id] = 0;
+            });
+            return map;
+        };
+        const widthSizesMap = {};
+        const heightSizesMap = {};
+        Object.assign(widthSizesMap, calcSiblingSizes(panelTree, originalWidths));
+        Object.assign(heightSizesMap, calcSiblingSizes(panelTree, originalHeights));
+        const processChildrenSizes = (panels) => {
+            panels.forEach(panel => {
+                if (panel.children.length > 0) {
+                    Object.assign(widthSizesMap, calcSiblingSizes(panel.children, originalWidths));
+                    Object.assign(heightSizesMap, calcSiblingSizes(panel.children, originalHeights));
+                    processChildrenSizes(panel.children);
+                }
+            });
+        };
+        processChildrenSizes(panelTree);
+        const sizesMap = {};
+        allPanels.forEach(panel => {
+            const width = Math.min(widthSizesMap[panel.id] ?? 0, 100);
+            const height = Math.min(heightSizesMap[panel.id] ?? 0, 100);
+            sizesMap[panel.id] = {
+                width: calculateEffectiveVisibility[panel.id] ? `${width.toFixed(2)}%` : '0%',
+                height: calculateEffectiveVisibility[panel.id] ? `${height.toFixed(2)}%` : '0%',
+            };
+        });
+        return sizesMap;
+    }, [calculateEffectiveVisibility, panelTree, maximizedPanelId]);
+    // Ottieni dimensioni di un pannello (override -> dinamico -> default)
+    const getPanelDimensions = (id) => {
+        if (panelSizes[id])
+            return panelSizes[id];
+        if (dynamicSizesMap[id])
+            return dynamicSizesMap[id];
+        const panel = findPanelById(id);
+        return panel ? { width: panel.contentOptions.width, height: panel.contentOptions.height } : { width: 'auto', height: 'auto' };
+    };
+    // Imposta manualmente le dimensioni di un pannello
+    const updatePanelSize = (id, width, height) => {
+        setPanelSizes(prev => ({
+            ...prev,
+            [id]: {
+                width: typeof width === 'number' ? `${width}%` : width,
+                height: typeof height === 'number' ? `${height}%` : height,
+            },
+        }));
+    };
+    // Quando cambia visibilità o massimizzazione, resetta override
+    useEffect(() => {
+        setPanelSizes({});
+    }, [visibility, maximizedPanelId]);
+    // Massimizza o ripristina un pannello
+    const toggleMaximizePanel = (id) => {
+        setMaximizedPanelId(prev => (prev === id ? null : id));
+    };
+    const updatePanelVisibility = (id, visible, currentVisibility) => {
+        let next = { ...currentVisibility };
+        if (!visible && maximizedPanelId === id) {
+            setMaximizedPanelId(null);
+        }
+        // Se siamo su mobile, resettiamo tutto tranne il pannello selezionato e i suoi parent
+        if (isMobile && visible) {
+            const parents = parentMap.get(id) || [];
+            // Imposta tutti i pannelli come invisibili tranne il selezionato e i suoi parent
+            Object.keys(next).forEach(panelId => {
+                next[panelId] = (panelId === id || parents.includes(panelId));
+            });
+            // Applichiamo propagazione verso l’alto (attivazione dei genitori)
+            const activateParents = (childId) => {
+                for (const parent of parentMap.get(childId) || []) {
+                    if (!next[parent]) {
+                        next[parent] = true;
+                        activateParents(parent);
+                    }
+                }
+            };
+            activateParents(id);
+            return next;
+        }
+        // Normal behavior (desktop)
+        next[id] = visible;
+        if (visible) {
+            const activateParents = (childId) => {
+                for (const parent of parentMap.get(childId) || []) {
+                    if (!next[parent]) {
+                        next[parent] = true;
+                        activateParents(parent);
+                    }
+                }
+            };
+            activateParents(id);
+        }
+        else {
+            const deactivateParents = (childId) => {
+                for (const parent of parentMap.get(childId) || []) {
+                    const children = parentToChildrenMap.get(parent) || [];
+                    const anyVisible = children.some(cId => next[cId]);
+                    if (!anyVisible && next[parent]) {
+                        next[parent] = false;
+                        deactivateParents(parent);
+                    }
+                }
+            };
+            deactivateParents(id);
+        }
+        return next;
+    };
+    // Attiva/disattiva visibilità di un pannello
+    const togglePanel = (id) => {
+        setVisibility(prev => updatePanelVisibility(id, !prev[id], prev));
+    };
+    // Imposta visibilità esplicita di un pannello
+    const setPanelVisibility = (id, visible) => {
+        setVisibility(prev => updatePanelVisibility(id, visible, prev));
+    };
+    // Cambia la visibilità direttamente nel pannello (opzionale, ma richiesto da te)
+    const setPanelVisibleById = (id, visible) => {
+        setPanelTree(prevTree => {
+            const update = (panels) => panels.map(panel => {
+                if (panel.id === id) {
+                    return { ...panel, toolbarOptions: { ...panel.toolbarOptions, visible } };
+                }
+                return { ...panel, children: update(panel.children) };
+            });
+            return update(prevTree);
+        });
+    };
+    // Cambia il valore di disabled direttamente nel pannello
+    const setPanelDisabledById = (id, disabled) => {
+        setPanelTree(prevTree => {
+            const update = (panels) => panels.map(panel => {
+                if (panel.id === id) {
+                    return { ...panel, toolbarOptions: { ...panel.toolbarOptions, disabled, } };
+                }
+                return { ...panel, children: update(panel.children) };
+            });
+            return update(prevTree);
+        });
+    };
+    const hasVisiblePanels = () => {
+        return Object.values(calculateEffectiveVisibility).some(visible => visible);
+    };
+    // Valori esposti dal context
+    return (_jsx(TMPanelManagerContext.Provider, { value: {
+            panelTree,
+            visibility,
+            calculateEffectiveVisibility,
+            setPanelVisibility,
+            togglePanel,
+            findPanelById,
+            getPanelDimensions,
+            toggleMaximizePanel,
+            maximizedPanelId,
+            updatePanelSize,
+            setPanelVisibleById,
+            setPanelDisabledById,
+            hasVisiblePanels
+        }, children: children }));
+};

package/lib/components/layout/panel/TMPanelToolbar.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const TMPanelToolbar: () => import("react/jsx-runtime").JSX.Element;
+export declare const StyledToolbarButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
+    $isActive?: boolean;
+    $isDisabled?: boolean;
+}>> & string;

package/lib/components/layout/panel/TMPanelToolbar.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { useTMPanelContext } from './TMPanelContext';
+import styled from 'styled-components';
+import { DeviceType, useDeviceType } from '../../base/TMDeviceProvider';
+import TMTooltip from '../../base/TMTooltip';
+export const TMPanelToolbar = () => {
+    const { panelTree, togglePanel, calculateEffectiveVisibility } = useTMPanelContext();
+    const deviceType = useDeviceType();
+    let isMobile = useMemo(() => { return deviceType === DeviceType.MOBILE; }, [deviceType]);
+    // Ricorsivamente trova tutti i pannelli parent (hanno figli)
+    const getParentIds = (panels, parents = new Set()) => {
+        for (const panel of panels) {
+            if (panel.children.length > 0) {
+                parents.add(panel.id);
+                getParentIds(panel.children, parents);
+            }
+        }
+        return parents;
+    };
+    // Ricorsivamente trova tutti i pannelli foglia (senza figli)
+    const getLeafPanels = (panels, leaves = []) => {
+        for (const panel of panels) {
+            if (panel.children.length === 0) {
+                leaves.push(panel);
+            }
+            else {
+                getLeafPanels(panel.children, leaves);
+            }
+        }
+        return leaves;
+    };
+    const parentIds = getParentIds(panelTree);
+    const leafPanels = getLeafPanels(panelTree);
+    return (_jsx("div", { style: {
+            display: 'flex',
+            flexDirection: isMobile ? 'row' : 'column',
+            gap: '6px',
+            alignItems: 'center',
+            justifyContent: isMobile ? 'center' : 'flex-start',
+            width: '100%',
+            height: '100%'
+        }, children: leafPanels.filter(panel => panel.toolbarOptions.visible).map((item) => {
+            const isActive = calculateEffectiveVisibility[item.id];
+            return _jsx(TMTooltip, { content: item.name, position: isMobile ? 'top' : 'left', children: _jsx(StyledToolbarButton, { "$isActive": isActive || item.toolbarOptions?.alwaysActiveColor, "$isDisabled": item.toolbarOptions?.disabled, disabled: item.toolbarOptions?.disabled, onClick: () => { togglePanel(item.id); }, children: typeof item.toolbarOptions?.icon === 'string' ? (_jsx("i", { className: `dx-icon dx-icon-${item.toolbarOptions?.icon}` })) : (item.toolbarOptions?.icon) }) }, item.id);
+        }) }));
+};
+export const StyledToolbarButton = styled.button `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 32px;
+  width: 32px;
+  border: none;
+  border-radius: 8px;
+  font-size: 18px;
+  padding: 0px;
+  color: #fff;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  cursor: ${({ $isDisabled }) => ($isDisabled ? 'not-allowed' : 'pointer')};
+  opacity: ${({ $isDisabled }) => ($isDisabled ? 0.6 : 1)};
+  background: ${({ $isActive }) => $isActive ? 'rgba(255,255,255,0.35)' : 'transparent'};
+  &:hover {
+    background: ${({ $isDisabled }) => !$isDisabled ? 'rgba(255,255,255,0.35)' : undefined};
+  }
+`;

package/lib/components/layout/panel/useResizablePanels.d.ts

@@ -0,0 +1,3 @@
+export declare function useResizablePanels(containerRef: React.RefObject<HTMLDivElement | null>): {
+    onMouseDown: (e: React.MouseEvent, panelBeforeId: string, panelAfterId: string, isRow: boolean) => void;
+};

package/lib/components/layout/panel/useResizablePanels.js

@@ -0,0 +1,67 @@
+import { useRef, useCallback } from 'react';
+import { useTMPanelContext } from './TMPanelContext';
+export function useResizablePanels(containerRef) {
+    const { getPanelDimensions, updatePanelSize } = useTMPanelContext();
+    const resizingRef = useRef(null);
+    const getSizePercent = useCallback((panelId, isRow) => {
+        const dim = getPanelDimensions(panelId);
+        return isRow
+            ? parseFloat(dim.width.replace('%', ''))
+            : parseFloat(dim.height.replace('%', ''));
+    }, [getPanelDimensions]);
+    const getContainerSize = useCallback((isRow) => {
+        if (!containerRef.current)
+            return 0;
+        return isRow ? containerRef.current.clientWidth : containerRef.current.clientHeight;
+    }, [containerRef]);
+    const updateSize = useCallback((panelId, sizePercent, otherDimension, isRow) => {
+        if (isRow) {
+            updatePanelSize(panelId, `${sizePercent.toFixed(2)}%`, otherDimension);
+        }
+        else {
+            updatePanelSize(panelId, otherDimension, `${sizePercent.toFixed(2)}%`);
+        }
+    }, [updatePanelSize]);
+    const onMouseMove = useCallback((e) => {
+        const data = resizingRef.current;
+        if (!data || !containerRef.current)
+            return;
+        const { panelBeforeId, panelAfterId, startPos, startSizeBefore, startSizeAfter, isRow } = data;
+        const containerSize = getContainerSize(isRow);
+        const currentPos = isRow ? e.clientX : e.clientY;
+        const delta = currentPos - startPos;
+        const sizeBeforePx = (startSizeBefore / 100) * containerSize + delta;
+        const sizeAfterPx = (startSizeAfter / 100) * containerSize - delta;
+        if (sizeBeforePx < 50 || sizeAfterPx < 50)
+            return;
+        const newSizeBefore = (sizeBeforePx / containerSize) * 100;
+        const newSizeAfter = (sizeAfterPx / containerSize) * 100;
+        const dimBefore = getPanelDimensions(panelBeforeId);
+        const dimAfter = getPanelDimensions(panelAfterId);
+        const otherDimBefore = isRow ? dimBefore.height : dimBefore.width;
+        const otherDimAfter = isRow ? dimAfter.height : dimAfter.width;
+        updateSize(panelBeforeId, newSizeBefore, otherDimBefore, isRow);
+        updateSize(panelAfterId, newSizeAfter, otherDimAfter, isRow);
+    }, [getContainerSize, getPanelDimensions, updateSize, containerRef]);
+    const onMouseUp = useCallback(() => {
+        resizingRef.current = null;
+        window.removeEventListener('mousemove', onMouseMove);
+        window.removeEventListener('mouseup', onMouseUp);
+    }, [onMouseMove]);
+    const onMouseDown = useCallback((e, panelBeforeId, panelAfterId, isRow) => {
+        e.preventDefault();
+        if (!containerRef.current)
+            return;
+        resizingRef.current = {
+            panelBeforeId,
+            panelAfterId,
+            isRow,
+            startPos: isRow ? e.clientX : e.clientY,
+            startSizeBefore: getSizePercent(panelBeforeId, isRow),
+            startSizeAfter: getSizePercent(panelAfterId, isRow),
+        };
+        window.addEventListener('mousemove', onMouseMove);
+        window.addEventListener('mouseup', onMouseUp);
+    }, [getSizePercent, onMouseMove, onMouseUp, containerRef]);
+    return { onMouseDown };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@topconsultnpm/sdkui-react-beta",
-    "version": "6.13.42",
+    "version": "6.13.44",
     "description": "",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
@@ -42,7 +42,7 @@
         "lib"
     ],
     "dependencies": {
-        "@topconsultnpm/sdk-ts-beta": "6.13.7",
+        "@topconsultnpm/sdk-ts-beta": "6.13.8",
         "buffer": "^6.0.3",
         "devextreme": "24.2.6",
         "devextreme-react": "24.2.6",