@topconsultnpm/sdkui-react 6.22.0-dev2.4 → 6.22.0-dev2.41

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

@@ -126,6 +126,16 @@ const TMTreeSelector = ({ layoutMode = LayoutModes.Update, isVisible, onSelected
         setSelectedRowKeys(selectedKeys);
         setIsGridBoxOpened(false);
     }, []);
+    // Handles click on a tree row in the trees data grid: clicking the already selected tree
+    // does not raise onSelectionChanged, so the drop down must be closed here as well
+    const onRowClickTrees = useCallback((e) => {
+        const tree = e.data;
+        if (tree?.id === undefined)
+            return;
+        setSelectedTreeId(tree.id);
+        setSelectedRowKeys([tree.id]);
+        setIsGridBoxOpened(false);
+    }, []);
     // Handles focus change in the data grid
     const onFocusedRowChanged = useCallback((e) => {
         setFocusedRowKey(e.row?.key);
@@ -161,6 +171,13 @@ const TMTreeSelector = ({ layoutMode = LayoutModes.Update, isVisible, onSelected
             }
         }
     }, []);
+    // Callback function to handle click events on a tree view row.
+    const onRowClickTreeView = useCallback((e) => {
+        const treeItem = e.data;
+        if (treeItem?.type === TreeItemTypes.DcmtType) {
+            onSelectedTIDChanged?.(treeItem.tid, selectedTreeId);
+        }
+    }, [onSelectedTIDChanged, selectedTreeId]);
     return (_jsx(TMPanel, { title: SDK_Localizator.Trees, isVisible: isVisible, totalItems: trees.length, onClose: onClosePanel, allowMaximize: allowMaximize, onMaximize: onMaximizePanel, onHeaderDoubleClick: onMaximizePanel, toolbar: _jsx(TMButton, { btnStyle: 'icon', caption: defaultTreeId == selectedTreeId ? SDKUI_Localizator.TreeRemoveDefault : SDKUI_Localizator.SetAsDefault, icon: defaultTreeId == selectedTreeId ? _jsx(IconStarRemove, { color: 'rgb(243, 114, 92)' }) : _jsx(IconStar, { color: 'rgb(248, 215, 117)' }), onClick: () => {
                 if (defaultTreeId == selectedTreeId) {
                     if (layoutMode == LayoutModes.Update)
@@ -193,11 +210,7 @@ const TMTreeSelector = ({ layoutMode = LayoutModes.Update, isVisible, onSelected
                                 }, value: selectedTreeId, opened: isGridBoxOpened, valueExpr: "id", displayExpr: "nameLoc", deferRendering: false, dataSource: trees, onValueChanged: syncDataGridSelection, onOptionChanged: onGridBoxOpened, style: { height: 30, padding: '5px' }, children: _jsx(TMDataGrid, { height: "100%", width: "100%", dataSource: trees, dataColumns: [
                                         { dataField: 'nameLoc', caption: SDKUI_Localizator.Name, width: 'auto' },
                                         { dataField: 'description', caption: SDKUI_Localizator.Description, width: 'auto' },
-                                    ], selection: { mode: 'single', showCheckBoxesMode: "none" }, showHeaderFilter: false, selectedRowKeys: selectedRowKeys, onSelectionChanged: onSelectionChanged, focusedRowKey: focusedRowKey, onFocusedRowChanged: onFocusedRowChanged }) }) }), _jsxs(StyledTreeListWrapper, { children: [_jsxs(TreeList, { height: "100%", dataSource: treeItems, showRowLines: false, showColumnLines: false, showBorders: false, columnAutoWidth: false, keyExpr: "id", parentIdExpr: "parentID", dataStructure: "plain", showColumnHeaders: false, onContentReady: (e) => e.component.clearSelection(), onCellDblClick: onCellDblClickTreeView, onSelectionChanged: (e) => {
-                                        if (e.selectedRowsData[0] && e.selectedRowsData[0].type == TreeItemTypes.DcmtType) {
-                                            onSelectedTIDChanged?.(e.selectedRowsData[0].tid, selectedTreeId);
-                                        }
-                                    }, children: [_jsx(Column, { dataField: "nameLoc", caption: SDKUI_Localizator.Name, cellRender: renderCell, width: "100%" }), _jsx(Scrolling, { mode: "virtual", useNative: Number(SDKUI_Globals.userSettings?.themeSettings.gridSettings.useNativeScrollbar) === 1 }), _jsx(Selection, { mode: "single" })] }), _jsxs(StyledOffCanvasPanel, { ref: panelRef, "$isOpen": isMobile && infoDTD !== undefined, children: [_jsxs(StyledDivHorizontal, { style: { gap: 10, padding: '10px 8px', width: '100%', alignItems: 'center' }, children: [_jsx("p", { style: { fontSize: '1.1rem', fontWeight: 'bold' }, children: `${SDKUI_Localizator.DcmtType} - ${SDKUI_Localizator.About}` }), _jsx(IconCloseOutline, { style: { marginLeft: 'auto', cursor: 'pointer' }, onClick: () => setInfoDTD(undefined) })] }), renderDTDTooltipContent(infoDTD)] })] })] })
+                                    ], selection: { mode: 'single', showCheckBoxesMode: "none" }, showHeaderFilter: false, selectedRowKeys: selectedRowKeys, onSelectionChanged: onSelectionChanged, onRowClick: onRowClickTrees, focusedRowKey: focusedRowKey, onFocusedRowChanged: onFocusedRowChanged }) }) }), _jsxs(StyledTreeListWrapper, { children: [_jsxs(TreeList, { height: "100%", dataSource: treeItems, showRowLines: false, showColumnLines: false, showBorders: false, columnAutoWidth: false, keyExpr: "id", parentIdExpr: "parentID", dataStructure: "plain", showColumnHeaders: false, onContentReady: (e) => e.component.clearSelection(), onCellDblClick: onCellDblClickTreeView, onRowClick: onRowClickTreeView, children: [_jsx(Column, { dataField: "nameLoc", caption: SDKUI_Localizator.Name, cellRender: renderCell, width: "100%" }), _jsx(Scrolling, { mode: "virtual", useNative: Number(SDKUI_Globals.userSettings?.themeSettings.gridSettings.useNativeScrollbar) === 1 }), _jsx(Selection, { mode: "single" })] }), _jsxs(StyledOffCanvasPanel, { ref: panelRef, "$isOpen": isMobile && infoDTD !== undefined, children: [_jsxs(StyledDivHorizontal, { style: { gap: 10, padding: '10px 8px', width: '100%', alignItems: 'center' }, children: [_jsx("p", { style: { fontSize: '1.1rem', fontWeight: 'bold' }, children: `${SDKUI_Localizator.DcmtType} - ${SDKUI_Localizator.About}` }), _jsx(IconCloseOutline, { style: { marginLeft: 'auto', cursor: 'pointer' }, onClick: () => setInfoDTD(undefined) })] }), renderDTDTooltipContent(infoDTD)] })] })] })
             : _jsx("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', width: '100%', fontSize: '1.5rem' }, children: SDKUI_Localizator.TreesNoAvailable }) }));
 };
 export default TMTreeSelector;

package/lib/components/features/workflow/TMWorkflowPopup.d.ts

@@ -3,6 +3,16 @@ import { DeviceType } from "../../base/TMDeviceProvider";
 import { WorkItemDetail } from "../../../ts";
 interface IWorkflowOperationButtonsProps {
     dtd: DcmtTypeDescriptor | undefined;
+    /**
+     * Forza la forma dei pulsanti: `true` = flusso di FIRMA (Firma e approva),
+     * `false` = flusso di APPROVAZIONE. Se omesso si deduce dal tipo documento
+     * (widget Sign4Top), che è il comportamento del workflow.
+     *
+     * Serve a chi conosce la natura dell'attività meglio del tipo documento: un
+     * work item di sola approvazione su un tipo ABILITATO alla firma non deve
+     * mostrare "Firma e approva".
+     */
+    signFlow?: boolean;
     approveDisable?: boolean;
     signApproveDisable?: boolean;
     rejectDisable?: boolean;

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

@@ -53,16 +53,20 @@ const StyledHorizontalContainer = styled.div `
     /* align-items: flex-end; */
 `;
 export const WorkFlowOperationButtons = (props) => {
-    const { dtd = undefined, deviceType = DeviceType.DESKTOP, approveDisable = false, signApproveDisable = false, rejectDisable = false, reassignDisable = false, infoDisable = false, onApprove, onSignApprove, onReject, onReAssign, onMoreInfo, } = props;
+    const { dtd = undefined, signFlow = undefined, deviceType = DeviceType.DESKTOP, approveDisable = false, signApproveDisable = false, rejectDisable = false, reassignDisable = false, infoDisable = false, onApprove, onSignApprove, onReject, onReAssign, onMoreInfo, } = props;
     const isMobile = deviceType === DeviceType.MOBILE;
-    // Calcola direttamente se è un workflow di firma per evitare flickering durante il render
+    // Calcola direttamente se è un workflow di firma per evitare flickering durante il render.
+    // `signFlow`, se fornito, ha la precedenza: chi lo passa conosce la natura
+    // dell'attività (es. categoria del work item) meglio del tipo documento.
     const isSignWorkflow = useMemo(() => {
+        if (signFlow !== undefined)
+            return signFlow;
         if (dtd && dtd.widgets && dtd.widgets.length > 0) {
             return isSign4TopEnabled(dtd.widgets);
         }
         return false;
-    }, [dtd]);
-    return (_jsx(StyledWorkFlowOperationButtonsContainer, { "$isMobile": isMobile, children: isSignWorkflow ? (_jsxs(_Fragment, { children: [_jsx(TMButton, { btnStyle: isMobile ? 'toolbar' : 'advanced', showTooltip: isMobile, icon: _jsx(IconSignaturePencil, {}), caption: SDKUI_Localizator.SignatureAndApprove, width: "160px", disabled: signApproveDisable, onClick: () => !signApproveDisable && onSignApprove?.(), onMouseDown: e => e.stopPropagation(), advancedColor: "#1a9a49", color: "success" }), _jsx(TMButton, { btnStyle: isMobile ? 'toolbar' : 'advanced', showTooltip: isMobile, icon: _jsx(IconCloseOutline, {}), caption: SDKUI_Localizator.Reject, disabled: rejectDisable, onClick: () => !rejectDisable && onReject?.(), onMouseDown: e => e.stopPropagation(), advancedColor: TMColors.error, color: "error" }), _jsx(TMButton, { btnStyle: isMobile ? 'toolbar' : 'advanced', showTooltip: isMobile, icon: _jsx(IconInfo, { fontSize: 16 }), caption: SDKUI_Localizator.MoreInformation, width: "180px", disabled: infoDisable, onClick: () => !infoDisable && onMoreInfo?.(), onMouseDown: e => e.stopPropagation(), advancedColor: TMColors.info, color: "info" })] })) : (_jsxs(_Fragment, { children: [_jsx(TMButton, { btnStyle: isMobile ? 'toolbar' : 'advanced', showTooltip: isMobile, icon: _jsx(IconApply, {}), caption: SDKUI_Localizator.Approve, disabled: approveDisable, onClick: () => !approveDisable && onApprove?.(), advancedColor: "#1a9a49", color: "success" }), _jsx(TMButton, { btnStyle: isMobile ? 'toolbar' : 'advanced', showTooltip: isMobile, icon: _jsx(IconCloseOutline, {}), caption: SDKUI_Localizator.Reject, disabled: rejectDisable, onClick: () => !rejectDisable && onReject?.(), advancedColor: TMColors.error, color: "error" }), _jsx(TMButton, { btnStyle: isMobile ? 'toolbar' : 'advanced', showTooltip: isMobile, icon: _jsx(IconUser, { fontSize: 16 }), caption: SDKUI_Localizator.Reassign, disabled: reassignDisable, onClick: () => !reassignDisable && onReAssign?.(), advancedColor: TMColors.tertiary, color: "tertiary" }), _jsx(TMButton, { btnStyle: isMobile ? 'toolbar' : 'advanced', showTooltip: isMobile, icon: _jsx(IconInfo, { fontSize: 16 }), caption: SDKUI_Localizator.MoreInformation, width: "180px", disabled: infoDisable, onClick: () => !infoDisable && onMoreInfo?.(), advancedColor: TMColors.info, color: "info" })] })) }));
+    }, [dtd, signFlow]);
+    return (_jsx(StyledWorkFlowOperationButtonsContainer, { "$isMobile": isMobile, children: isSignWorkflow ? (_jsxs(_Fragment, { children: [_jsx(TMButton, { btnStyle: isMobile ? 'toolbar' : 'advanced', showTooltip: isMobile, icon: _jsx(IconSignaturePencil, {}), caption: SDKUI_Localizator.SignatureAndApprove, width: "160px", disabled: signApproveDisable, onClick: () => !signApproveDisable && onSignApprove?.(), onMouseDown: e => e.stopPropagation(), advancedColor: "#1a9a49", color: "success" }), _jsx(TMButton, { btnStyle: isMobile ? 'toolbar' : 'advanced', showTooltip: isMobile, icon: _jsx(IconCloseOutline, {}), caption: SDKUI_Localizator.Reject, disabled: rejectDisable, onClick: () => !rejectDisable && onReject?.(), onMouseDown: e => e.stopPropagation(), advancedColor: TMColors.error, color: "error" }), onMoreInfo && (_jsx(TMButton, { btnStyle: isMobile ? 'toolbar' : 'advanced', showTooltip: isMobile, icon: _jsx(IconInfo, { fontSize: 16 }), caption: SDKUI_Localizator.MoreInformation, width: "180px", disabled: infoDisable, onClick: () => !infoDisable && onMoreInfo?.(), onMouseDown: e => e.stopPropagation(), advancedColor: TMColors.info, color: "info" }))] })) : (_jsxs(_Fragment, { children: [_jsx(TMButton, { btnStyle: isMobile ? 'toolbar' : 'advanced', showTooltip: isMobile, icon: _jsx(IconApply, {}), caption: SDKUI_Localizator.Approve, disabled: approveDisable, onClick: () => !approveDisable && onApprove?.(), advancedColor: "#1a9a49", color: "success" }), _jsx(TMButton, { btnStyle: isMobile ? 'toolbar' : 'advanced', showTooltip: isMobile, icon: _jsx(IconCloseOutline, {}), caption: SDKUI_Localizator.Reject, disabled: rejectDisable, onClick: () => !rejectDisable && onReject?.(), advancedColor: TMColors.error, color: "error" }), onReAssign && (_jsx(TMButton, { btnStyle: isMobile ? 'toolbar' : 'advanced', showTooltip: isMobile, icon: _jsx(IconUser, { fontSize: 16 }), caption: SDKUI_Localizator.Reassign, disabled: reassignDisable, onClick: () => !reassignDisable && onReAssign?.(), advancedColor: TMColors.tertiary, color: "tertiary" })), onMoreInfo && (_jsx(TMButton, { btnStyle: isMobile ? 'toolbar' : 'advanced', showTooltip: isMobile, icon: _jsx(IconInfo, { fontSize: 16 }), caption: SDKUI_Localizator.MoreInformation, width: "180px", disabled: infoDisable, onClick: () => !infoDisable && onMoreInfo?.(), advancedColor: TMColors.info, color: "info" }))] })) }));
 };
 export const WorkFlowApproveRejectPopUp = ({ TID = 0, DID = 0, deviceType = DeviceType.DESKTOP, isReject, selectedItems = [], onClose, onCompleted }) => {
     const { refreshWorkflowApprove } = useWorkflowApprove();

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

@@ -5,6 +5,7 @@ interface TMPanelManagerContainerProps {
     direction: TMPanelDirection;
     parentId?: string;
     minPanelSizePx?: number;
+    gutterSizePx?: number;
 }
 declare const TMPanelManagerContainer: (props: TMPanelManagerContainerProps) => import("react/jsx-runtime").JSX.Element | null;
 export default TMPanelManagerContainer;

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

@@ -18,20 +18,20 @@ const StyledPanelContainerWrapper = styled.div `
 `;
 // Styled Component per il gutter (separatore)
 const StyledResizerGutter = styled.div `
-  cursor: ${props => (props.$direction === 'horizontal' ? 'col-resize' : 'row-resize')};
-  ${props => (props.$direction === 'horizontal' ? `width: ${Gutters.getGutters()}px;` : `height: ${Gutters.getGutters()}px;`)}
+  cursor: ${props => (!props.$canResize ? 'default' : props.$direction === 'horizontal' ? 'col-resize' : 'row-resize')};
+  ${props => (props.$direction === 'horizontal' ? `width: ${props.$size}px;` : `height: ${props.$size}px;`)}
   flex-shrink: 0;
   background-color: "transparent";
   z-index: 10;
 `;
 const TMPanelManagerContainer = (props) => {
-    const { panels, showToolbar, direction, parentId, minPanelSizePx = 150 } = props;
+    const { panels, showToolbar, direction, parentId, minPanelSizePx = 150, gutterSizePx } = 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
     let isMobile = useMemo(() => { return deviceType === DeviceType.MOBILE; }, [deviceType]);
-    const gutters = Gutters.getGutters();
+    const gutters = gutterSizePx ?? Gutters.getGutters();
     // References to store information related to resizing
     // startMousePos: stores the mouse position when resizing starts (x or y coordinate)
     const startMousePos = useRef(0);
@@ -47,6 +47,19 @@ const TMPanelManagerContainer = (props) => {
     const containerRef = useRef(null);
     // Count how many child panels are currently visible (based on panelVisibility)
     const currentlyVisibleChildrenCount = panels.filter(panel => panelVisibility[panel.id]).length;
+    /**
+     * Pannello ridimensionabile più prossimo a partire da `from` nella direzione `step`:
+     * i pannelli non visibili e quelli collassati (che vivono del solo ingombro minimo) si saltano,
+     * altrimenti il trascinamento del separatore assegnerebbe spazio a un pannello ridotto
+     */
+    const findResizablePanelId = (from, step) => {
+        for (let i = from; i >= 0 && i < panels.length; i += step) {
+            const candidate = panels[i];
+            if (panelVisibility[candidate.id] && candidate.contentOptions?.isCollapsed !== true)
+                return candidate.id;
+        }
+        return null;
+    };
     // If this component has a parent panel, and the parent panel is visible,
     // but none of the current child panels are visible, return null to avoid rendering empty container
     if (parentId && panelVisibility[parentId] && currentlyVisibleChildrenCount === 0) {
@@ -156,14 +169,6 @@ const TMPanelManagerContainer = (props) => {
                 }, children: _jsxs("div", { style: { width: "100%", height: "100%" }, children: [_jsx(StyledPanelContainerWrapper, { ref: containerRef, "$direction": direction, "$hasVisiblePanels": hasVisiblePanels(), children: panels.map((panel, index) => {
                                 // Check if current panel is visible according to context state
                                 const isVisible = panelVisibility[panel.id];
-                                // Find the closest previous visible panel's ID to place the resizer gutter between
-                                let prevPanelIdForGutter = null;
-                                for (let i = index - 1; i >= 0; i--) {
-                                    if (panelVisibility[panels[i].id]) {
-                                        prevPanelIdForGutter = panels[i].id;
-                                        break;
-                                    }
-                                }
                                 /*
                                   Determine if we should show the gutter (resize handle) before this panel.
                                   The gutter is shown only if:
@@ -171,6 +176,11 @@ const TMPanelManagerContainer = (props) => {
                                     - at least one visible panel was encountered before this one
                                 */
                                 const showGutter = isVisible && hasSeenVisiblePanel && maximizedPanels.length === 0;
+                                // I due pannelli su cui agisce il separatore: i più prossimi fra quelli ridimensionabili.
+                                // Senza una coppia valida (es. tutti i vicini collassati) il separatore resta solo un divisorio
+                                const resizeFromId = showGutter ? findResizablePanelId(index - 1, -1) : null;
+                                const resizeToId = showGutter ? findResizablePanelId(index, 1) : null;
+                                const canResize = resizeFromId !== null && resizeToId !== null && resizeFromId !== resizeToId;
                                 // Update the flag once a visible panel is found, so gutters after it are shown correctly
                                 if (isVisible) {
                                     hasSeenVisiblePanel = true;
@@ -178,7 +188,7 @@ const TMPanelManagerContainer = (props) => {
                                 // If the panel has child panels, render a nested TMPanelManagerContainer or a component
                                 if (panel.children && panel.children.length > 0) {
                                     const jsxComponent = panel.contentOptions?.component;
-                                    return (_jsxs(React.Fragment, { children: [showGutter && (_jsx(StyledResizerGutter, { "$direction": direction, onMouseDown: (e) => startResizing(e, prevPanelIdForGutter, panel.id) })), _jsx(TMPanelWrapper, { panel: panel, children: jsxComponent
+                                    return (_jsxs(React.Fragment, { children: [showGutter && (_jsx(StyledResizerGutter, { "$direction": direction, "$size": gutters, "$canResize": canResize, onMouseDown: canResize ? (e) => startResizing(e, resizeFromId, resizeToId) : undefined })), _jsx(TMPanelWrapper, { panel: panel, children: jsxComponent
                                                     ? React.isValidElement(jsxComponent)
                                                         ? React.cloneElement(jsxComponent, { groupId: panel.id, mainDirection: panel.childrenGroupDirection || direction })
                                                         : jsxComponent
@@ -186,7 +196,7 @@ const TMPanelManagerContainer = (props) => {
                                 }
                                 // If the panel has a component specified, render it with a possible gutter before it
                                 if (panel.contentOptions && panel.contentOptions.component) {
-                                    return (_jsxs(React.Fragment, { children: [showGutter && (_jsx(StyledResizerGutter, { "$direction": direction, onMouseDown: (e) => startResizing(e, prevPanelIdForGutter, panel.id) })), _jsx(TMPanelWrapper, { panel: panel, children: panel.contentOptions.component })] }, panel.id));
+                                    return (_jsxs(React.Fragment, { children: [showGutter && (_jsx(StyledResizerGutter, { "$direction": direction, "$size": gutters, "$canResize": canResize, onMouseDown: canResize ? (e) => startResizing(e, resizeFromId, resizeToId) : undefined })), _jsx(TMPanelWrapper, { panel: panel, children: panel.contentOptions.component })] }, panel.id));
                                 }
                                 // If no children or components, render nothing for this panel
                                 return null;

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

@@ -14,12 +14,14 @@ export const TMPanelManagerProvider = (props) => {
     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
-    const [panelDimensions, setPanelDimensions] = useState(initialDimensions);
+    // State to track the visibility and the dimensions (width and height) of each panel, initialized with props
+    const [panelLayout, setPanelLayout] = useState({ visibility: {}, dimensions: initialDimensions });
+    // Visibility of each panel, keyed by panel ID
+    const panelVisibility = panelLayout.visibility;
+    // Dimensions of each panel, keyed by panel ID
+    const panelDimensions = panelLayout.dimensions;
     // IDs of maximized panels, including their parents if present
     const [maximizedPanels, setMaximizedPanels] = useState([]);
-    // State to track the visibility of each panel, keyed by panel ID
-    const [panelVisibility, setPanelVisibility] = useState({});
     // State to track visibility of toolbar buttons, keyed by panel ID
     const [toolbarButtonsVisibility, setToolbarButtonsVisibility] = useState({});
     // State to track disabled status of toolbar buttons, keyed by panel ID
@@ -31,94 +33,73 @@ export const TMPanelManagerProvider = (props) => {
         setToolbarButtonsVisibility(visibilityMap);
         setToolbarButtonsDisabled(disabledMap);
     }, []);
-    // Callback to update the visibility state of a specific panel and its related hierarchy
-    const adjustPanelVisibilityAndSize = useCallback((id, isVisible, prevVisibility) => {
+    // Callback to update the visibility state of a specific panel and its related hierarchy, redistributing the dimensions accordingly
+    const adjustPanelVisibilityAndSize = useCallback((id, isVisible, prevLayout) => {
         // Clone previous visibility state to work with
-        let updatedVisibility = { ...prevVisibility };
-        if (isMobile) {
-            if (isVisible) {
-                // On mobile, showing one panel hides all others first
-                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]) => { updatedVisibility[pid] = visible; });
-                // Show the target panel
-                updatedVisibility[id] = true;
-                // Redistribute dimensions to account for newly shown panel
-                setPanelDimensions(prev => redistributeDimensionsOnShow(id, prev, defaultPanelDimensionsRef.current, hierarchyMap, updatedVisibility));
-            }
-            else {
-                // Hide the panel
-                updatedVisibility[id] = false;
-                // Recursively hide parents
-                const parentsToHide = hideParentRecursively(id, hierarchyMap, updatedVisibility);
-                parentsToHide.forEach(([pid, visible]) => { updatedVisibility[pid] = visible; });
-                4;
-                // Redistribute dimensions after hiding
-                setPanelDimensions(prev => redistributeDimensionsOnHide(id, prev, hierarchyMap, updatedVisibility));
+        let updatedVisibility = { ...prevLayout.visibility };
+        let updatedDimensions;
+        if (isVisible) {
+            // On mobile, showing one panel hides all others first
+            if (isMobile) {
+                updatedVisibility = Object.keys(prevLayout.visibility).reduce((acc, key) => { acc[key] = false; return acc; }, {});
             }
+            // Recursively determine and show parent panels
+            const parentsToShow = showParentRecursively(id, hierarchyMap);
+            parentsToShow.forEach(([pid, visible]) => { updatedVisibility[pid] = visible; });
+            // Show the target panel
+            updatedVisibility[id] = true;
+            // Redistribute dimensions to account for newly shown panel
+            updatedDimensions = redistributeDimensionsOnShow(id, prevLayout.dimensions, defaultPanelDimensionsRef.current, hierarchyMap, updatedVisibility);
         }
         else {
-            if (isVisible) {
-                // On desktop, show panel and its parents without hiding others
-                const parentsToShow = showParentRecursively(id, hierarchyMap);
-                parentsToShow.forEach(([pid, visible]) => { updatedVisibility[pid] = visible; });
-                // Show the panel
-                updatedVisibility[id] = true;
-                // Adjust panel dimensions accordingly
-                setPanelDimensions(prev => redistributeDimensionsOnShow(id, prev, defaultPanelDimensionsRef.current, hierarchyMap, updatedVisibility));
-            }
-            else {
-                // Hide the panel
-                updatedVisibility[id] = false;
-                // Recursively hide parent panels
-                const parentsToHide = hideParentRecursively(id, hierarchyMap, updatedVisibility);
-                parentsToHide.forEach(([pid, visible]) => { updatedVisibility[pid] = visible; });
-                // Adjust dimensions after hiding
-                setPanelDimensions(prev => redistributeDimensionsOnHide(id, prev, hierarchyMap, updatedVisibility));
-            }
+            // Hide the panel
+            updatedVisibility[id] = false;
+            // Recursively hide parents
+            const parentsToHide = hideParentRecursively(id, hierarchyMap, updatedVisibility);
+            parentsToHide.forEach(([pid, visible]) => { updatedVisibility[pid] = visible; });
+            // Redistribute dimensions after hiding
+            updatedDimensions = redistributeDimensionsOnHide(id, prevLayout.dimensions, hierarchyMap, updatedVisibility);
         }
-        return updatedVisibility;
+        return { visibility: updatedVisibility, dimensions: updatedDimensions };
     }, [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(() => {
         if (isPersistenceEnabled) {
             // If persistence is enabled, visibility and dimensions are already synced from persisted state, so just set them directly
-            setPanelVisibility(initialVisibility);
-            setPanelDimensions(initialDimensions);
+            setPanelLayout({ visibility: initialVisibility, dimensions: 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);
+            setPanelLayout(prev => {
+                let updated = { visibility: { ...initialVisibility }, dimensions: prev.dimensions };
+                Object.entries(initialVisibility).forEach(([id, isVisible]) => {
+                    updated = adjustPanelVisibilityAndSize(id, isVisible, updated);
+                });
+                return 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 adjustPanelVisibilityAndSize(initialMobilePanelId, true, prev);
-            });
+            setPanelLayout(prev => adjustPanelVisibilityAndSize(initialMobilePanelId, true, prev));
         }
         else {
             if (isPersistenceEnabled) {
                 // If persistence is enabled, visibility and dimensions are already synced from persisted state, so just set them directly
-                setPanelVisibility(initialVisibility);
+                setPanelLayout(prev => ({ ...prev, visibility: initialVisibility }));
             }
             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);
+                setPanelLayout(prev => {
+                    let updated = { visibility: { ...initialVisibility }, dimensions: prev.dimensions };
+                    Object.entries(initialVisibility).forEach(([id, isVisible]) => {
+                        updated = adjustPanelVisibilityAndSize(id, isVisible, updated);
+                    });
+                    return updated;
                 });
-                // Update panel visibility state with recalculated values
-                setPanelVisibility(updated);
             }
         }
     }, [isMobile]);
@@ -131,9 +112,9 @@ export const TMPanelManagerProvider = (props) => {
         // Update state to track which panels are maximized
         setMaximizedPanels(toMaximize);
         // Update panel dimensions accordingly
-        setPanelDimensions(prev => {
+        setPanelLayout(prev => {
             const newDimensions = {};
-            Object.keys(prev).forEach(pid => {
+            Object.keys(prev.dimensions).forEach(pid => {
                 if (toMaximize.includes(pid)) {
                     // For maximized panels (target + parents), set width and height to 100%
                     newDimensions[pid] = { width: '100%', height: '100%' };
@@ -143,31 +124,31 @@ export const TMPanelManagerProvider = (props) => {
                     newDimensions[pid] = { width: '0%', height: '0%' };
                 }
             });
-            return newDimensions;
+            return { ...prev, dimensions: newDimensions };
         });
     }, [hierarchyMap]);
     // Restore all panels to their original dimensions
     const resetMaximization = useCallback(() => {
         // Clear the list of maximized panels to exit maximize mode
         setMaximizedPanels([]);
-        // Clone the current visibility state of panels
-        let updatedVisibility = { ...panelVisibility };
         // Start with the initial panel dimensions as the base for restoration
-        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, defaultPanelDimensionsRef.current, hierarchyMap, updatedVisibility);
-            }
-            else {
-                // If the panel is hidden, adjust dimensions to hide it
-                acc = redistributeDimensionsOnHide(id, acc, hierarchyMap, updatedVisibility);
-            }
-            return acc;
-        }, defaultPanelDimensionsRef.current);
-        // Apply the recalculated dimensions to the panel state
-        setPanelDimensions(nextDimensions);
-    }, [panelVisibility, hierarchyMap]);
+        setPanelLayout(prev => {
+            const updatedVisibility = prev.visibility;
+            const 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, defaultPanelDimensionsRef.current, hierarchyMap, updatedVisibility);
+                }
+                else {
+                    // If the panel is hidden, adjust dimensions to hide it
+                    acc = redistributeDimensionsOnHide(id, acc, hierarchyMap, updatedVisibility);
+                }
+                return acc;
+            }, defaultPanelDimensionsRef.current);
+            // Apply the recalculated dimensions to the panel state
+            return { ...prev, dimensions: nextDimensions };
+        });
+    }, [hierarchyMap]);
     // Toggle the maximized state of a panel by its ID
     const toggleMaximize = useCallback((id) => {
         if (maximizedPanels.includes(id)) {
@@ -186,17 +167,11 @@ export const TMPanelManagerProvider = (props) => {
             // If it is maximized, first reset all maximized panels to their original state
             resetMaximization();
             // Then update the visibility of the panel, toggling its current state
-            setPanelVisibility(prev => {
-                const isCurrentlyVisible = prev[id];
-                return adjustPanelVisibilityAndSize(id, !isCurrentlyVisible, prev);
-            });
+            setPanelLayout(prev => adjustPanelVisibilityAndSize(id, !prev.visibility[id], prev));
         }
         else {
             // If the panel is not maximized, simply toggle its visibility
-            setPanelVisibility(prev => {
-                const isCurrentlyVisible = prev[id];
-                return adjustPanelVisibilityAndSize(id, !isCurrentlyVisible, prev);
-            });
+            setPanelLayout(prev => adjustPanelVisibilityAndSize(id, !prev.visibility[id], prev));
         }
     }, [maximizedPanels, resetMaximization, adjustPanelVisibilityAndSize]);
     // Sets the visibility of a panel by its ID to a specific value (true = show, false = hide)
@@ -206,14 +181,14 @@ export const TMPanelManagerProvider = (props) => {
             resetMaximization();
         }
         // Then update the visibility state of the panel to the given value
-        setPanelVisibility(prev => adjustPanelVisibilityAndSize(id, isVisible, prev));
+        setPanelLayout(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
         defaultPanelDimensionsRef.current = { ...defaultPanelDimensionsRef.current, [id]: { width, height } };
         // Update the panel dimensions state
-        setPanelDimensions(prev => ({ ...prev, [id]: { width, height } }));
+        setPanelLayout(prev => ({ ...prev, dimensions: { ...prev.dimensions, [id]: { width, height } } }));
     }, []);
     // Checks if there is at least one panel currently visible
     const hasVisiblePanels = useCallback(() => {

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

@@ -34,8 +34,8 @@ const TMPanelWrapper = (props) => {
         // Applica 'flex' o 'none' solo se è già stato reso visibile almeno una volta
         display: isCurrentlyVisible ? 'flex' : 'none',
         flexDirection: 'column',
-        minWidth: '50px',
-        minHeight: '50px',
+        minWidth: panel.contentOptions?.minWidth ?? '50px',
+        minHeight: panel.contentOptions?.minHeight ?? '50px',
         width: width,
         height: height,
         pointerEvents: 'auto',

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

@@ -12,6 +12,9 @@ export interface TMPanelDefinition {
         isClosable?: boolean;
         isMaximizable?: boolean;
         panelContainer?: ITMPanelProps;
+        minWidth?: string;
+        minHeight?: string;
+        isCollapsed?: boolean;
     };
     toolbarOptions?: {
         icon: string | JSX.Element;

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

@@ -97,18 +97,20 @@ export const redistributeDimensionsOnHide = (hiddenPanelId, currentDimensions, h
     const hiddenWidthNum = parseFloat(hiddenDims.width);
     const hiddenHeightNum = parseFloat(hiddenDims.height);
     const visibleSiblings = siblings.filter(siblingId => panelVisibility[siblingId]);
-    const widthIncrement = hiddenWidthNum / visibleSiblings.length;
-    const heightIncrement = hiddenHeightNum / visibleSiblings.length;
     let newDimensions = { ...currentDimensions };
-    visibleSiblings.forEach(siblingId => {
-        const siblingDims = newDimensions[siblingId] || { width: '0%', height: '0%' };
-        const siblingWidthNum = parseFloat(siblingDims.width) || 0;
-        const siblingHeightNum = parseFloat(siblingDims.height) || 0;
-        const newWidthNum = Math.min(siblingWidthNum + widthIncrement, 100);
-        const newHeightNum = Math.min(siblingHeightNum + heightIncrement, 100);
-        newDimensions[siblingId] = { width: `${newWidthNum}%`, height: `${newHeightNum}%` };
-    });
-    newDimensions[hiddenPanelId] = { width: '0%', height: '0%' };
+    if (visibleSiblings.length > 0) {
+        const widthIncrement = hiddenWidthNum / visibleSiblings.length;
+        const heightIncrement = hiddenHeightNum / visibleSiblings.length;
+        visibleSiblings.forEach(siblingId => {
+            const siblingDims = newDimensions[siblingId] || { width: '0%', height: '0%' };
+            const siblingWidthNum = parseFloat(siblingDims.width) || 0;
+            const siblingHeightNum = parseFloat(siblingDims.height) || 0;
+            const newWidthNum = Math.min(siblingWidthNum + widthIncrement, 100);
+            const newHeightNum = Math.min(siblingHeightNum + heightIncrement, 100);
+            newDimensions[siblingId] = { width: `${newWidthNum}%`, height: `${newHeightNum}%` };
+        });
+        newDimensions[hiddenPanelId] = { width: '0%', height: '0%' };
+    }
     // Ora controllo se il parent non ha più figli visibili e chiamo ricorsivamente
     if (parentId) {
         const parentInfo = hierarchyMap.get(parentId);

package/lib/components/viewers/TMMidViewer.js

@@ -92,8 +92,11 @@ export const TMMetadataIcon = ({ tid, md, color, layoutMode = LayoutModes.Update
                 break;
         }
     }
+    // color='inherit' serve solo all'icona (eredita il colore dell'editor): il tooltip è renderizzato in overlay,
+    // dove 'inherit' non risolverebbe al colore dell'editor, quindi lì manteniamo la palette normale
+    let tooltipColor = color === 'inherit' ? undefined : color;
     return (_jsx(_Fragment, { children: icon
-            ? _jsx(TMMetadataTooltip, { tid: tid, md: md, layoutMode: layoutMode, color: color, children: icon })
+            ? _jsx(TMMetadataTooltip, { tid: tid, md: md, layoutMode: layoutMode, color: tooltipColor, children: icon })
             : null }));
 };
 export const TMMetadataTooltip = ({ tid, md, color, children, layoutMode = LayoutModes.Update }) => {

package/lib/components/viewers/TMTidViewer.js

@@ -259,7 +259,7 @@ export const TMDcmtTypeIcon = ({ dtd }) => {
     return (_jsx(TMDcmtTypeTooltip, { dtd: dtd, children: icon }));
 };
 export const TMDcmtTypeTooltip = ({ dtd, children }) => {
-    return (_jsx("div", { style: { pointerEvents: 'all' }, children: _jsx(TMTooltip, { content: renderDTDTooltipContent(dtd), children: children }) }));
+    return (_jsx("div", { style: { pointerEvents: 'all' }, children: _jsx(TMTooltip, { allowContentInteraction: true, content: renderDTDTooltipContent(dtd), children: children }) }));
 };
 const TMTidViewer = ({ tmSession, tid, did, showIcon = false, color, showId = false, noneSelectionText = `<${SDKUI_Localizator.NoneSelection}>` }) => {
     const [dtd, setDtd] = useState();
@@ -297,29 +297,43 @@ const TMTidViewer = ({ tmSession, tid, did, showIcon = false, color, showId = fa
             textOverflow: 'ellipsis'
         }, children: [showIcon && dtd && _jsx(TMDcmtTypeIcon, { dtd: dtd }), _jsx("p", { title: displayName(), style: {
                     textAlign: 'left',
+                    margin: 0,
                     marginLeft: showIcon ? '5px' : '',
-                    color: color ?? (dtd?.isView ? 'red' : TMColors.primary),
+                    color: dtd?.isView ? 'red' : (color ?? TMColors.primary),
                     whiteSpace: 'nowrap',
                     overflow: 'hidden',
                     textOverflow: 'ellipsis',
                     // paddingRight: '10px'
-                }, children: displayName() }), showId && _jsx("p", { style: { padding: '0px 3px' }, children: `(TID: ${tid})` })] }));
+                }, children: displayName() }), showId && _jsx("p", { style: { padding: '0px 3px', margin: 0 }, children: `(TID: ${tid})` })] }));
 };
 export default TMTidViewer;
 export const cellRenderTID = (data, noneSelectionText) => {
     return (_jsx(TMTidViewer, { tid: data.value, noneSelectionText: noneSelectionText }));
 };
-/** Componente per mostrare il metodo di visualizzazione del nome documento (carica i metadati dalla cache se necessario) */
+/** Metodi di visualizzazione già richiesti, per non ricaricare i metadati ad ogni riapertura del tooltip */
+const displayNameMethodCache = new Map();
 const TMDisplayNameMethodItem = ({ dtd }) => {
-    const [displayNameMethod, setDisplayNameMethod] = useState('...');
-    useEffect(() => {
-        const fetchDisplayNameMethod = async () => {
+    const [displayNameMethod, setDisplayNameMethod] = useState(() => dtd.id ? displayNameMethodCache.get(dtd.id) : undefined);
+    const [isLoading, setIsLoading] = useState(false);
+    const onShowClick = async (e) => {
+        /* Un click qualsiasi chiude il tooltip: senza questo il risultato non sarebbe mai visibile */
+        e.stopPropagation();
+        if (isLoading || displayNameMethod)
+            return;
+        setIsLoading(true);
+        try {
             const method = await getDTDDisplayNameInfo(dtd);
+            if (dtd.id)
+                displayNameMethodCache.set(dtd.id, method);
             setDisplayNameMethod(method);
-        };
-        fetchDisplayNameMethod();
-    }, [dtd]);
-    return _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.DisplayNameMethod}: ${displayNameMethod}` });
+        }
+        finally {
+            setIsLoading(false);
+        }
+    };
+    return (_jsxs(StyledTooltipItem, { children: [`${SDKUI_Localizator.DisplayNameMethod}: `, displayNameMethod ?? (isLoading
+                ? `${SDKUI_Localizator.Loading} ...`
+                : _jsx("span", { style: { color: TMColors.primary, cursor: 'pointer', textDecoration: 'underline' }, onClick: onShowClick, children: SDKUI_Localizator.Details }))] }));
 };
 export const renderDTDTooltipContent = (dtd) => {
     const mapAccessLevelToLocalizedString = (level) => {

package/lib/devextreme-license.d.ts

@@ -0,0 +1 @@
+export declare const licenseKey = "LCPv1(%@j2<F<eQy:2N+f,7R@!i)BcQ,N374Qe%m;9etySj@gGntp77@@:<VJ77@j!_t<%yd-Siei,7FYV%!G>7a(cj%z3Ltv!ot1SeaicLr[3o,6>H:1(e,jSQt$3bREp%tv%H+4InRJ3J88Gn+aIidEee--SQVb,yVH7QRgSpm:2be9I%,;Z+Qmk%!<9jyG6%!6pLdQ6Lt<!N-Q%iR)6%fBIR+:2<)<!Qr->%X<2p@62%!F2bR62<-$2i-)2i-FI%d@G<-@!jy$2iRQ6b-v!jyvIg!:ajzvaj@Fpg!$2b-FIp9;9K-:>Q4:G_@@9Qdv6<!F6<dFI7yFI7yFI7Ll";

package/lib/devextreme-license.js

@@ -0,0 +1,3 @@
+// Auto-generated by devextreme-license.
+// Do not commit this file to source control.
+export const licenseKey = 'LCPv1(%@j2<F<eQy:2N+f,7R@!i)BcQ,N374Qe%m;9etySj@gGntp77@@:<VJ77@j!_t<%yd-Siei,7FYV%!G>7a(cj%z3Ltv!ot1SeaicLr[3o,6>H:1(e,jSQt$3bREp%tv%H+4InRJ3J88Gn+aIidEee--SQVb,yVH7QRgSpm:2be9I%,;Z+Qmk%!<9jyG6%!6pLdQ6Lt<!N-Q%iR)6%fBIR+:2<)<!Qr->%X<2p@62%!F2bR62<-$2i-)2i-FI%d@G<-@!jy$2iRQ6b-v!jyvIg!:ajzvaj@Fpg!$2b-FIp9;9K-:>Q4:G_@@9Qdv6<!F6<dFI7yFI7yFI7Ll';