@topconsultnpm/sdkui-react 6.20.0-dev2.53 → 6.20.0-dev2.54

package/lib/components/NewComponents/ContextMenu/styles.d.ts

@@ -14,7 +14,9 @@ export declare const MenuItem: import("styled-components/dist/types").IStyledCom
     $beginGroup?: boolean;
 }>> & string;
 export declare const MenuItemContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const IconWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const IconWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    ref?: ((instance: HTMLSpanElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLSpanElement> | null | undefined;
+}>, never>, never>> & string;
 export declare const MenuItemName: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
 export declare const RightIconButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement> | null | undefined;

package/lib/components/NewComponents/ContextMenu/styles.js

@@ -69,7 +69,7 @@ export const MenuContainer = styled.div `
   `}
 
   /* Reset color inheritance from parent with !important to override panel header styles */
-  & *:not(svg):not(.right-icon-btn):not(.right-icon-btn *) {
+  & *:not(svg):not(.right-icon-btn):not(.right-icon-btn *):not(.icon-wrapper):not(.icon-wrapper *) {
     color: #1a1a1a !important;
   }
 
@@ -80,7 +80,7 @@ export const MenuContainer = styled.div `
                 0 2px 8px rgba(0, 0, 0, 0.3);
   }
 
-  [data-theme='dark'] & *:not(svg):not(.right-icon-btn):not(.right-icon-btn *) {
+  [data-theme='dark'] & *:not(svg):not(.right-icon-btn):not(.right-icon-btn *):not(.icon-wrapper):not(.icon-wrapper *) {
     color: #e0e0e0 !important;
   }
 
@@ -174,7 +174,9 @@ export const MenuItemContent = styled.div `
   gap: 10px;
   flex: 1;
 `;
-export const IconWrapper = styled.span `
+export const IconWrapper = styled.span.attrs({
+    className: 'icon-wrapper'
+}) `
   display: flex;
   align-items: center;
   justify-content: center;
@@ -289,7 +291,7 @@ export const Submenu = styled.div `
   }
 
   /* Reset color inheritance from parent with !important to override panel header styles */
-  & *:not(svg):not(.right-icon-btn):not(.right-icon-btn *) {
+  & *:not(svg):not(.right-icon-btn):not(.right-icon-btn *):not(.icon-wrapper):not(.icon-wrapper *) {
     color: #1a1a1a !important;
   }
 
@@ -300,7 +302,7 @@ export const Submenu = styled.div `
                 0 2px 8px rgba(0, 0, 0, 0.3);
   }
 
-  [data-theme='dark'] & *:not(svg):not(.right-icon-btn):not(.right-icon-btn *) {
+  [data-theme='dark'] & *:not(svg):not(.right-icon-btn):not(.right-icon-btn *):not(.icon-wrapper):not(.icon-wrapper *) {
     color: #e0e0e0 !important;
   }
   

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

@@ -154,10 +154,12 @@ const TMRelationViewer = ({ inputDcmts, isForMaster = false, showCurrentDcmtIndi
     const [expansionAbortController, setExpansionAbortController] = useState(undefined);
     // Ref to track last loaded input to prevent unnecessary reloads
     const lastLoadedInputRef = React.useRef('');
+    // State to track loaded input key - triggers re-render for focus selection
+    const [loadedInputKey, setLoadedInputKey] = React.useState('');
     // Ref to track if user has manually expanded/collapsed static items
     const userInteractedWithStaticItemsRef = React.useRef(false);
-    // Ref to track if we've already set the initial focused item
-    const initialFocusSetRef = React.useRef(false);
+    // Ref to track the last inputKey for which we set the focused item
+    const lastFocusedInputRef = React.useRef('');
     /**
      * Generate a stable key from inputDcmts to detect real changes
      */
@@ -657,16 +659,18 @@ const TMRelationViewer = ({ inputDcmts, isForMaster = false, showCurrentDcmtIndi
         if (!inputDcmts || inputDcmts.length === 0 || dcmtTypes.length === 0) {
             setTreeData([]);
             lastLoadedInputRef.current = '';
+            lastFocusedInputRef.current = '';
+            setLoadedInputKey('');
             userInteractedWithStaticItemsRef.current = false; // Reset interaction flag
             return;
         }
         // Generate current input key
         const currentKey = getInputKey();
-        // Skip if we already loaded this exact data
+        // Skip if we already loaded or are loading this exact data
         if (currentKey === lastLoadedInputRef.current && treeData.length > 0) {
             return;
         }
-        // Mark as loading this key
+        // Mark as loading this key to prevent duplicate loads
         lastLoadedInputRef.current = currentKey;
         // Reset interaction flag when loading new data
         userInteractedWithStaticItemsRef.current = false;
@@ -675,6 +679,9 @@ const TMRelationViewer = ({ inputDcmts, isForMaster = false, showCurrentDcmtIndi
         setWaitPanelValuePrimary(0);
         // Call loadData and use .then() instead of await to allow React to render
         loadData().then(() => {
+            // Mark as loaded AFTER data is ready - state update triggers re-render for focus selection
+            lastLoadedInputRef.current = currentKey;
+            setLoadedInputKey(currentKey);
             setShowWaitPanel(false);
             setWaitPanelTextPrimary('');
             setWaitPanelMaxValuePrimary(0);
@@ -689,18 +696,21 @@ const TMRelationViewer = ({ inputDcmts, isForMaster = false, showCurrentDcmtIndi
         setTreeData(prevData => updateHiddenProperty(prevData));
     }, [showZeroDcmts, updateHiddenProperty]);
     /**
-     * Set initial focused item when showMainDocument = true
-     * Focuses on the main document (first inputDcmts) when data is loaded
-     * For master mode with invertMasterNavigation=false, focuses on the first master document
+     * Set focused item when data finishes loading
+     * Focuses on the first document (under root) every time new data is loaded
+     * Works both on initial load and on navigation (onPrev/onNext)
      */
     useEffect(() => {
-        // Only execute if:
-        // 1. showMainDocument is true
-        // 2. onFocusedItemChanged callback exists
-        // 3. We have tree data
-        // 4. We have input documents
-        // 5. We haven't already set the initial focus
-        if (!showMainDocument || !onFocusedItemChanged || !treeData.length || !inputDcmts?.length || initialFocusSetRef.current) {
+        const currentInputKey = getInputKey();
+        // Ensure data has finished loading for current input
+        if (loadedInputKey !== currentInputKey) {
+            return;
+        }
+        if (!showMainDocument || !onFocusedItemChanged || !treeData.length || !inputDcmts?.length) {
+            return;
+        }
+        // Skip if we already focused for this inputKey
+        if (lastFocusedInputRef.current === currentInputKey) {
             return;
         }
         // Helper function to recursively find the first document with isRoot=true
@@ -722,17 +732,11 @@ const TMRelationViewer = ({ inputDcmts, isForMaster = false, showCurrentDcmtIndi
         // Find the first document marked as root (set by setupInitialTreeExpansion)
         const docNode = findFirstRootDocument(treeData);
         if (docNode) {
-            // Set the focused item
+            // Set the focused item and mark this inputKey as focused
             onFocusedItemChanged(docNode);
-            initialFocusSetRef.current = true;
+            lastFocusedInputRef.current = currentInputKey;
         }
-    }, [treeData, showMainDocument, onFocusedItemChanged, inputDcmts]);
-    /**
-     * Reset initial focus flag when input documents change
-     */
-    useEffect(() => {
-        initialFocusSetRef.current = false;
-    }, [getInputKey()]);
+    }, [treeData, loadedInputKey, showMainDocument, onFocusedItemChanged, inputDcmts, getInputKey]);
     /**
      * Sync static items state when additionalStaticItems change
      * IMPORTANT: Only update if user hasn't manually interacted with the tree,

package/lib/components/features/tasks/TMTaskForm.js

@@ -93,8 +93,12 @@ const TMTaskForm = (props) => {
         };
         fetchUsers();
     }, []);
+    // Imposta i campi readonly in base al ruolo utente e al contesto
     useEffect(() => {
-        if (formDataOrig && formMode === FormModes.Update) {
+        if (!formDataOrig)
+            return;
+        // UPDATE: se l'utente è receiver (destinatario del task), i campi principali sono readonly
+        if (formMode === FormModes.Update) {
             const taskRole = getCurrentUserTaskRole(formDataOrig);
             setFieldsReadOnly({
                 name: taskRole === 'receiver',
@@ -108,12 +112,9 @@ const TMTaskForm = (props) => {
                 remTime: false,
                 response: false
             });
-            const newTaskDescriptor = new TaskDescriptor();
-            Object.assign(newTaskDescriptor, formDataOrig);
-            newTaskDescriptor.isNew = 0;
-            editTaskCallback(newTaskDescriptor);
         }
-        else if (formDataOrig && formMode === FormModes.Create && taskContext?.dossier && taskContext?.dossier?.origin === 'DossierAction' && currentTask) {
+        // CREATE/DUPLICATE da DossierAction: il nome è precompilato e bloccato
+        if ((formMode === FormModes.Create || formMode === FormModes.Duplicate) && taskContext?.dossier && taskContext?.dossier?.origin === 'DossierAction' && currentTask) {
             setFieldsReadOnly({
                 name: true,
                 description: false,
@@ -128,6 +129,17 @@ const TMTaskForm = (props) => {
             });
         }
     }, [formDataOrig, formMode]);
+    // Notifica il task come "non nuovo" quando si è in modalità Update
+    useEffect(() => {
+        if (!formDataOrig)
+            return;
+        if (formMode !== FormModes.Update)
+            return;
+        const newTaskDescriptor = new TaskDescriptor();
+        Object.assign(newTaskDescriptor, formDataOrig);
+        newTaskDescriptor.isNew = 0;
+        editTaskCallback(newTaskDescriptor);
+    }, [formDataOrig, formMode]);
     // Function to handle changes in the priority value of a TM Drop Down
     const onPriorityValueChange = (e) => {
         if (!e?.target?.value)

package/lib/components/features/workflow/diagram/ConnectionComponent.d.ts

@@ -9,6 +9,7 @@ interface ConnectionComponentProps {
     onClick: (id: string, event: React.MouseEvent) => void;
     onDoubleClick: (id: string) => void;
     onConnectionEndpointMouseDown?: (connectionId: string, endpointType: 'source' | 'sink', mouseEvent: React.MouseEvent) => void;
+    onContextMenu?: (id: string, event: React.MouseEvent) => void;
 }
 declare const _default: React.NamedExoticComponent<ConnectionComponentProps>;
 export default _default;

package/lib/components/features/workflow/diagram/ConnectionComponent.js

@@ -37,7 +37,7 @@ const StyledSquareConnector = styled.rect `
   stroke-width: 1;
   pointer-events: all;
 `;
-const ConnectionComponent = ({ connection, isSelected, sourcePoint, sinkPoint, isTemporary, onClick, onDoubleClick, onConnectionEndpointMouseDown }) => {
+const ConnectionComponent = ({ connection, isSelected, sourcePoint, sinkPoint, isTemporary, onClick, onDoubleClick, onConnectionEndpointMouseDown, onContextMenu }) => {
     const connectionColor = getConnectionColor(connection.OutputStatus);
     // Funzione per renderizzare la forma della freccia
     const renderArrow = useCallback((arrowType, angle) => {
@@ -82,7 +82,11 @@ const ConnectionComponent = ({ connection, isSelected, sourcePoint, sinkPoint, i
         event.stopPropagation();
         onDoubleClick?.(connection.ID);
     }, [onDoubleClick, connection.ID]);
-    return (_jsxs("g", { children: [_jsx(StyledPathHitArea, { d: connection.PathGeometry, onClick: (e) => onClick(connection.ID, e), onDoubleClick: handleDoubleClick }), _jsx(StyledPath, { d: connection.PathGeometry, "$isSelected": isSelected, "$isTemporary": isTemporary, "$outputStatus": connection.OutputStatus, onClick: (e) => onClick(connection.ID, e), onDoubleClick: handleDoubleClick }), connection.SinkArrowSymbol !== ArrowSymbol.None && (_jsxs("g", { transform: calculateArrowTransform(true), children: [renderArrow(connection.SinkArrowSymbol, 0), " "] })), connection.SourceArrowSymbol !== ArrowSymbol.None && (_jsx("g", { transform: calculateArrowTransform(false) + ' rotate(180)', children: renderArrow(connection.SourceArrowSymbol, 0) })), isSelected && (_jsxs(_Fragment, { children: [_jsx(StyledSquareConnector, { "$color": connectionColor, x: sourcePoint.x - 5, y: sourcePoint.y - 5, width: 10, height: 10 }), _jsx(StyledSquareConnector, { "$color": connectionColor, x: sinkPoint.x - 5, y: sinkPoint.y - 5, width: 10, height: 10, cursor: 'move', onMouseDown: (e) => {
+    const handleContextMenu = useCallback((event) => {
+        event.stopPropagation();
+        onContextMenu?.(connection.ID, event);
+    }, [onContextMenu, connection.ID]);
+    return (_jsxs("g", { children: [_jsx(StyledPathHitArea, { d: connection.PathGeometry, onClick: (e) => onClick(connection.ID, e), onDoubleClick: handleDoubleClick, onContextMenu: handleContextMenu }), _jsx(StyledPath, { d: connection.PathGeometry, "$isSelected": isSelected, "$isTemporary": isTemporary, "$outputStatus": connection.OutputStatus, onClick: (e) => onClick(connection.ID, e), onDoubleClick: handleDoubleClick, onContextMenu: handleContextMenu }), connection.SinkArrowSymbol !== ArrowSymbol.None && (_jsxs("g", { transform: calculateArrowTransform(true), children: [renderArrow(connection.SinkArrowSymbol, 0), " "] })), connection.SourceArrowSymbol !== ArrowSymbol.None && (_jsx("g", { transform: calculateArrowTransform(false) + ' rotate(180)', children: renderArrow(connection.SourceArrowSymbol, 0) })), isSelected && (_jsxs(_Fragment, { children: [_jsx(StyledSquareConnector, { "$color": connectionColor, x: sourcePoint.x - 5, y: sourcePoint.y - 5, width: 10, height: 10 }), _jsx(StyledSquareConnector, { "$color": connectionColor, x: sinkPoint.x - 5, y: sinkPoint.y - 5, width: 10, height: 10, cursor: 'move', onMouseDown: (e) => {
                             e.stopPropagation(); // Impedisce la propagazione dell'evento a elementi sottostanti
                             onConnectionEndpointMouseDown?.(connection.ID, 'sink', e);
                         } })] }))] }));

package/lib/components/features/workflow/diagram/WFDiagram.js

@@ -8,13 +8,15 @@ import ConnectionComponent from './ConnectionComponent';
 import DiagramItemComponent from './DiagramItemComponent';
 import DiagramItemSvgContent from './DiagramItemSvgContent';
 import { calculateArrowAngle, downloadFile, getConnectionPoint, getNewWfDiagram, isConnectionNonLinear, validateDiagram } from './workflowHelpers';
-import { IconFlowChart, IconUndo, IconRestore, IconAdjust, IconCopy, IconCut, IconPaste, IconPin, IconUnpin, IconChevronRight, IconCloseOutline, IconNew, SDKUI_Localizator, generateUUID, IconExport, IconImport, IconWindowMaximize, IconZoomIn, IconZoomOut, IconPencil, IconLock, LocalizeDiagramItemType, IconWindowMinimize, IconZoomAuto } from '../../../../helper';
+import { IconFlowChart, IconUndo, IconRestore, IconAdjust, IconCopy, IconCut, IconPaste, IconPin, IconUnpin, IconChevronRight, IconCloseOutline, IconNew, SDKUI_Localizator, generateUUID, IconExport, IconImport, IconWindowMaximize, IconZoomIn, IconZoomOut, IconPencil, IconLock, LocalizeDiagramItemType, IconWindowMinimize, IconZoomAuto, IconCloseCircle, IconSuccess } from '../../../../helper';
 import { ButtonNames, TMExceptionBoxManager, TMMessageBoxManager } from '../../../base/TMPopUp';
 import { StyledLoadingContainer, StyledSpinner } from '../../../base/Styled';
 import DiagramItemForm from './DiagramItemForm';
 import ReactDOM from 'react-dom';
 import ConnectionForm from './ConnectionForm';
 import TMFloatingMenuBar from '../../../NewComponents/FloatingMenuBar';
+import TMContextMenu from '../../../NewComponents/ContextMenu/TMContextMenu';
+import { TMColors } from '../../../../utils/theme';
 const ZoomLevelText = styled.span `
     font-size: 0.9em;
     color: #555; 
@@ -331,6 +333,9 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, allowEdit = true, onDiagram
     const [wfDiagram, setWfDiagram] = useState(null);
     const [selectedItems, setSelectedItems] = useState(new Set());
     const [selectedConnections, setSelectedConnections] = useState(new Set());
+    // Context menu per le connections
+    const [connectionContextMenuPosition, setConnectionContextMenuPosition] = useState({ x: 0, y: 0 });
+    const [contextMenuConnectionId, setContextMenuConnectionId] = useState(null);
     const [wfDiagramHistory, setWfDiagramHistory] = useState([]);
     const [historyIndex, setHistoryIndex] = useState(-1);
     const isUndoingRedoing = useRef(false);
@@ -1311,6 +1316,62 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, allowEdit = true, onDiagram
         if (!isCtrlPressed)
             setSelectedItems(new Set());
     }, [isReadOnly]);
+    const handleConnectionContextMenu = useCallback((id, event) => {
+        if (isReadOnly)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        // Trova la connection
+        const connection = wfDiagram?.Connections.find(conn => conn.ID === id);
+        if (!connection)
+            return;
+        // Verifica se esce da un DiagramItemTypes.Condition o Approval
+        const sourceItem = wfDiagram?.DiagramItems.find(item => item.ID === connection.Source.ParentDiagramItem.ID);
+        if (!sourceItem || ![DiagramItemTypes.Condition, DiagramItemTypes.Approval].includes(sourceItem.Type))
+            return;
+        // Mostra il context menu
+        setContextMenuConnectionId(id);
+        setConnectionContextMenuPosition({ x: event.clientX, y: event.clientY });
+    }, [isReadOnly, wfDiagram]);
+    const handleChangeConnectionOutputStatus = useCallback((connectionId) => {
+        if (isReadOnly || !wfDiagram)
+            return;
+        const connection = wfDiagram.Connections.find(conn => conn.ID === connectionId);
+        if (!connection)
+            return;
+        // Cambia l'OutputStatus da Completed a Rejected e viceversa
+        const newStatus = connection.OutputStatus === WorkItemStatus.Completed
+            ? WorkItemStatus.Rejected
+            : WorkItemStatus.Completed;
+        const updatedDiagram = {
+            ...wfDiagram,
+            Connections: wfDiagram.Connections.map(conn => conn.ID === connectionId ? { ...conn, OutputStatus: newStatus } : conn)
+        };
+        updateDiagram(updatedDiagram);
+        setWfDiagram(updatedDiagram);
+        setContextMenuConnectionId(null);
+    }, [isReadOnly, wfDiagram, updateDiagram]);
+    const closeConnectionContextMenu = useCallback(() => {
+        setContextMenuConnectionId(null);
+    }, []);
+    // Menu items per il context menu delle connections
+    const connectionContextMenuItems = useMemo(() => {
+        if (!contextMenuConnectionId || !wfDiagram)
+            return [];
+        const connection = wfDiagram.Connections.find(conn => conn.ID === contextMenuConnectionId);
+        if (!connection)
+            return [];
+        const targetStatus = connection.OutputStatus === WorkItemStatus.Completed
+            ? SDKUI_Localizator.WorkItemStatus_Rejected
+            : SDKUI_Localizator.WorkItemStatus_Completed;
+        return [{
+                icon: connection.OutputStatus === WorkItemStatus.Completed
+                    ? _jsx(IconCloseCircle, { color: TMColors.success, fontSize: 16 })
+                    : _jsx(IconSuccess, { color: TMColors.error, fontSize: 16 }),
+                name: SDKUI_Localizator.ChangeStatusTo.replaceParams(targetStatus),
+                onClick: () => handleChangeConnectionOutputStatus(contextMenuConnectionId)
+            }];
+    }, [contextMenuConnectionId, wfDiagram, handleChangeConnectionOutputStatus]);
     const handleDrag = useCallback((id, newX, newY) => {
         if (isReadOnly)
             return;
@@ -1393,10 +1454,15 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, allowEdit = true, onDiagram
             if (sourceItem.Type === DiagramItemTypes.Condition || sourceItem.Type === DiagramItemTypes.Approval) {
                 const existingConnectionsFromSource = wfDiagram.Connections.filter(conn => conn.Source.ParentDiagramItem.ID === sourceItem.ID);
                 if (existingConnectionsFromSource.length === 0) {
+                    // Prima connessione → Completed
                     outputStatus = WorkItemStatus.Completed;
                 }
                 else if (existingConnectionsFromSource.length === 1) {
-                    outputStatus = WorkItemStatus.Rejected;
+                    // Seconda connessione → contrario della prima
+                    const firstConnection = existingConnectionsFromSource[0];
+                    outputStatus = firstConnection.OutputStatus === WorkItemStatus.Completed
+                        ? WorkItemStatus.Rejected
+                        : WorkItemStatus.Completed;
                 }
             }
             const newConnection = {
@@ -1842,8 +1908,12 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, allowEdit = true, onDiagram
                                 const sinkPoint = getConnectionPoint(sinkItem, connection.Sink.ConnectorName);
                                 // Determina se questa è la connessione che stiamo trascinando
                                 const isThisConnectionBeingDragged = isDraggingExistingConnectionEndpoint && draggingConnectionId === connection.ID;
-                                return (_jsx(ConnectionComponent, { connection: connection, isSelected: selectedConnections.has(connection.ID), sourcePoint: sourcePoint, sinkPoint: sinkPoint, isTemporary: isThisConnectionBeingDragged, onClick: handleConnectionClick, onDoubleClick: handleDoubleClickConnection, onConnectionEndpointMouseDown: handleConnectionEndpointMouseDown }, connection.ID));
-                            }), isDrawingConnection && tempConnectionPathData && (_jsx(TempConnectionPath, { d: tempConnectionPathData })), isDraggingExistingConnectionEndpoint && tempConnectionPathData && (_jsx(TempConnectionPath, { d: tempConnectionPathData })), isDrawingSelectionRect && currentSelectionRect && (_jsx(SelectionRect, { x: currentSelectionRect.x, y: currentSelectionRect.y, width: currentSelectionRect.width, height: currentSelectionRect.height }))] }) })) : (_jsx(DiagramMessage, { children: `${SDKUI_Localizator.WorkflowDiagramMissingOrInvalid} ...` })) }), isModalOpen && itemToEdit && (_jsx(DiagramItemForm, { itemToEdit: itemToEdit, wf: wfDiagram?.Info, onClose: handleCloseModal, onApply: handleUpdateDiagramItem })), isConnectionModalOpen && connectionToEdit && (_jsx(ConnectionForm, { connectionToEdit: connectionToEdit, onClose: () => setIsConnectionModalOpen(false), onApply: handleUpdateConnection }))] }));
+                                return (_jsx(ConnectionComponent, { connection: connection, isSelected: selectedConnections.has(connection.ID), sourcePoint: sourcePoint, sinkPoint: sinkPoint, isTemporary: isThisConnectionBeingDragged, onClick: handleConnectionClick, onDoubleClick: handleDoubleClickConnection, onConnectionEndpointMouseDown: handleConnectionEndpointMouseDown, onContextMenu: handleConnectionContextMenu }, connection.ID));
+                            }), isDrawingConnection && tempConnectionPathData && (_jsx(TempConnectionPath, { d: tempConnectionPathData })), isDraggingExistingConnectionEndpoint && tempConnectionPathData && (_jsx(TempConnectionPath, { d: tempConnectionPathData })), isDrawingSelectionRect && currentSelectionRect && (_jsx(SelectionRect, { x: currentSelectionRect.x, y: currentSelectionRect.y, width: currentSelectionRect.width, height: currentSelectionRect.height }))] }) })) : (_jsx(DiagramMessage, { children: `${SDKUI_Localizator.WorkflowDiagramMissingOrInvalid} ...` })) }), isModalOpen && itemToEdit && (_jsx(DiagramItemForm, { itemToEdit: itemToEdit, wf: wfDiagram?.Info, onClose: handleCloseModal, onApply: handleUpdateDiagramItem })), isConnectionModalOpen && connectionToEdit && (_jsx(ConnectionForm, { connectionToEdit: connectionToEdit, onClose: () => setIsConnectionModalOpen(false), onApply: handleUpdateConnection })), _jsx(TMContextMenu, { items: connectionContextMenuItems, externalControl: {
+                    visible: contextMenuConnectionId !== null,
+                    position: connectionContextMenuPosition,
+                    onClose: closeConnectionContextMenu
+                } })] }));
     return (_jsxs(_Fragment, { children: [!isFullScreen && (_jsx(DiagramWrapper, { ref: diagramRef, children: diagramContent })), isFullScreen && ReactDOM.createPortal(_jsx(FullScreenContainer, { ref: fullScreenRef, tabIndex: 0, onKeyDown: handleFullScreenKeyDown, children: diagramContent }), document.body)] }));
 };
 export default WFDiagram;

package/lib/helper/SDKUI_Localizator.d.ts

@@ -85,6 +85,7 @@ export declare class SDKUI_Localizator {
     static get CancelCheckOut(): string;
     static get Cancel(): "Abbrechen" | "Cancel" | "Anular" | "Annuler" | "Cancelar" | "Annulla";
     static get ChangePassword(): "Kennwort ändern" | "Change password" | "Cambiar la contraseña" | "Changer le mot de passe" | "Alterar a senha" | "Cambia password";
+    static get ChangeStatusTo(): string;
     static get CharactersRemaining(): "verbleibende Zeichen" | "characters remaining" | "caracteres restantes" | "caractères restants" | "caratteri rimanenti";
     static get CheckIn(): "Check in" | "Enregistrement";
     static get CheckInElementConfirm(): string;

package/lib/helper/SDKUI_Localizator.js

@@ -805,6 +805,16 @@ export class SDKUI_Localizator {
             default: return "Cambia password";
         }
     }
+    static get ChangeStatusTo() {
+        switch (this._cultureID) {
+            case CultureIDs.De_DE: return "Ändern in {{0}}";
+            case CultureIDs.En_US: return "Change to {{0}}";
+            case CultureIDs.Es_ES: return "Cambiar a {{0}}";
+            case CultureIDs.Fr_FR: return "Changer en {{0}}";
+            case CultureIDs.Pt_PT: return "Alterar para {{0}}";
+            default: return "Cambia in {{0}}";
+        }
+    }
     static get CharactersRemaining() {
         switch (this._cultureID) {
             case CultureIDs.De_DE: return "verbleibende Zeichen";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@topconsultnpm/sdkui-react",
-    "version": "6.20.0-dev2.53",
+    "version": "6.20.0-dev2.54",
     "description": "",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",