@topconsultnpm/sdkui-react 6.22.0-dev2.2 → 6.22.0-dev2.21

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/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/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/helper/SDKUI_Globals.d.ts

@@ -67,6 +67,18 @@ export declare class ThemeSettings {
 export declare const DEFAULT_PREVIEW_THRESHOLD = 500;
 export declare const DEFAULT_PAGE_SIZE = 100;
 export declare const DEFAULT_MAX_DCMTS_TO_BE_RETURNED = 200;
+export declare const DEFAULT_QUICK_SEARCH_MAX_DCMTS = 1000;
+/** Ricerca rapida configurata come sorgente alternativa dei valori distinti di un campo */
+export declare class DistinctValuesQuickSearchSettings {
+    /** Tipo documento su cui viene eseguita la ricerca rapida */
+    tid: number | undefined;
+    /** ID della ricerca salvata (SavedQueryDescriptor) da eseguire; SYS_ALL_DCMTS_SQD_ID per la ricerca di sistema con tutti i documenti del tipo documento */
+    sqdId: number | undefined;
+    /** Metadato del risultato da cui viene prelevato il valore */
+    mid: number | undefined;
+    /** Numero massimo di documenti restituiti dalla ricerca rapida */
+    maxDcmtsToBeReturned: number;
+}
 export declare class SearchSettings {
     autoFindReferences: ObjectClasses[];
     invoiceRetrieveFormat: InvoiceRetrieveFormats;
@@ -85,7 +97,16 @@ export declare class SearchSettings {
         };
     };
     relationExpandLevel: number;
+    relationShowZeroDcmts: boolean;
+    /** Ricerche rapide configurate per i valori distinti: una per ogni campo, con chiave "tid_mid" */
+    distinctValuesQuickSearches: {
+        [fieldKey: string]: DistinctValuesQuickSearchSettings;
+    };
 }
+/** Ricerca rapida configurata per il campo, se presente */
+export declare const getDistinctValuesQuickSearch: (tid: number | undefined, mid: number | undefined) => DistinctValuesQuickSearchSettings | undefined;
+export declare const saveDistinctValuesQuickSearch: (tid: number | undefined, mid: number | undefined, settings: DistinctValuesQuickSearchSettings) => void;
+export declare const removeDistinctValuesQuickSearch: (tid: number | undefined, mid: number | undefined) => void;
 export declare class FloatingMenuBarSettings {
     orientation?: 'horizontal' | 'vertical';
     itemIds?: string[];
@@ -95,10 +116,44 @@ export declare class FloatingMenuBarSettings {
     };
     positionFormat?: 'pixels' | 'percentage';
 }
+/** Sezioni del riepilogo dell'archiviazione multipla dei dettagli, aperte o collassate */
+export type MultiDetailSectionsOpen = {
+    masterInfo: boolean;
+    archivedDetails: boolean;
+    archiveList: boolean;
+};
+/** Stato persistito di un pannello del riepilogo: visibilità e dimensioni, nel formato del panel manager */
+export type MultiDetailPanelState = {
+    visible: boolean;
+    width: string;
+    height: string;
+};
+/** Stato dei pannelli del riepilogo, indicizzato per id pannello */
+export type MultiDetailPanelStates = Record<string, MultiDetailPanelState>;
 export declare class ArchivingSettings {
     mruTIDs: number[];
     defaultTree: number;
+    /** Sezioni collassate dall'utente nel riepilogo, ripristinate alla riapertura */
+    multiDetailSectionsOpen: MultiDetailSectionsOpen;
+    /**
+     * Altezze dei pannelli del riepilogo, gestite dal panel manager. Non comprende il collasso delle
+     * sezioni, che è in multiDetailSectionsOpen: resta vuoto finché l'utente non sposta un separatore.
+     */
+    multiDetailPanelStates: MultiDetailPanelStates;
 }
+/** Stato di apertura salvato delle sezioni: i default coprono le impostazioni scritte prima di questo campo */
+export declare const getMultiDetailSectionsOpen: () => MultiDetailSectionsOpen;
+export declare const saveMultiDetailSectionsOpen: (sectionsOpen: MultiDetailSectionsOpen) => void;
+/** Stato salvato dei pannelli: vuoto finché l'utente non ne ha ridimensionato nessuno */
+export declare const getMultiDetailPanelStates: () => MultiDetailPanelStates;
+/** Il panel manager applica lo stato salvato solo se esiste: altrimenti riparte dalle quote di default */
+export declare const hasMultiDetailPanelStates: () => boolean;
+export declare const saveMultiDetailPanelStates: (panelStates: MultiDetailPanelStates) => void;
+/**
+ * Elimina dal local storage il layout configurato dall'utente per il riepilogo: altezze dei pannelli
+ * e sezioni collassate. Alla riapertura le sezioni sono tutte espanse con le quote di default.
+ */
+export declare const clearMultiDetailLayout: () => void;
 export declare class FullTextSettings {
     mruTerms: string[];
 }

package/lib/helper/SDKUI_Globals.js

@@ -130,6 +130,20 @@ export class ThemeSettings {
 export const DEFAULT_PREVIEW_THRESHOLD = 500; // KB
 export const DEFAULT_PAGE_SIZE = 100;
 export const DEFAULT_MAX_DCMTS_TO_BE_RETURNED = 200;
+export const DEFAULT_QUICK_SEARCH_MAX_DCMTS = 1000;
+/** Ricerca rapida configurata come sorgente alternativa dei valori distinti di un campo */
+export class DistinctValuesQuickSearchSettings {
+    constructor() {
+        /** Tipo documento su cui viene eseguita la ricerca rapida */
+        this.tid = undefined;
+        /** ID della ricerca salvata (SavedQueryDescriptor) da eseguire; SYS_ALL_DCMTS_SQD_ID per la ricerca di sistema con tutti i documenti del tipo documento */
+        this.sqdId = undefined;
+        /** Metadato del risultato da cui viene prelevato il valore */
+        this.mid = undefined;
+        /** Numero massimo di documenti restituiti dalla ricerca rapida */
+        this.maxDcmtsToBeReturned = DEFAULT_QUICK_SEARCH_MAX_DCMTS;
+    }
+}
 export class SearchSettings {
     constructor() {
         this.autoFindReferences = [];
@@ -143,16 +157,84 @@ export class SearchSettings {
         this.floatingMenuBar = new FloatingMenuBarSettings();
         this.panelLayout = {};
         this.relationExpandLevel = 4; // Livello di espansione predefinito per le correlazioni
+        this.relationShowZeroDcmts = false;
+        /** Ricerche rapide configurate per i valori distinti: una per ogni campo, con chiave "tid_mid" */
+        this.distinctValuesQuickSearches = {};
     }
 }
+/** Il campo da cui viene aperto il pannello dei valori distinti è identificato dalla coppia (tid, mid) */
+const distinctValuesFieldKey = (tid, mid) => `${tid}_${mid}`;
+/** Ricerca rapida configurata per il campo, se presente */
+export const getDistinctValuesQuickSearch = (tid, mid) => {
+    if (!tid || !mid)
+        return undefined;
+    // Le impostazioni salvate da versioni precedenti non hanno la mappa: va gestita l'assenza
+    return SDKUI_Globals.userSettings.searchSettings.distinctValuesQuickSearches?.[distinctValuesFieldKey(tid, mid)];
+};
+export const saveDistinctValuesQuickSearch = (tid, mid, settings) => {
+    if (!tid || !mid)
+        return;
+    // Il proxy delle impostazioni persiste solo intercettando l'assegnazione di una proprietà: la mappa va riassegnata per intero
+    SDKUI_Globals.userSettings.searchSettings.distinctValuesQuickSearches = {
+        ...SDKUI_Globals.userSettings.searchSettings.distinctValuesQuickSearches,
+        [distinctValuesFieldKey(tid, mid)]: settings,
+    };
+};
+export const removeDistinctValuesQuickSearch = (tid, mid) => {
+    if (!tid || !mid)
+        return;
+    const fieldKey = distinctValuesFieldKey(tid, mid);
+    const quickSearches = SDKUI_Globals.userSettings.searchSettings.distinctValuesQuickSearches;
+    if (!quickSearches?.[fieldKey])
+        return;
+    const { [fieldKey]: removedSettings, ...remainingQuickSearches } = quickSearches;
+    SDKUI_Globals.userSettings.searchSettings.distinctValuesQuickSearches = remainingQuickSearches;
+};
 export class FloatingMenuBarSettings {
 }
+/** Alla prima apertura le sezioni sono tutte espanse */
+const DEFAULT_MULTI_DETAIL_SECTIONS_OPEN = { masterInfo: true, archivedDetails: true, archiveList: true };
 export class ArchivingSettings {
     constructor() {
         this.mruTIDs = [];
         this.defaultTree = -1;
+        /** Sezioni collassate dall'utente nel riepilogo, ripristinate alla riapertura */
+        this.multiDetailSectionsOpen = { ...DEFAULT_MULTI_DETAIL_SECTIONS_OPEN };
+        /**
+         * Altezze dei pannelli del riepilogo, gestite dal panel manager. Non comprende il collasso delle
+         * sezioni, che è in multiDetailSectionsOpen: resta vuoto finché l'utente non sposta un separatore.
+         */
+        this.multiDetailPanelStates = {};
     }
 }
+/** Stato di apertura salvato delle sezioni: i default coprono le impostazioni scritte prima di questo campo */
+export const getMultiDetailSectionsOpen = () => ({
+    ...DEFAULT_MULTI_DETAIL_SECTIONS_OPEN,
+    ...SDKUI_Globals.userSettings.archivingSettings?.multiDetailSectionsOpen,
+});
+export const saveMultiDetailSectionsOpen = (sectionsOpen) => {
+    // Il proxy persiste solo intercettando l'assegnazione di una proprietà: la mappa va riassegnata per intero
+    SDKUI_Globals.userSettings.archivingSettings.multiDetailSectionsOpen = { ...sectionsOpen };
+};
+/** Stato salvato dei pannelli: vuoto finché l'utente non ne ha ridimensionato nessuno */
+export const getMultiDetailPanelStates = () => SDKUI_Globals.userSettings.archivingSettings?.multiDetailPanelStates ?? {};
+/** Il panel manager applica lo stato salvato solo se esiste: altrimenti riparte dalle quote di default */
+export const hasMultiDetailPanelStates = () => Object.keys(getMultiDetailPanelStates()).length > 0;
+export const saveMultiDetailPanelStates = (panelStates) => {
+    if (!panelStates || Object.keys(panelStates).length === 0)
+        return;
+    // Il proxy persiste solo intercettando l'assegnazione di una proprietà: la mappa va riassegnata per intero
+    SDKUI_Globals.userSettings.archivingSettings.multiDetailPanelStates = { ...panelStates };
+};
+/**
+ * Elimina dal local storage il layout configurato dall'utente per il riepilogo: altezze dei pannelli
+ * e sezioni collassate. Alla riapertura le sezioni sono tutte espanse con le quote di default.
+ */
+export const clearMultiDetailLayout = () => {
+    // Il proxy persiste solo intercettando l'assegnazione di una proprietà: entrambe le mappe vanno riassegnate
+    SDKUI_Globals.userSettings.archivingSettings.multiDetailPanelStates = {};
+    SDKUI_Globals.userSettings.archivingSettings.multiDetailSectionsOpen = { ...DEFAULT_MULTI_DETAIL_SECTIONS_OPEN };
+};
 export class FullTextSettings {
     constructor() {
         this.mruTerms = [];