@topconsultnpm/sdkui-react 6.20.0-dev1.12 → 6.20.0-dev1.121

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

@@ -333,7 +333,7 @@ const TMSignSettingsForm = (props) => {
                         fontWeight: 'bold',
                         color: isModified ? MODIFIED_COLOR : '#777',
                         transition: 'opacity 0.2s ease'
-                    }, onMouseEnter: (e) => { e.currentTarget.style.opacity = '0.9'; }, onMouseLeave: (e) => { e.currentTarget.style.opacity = '0.5'; }, children: "\u00D7" })] }));
+                    }, onMouseEnter: (e) => { e.currentTarget.style.opacity = '0.9'; }, onMouseLeave: (e) => { e.currentTarget.style.opacity = '0.5'; }, children: _jsx("i", { className: "dx-icon-close" }) })] }));
     };
     const renderMultiSignerTag = (tagData) => {
         const handleRemoveTag = () => {

package/lib/components/features/search/TMSignatureInfoContent.d.ts

@@ -0,0 +1,6 @@
+import { DcmtInfo } from "../../../ts";
+interface TMSignatureInfoContentProps {
+    inputDcmt: DcmtInfo;
+}
+declare const TMSignatureInfoContent: (props: TMSignatureInfoContentProps) => import("react/jsx-runtime").JSX.Element | null;
+export default TMSignatureInfoContent;

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

@@ -0,0 +1,140 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { SDK_Globals } from "@topconsultnpm/sdk-ts";
+import { IconCopy, getExceptionMessage } from "../../../helper";
+import TMSpinner from "../../base/TMSpinner";
+const TMSignatureInfoContent = (props) => {
+    const { inputDcmt } = props;
+    const [selectedHash, setSelectedHash] = useState('sha256');
+    const [signerInfo, setSignerInfo] = useState(undefined);
+    const [error, setError] = useState(undefined);
+    const [copiedHash, setCopiedHash] = useState(false);
+    useEffect(() => {
+        const fetchSignerInfo = async () => {
+            TMSpinner.show();
+            try {
+                const ue = SDK_Globals.tmSession?.NewUpdateEngineByID();
+                if (!ue) {
+                    setError("Sessione non disponibile");
+                    TMSpinner.hide();
+                    return;
+                }
+                ue.TID = inputDcmt.TID;
+                ue.DID = inputDcmt.DID;
+                const signerInfoDescriptor = await ue.GetSignersAsync();
+                if (!signerInfoDescriptor) {
+                    setError("Informazioni di firma non disponibili");
+                    TMSpinner.hide();
+                    return;
+                }
+                setSignerInfo(signerInfoDescriptor);
+                setError(undefined);
+                TMSpinner.hide();
+            }
+            catch (err) {
+                setError(getExceptionMessage(err));
+                TMSpinner.hide();
+            }
+        };
+        fetchSignerInfo();
+    }, [inputDcmt]);
+    const hashButtonStyle = (isActive) => ({
+        padding: '8px 16px',
+        margin: '0 2px',
+        border: isActive ? '2px solid #0078d4' : '1px solid #ccc',
+        borderRadius: '6px',
+        background: isActive ? '#e6f2ff' : '#fff',
+        color: isActive ? '#0078d4' : '#333',
+        cursor: 'pointer',
+        fontSize: '13px',
+        fontWeight: isActive ? '600' : '400',
+        transition: 'all 0.2s ease',
+        outline: 'none',
+        userSelect: 'none',
+        whiteSpace: 'nowrap'
+    });
+    const getHashValue = () => {
+        switch (selectedHash) {
+            case 'sha256': return signerInfo?.shA256;
+            case 'sha1': return signerInfo?.shA1;
+            case 'sha256base64': return signerInfo?.shA256Base64;
+        }
+    };
+    const getHashLabel = () => {
+        switch (selectedHash) {
+            case 'sha256': return 'SHA-256';
+            case 'sha1': return 'SHA-1';
+            case 'sha256base64': return 'SHA-256 (Base64)';
+        }
+    };
+    const copyToClipboard = async () => {
+        const value = getHashValue();
+        if (value) {
+            try {
+                await navigator.clipboard.writeText(value);
+                setCopiedHash(true);
+                setTimeout(() => setCopiedHash(false), 2000);
+            }
+            catch (err) {
+                console.error('Failed to copy:', err);
+            }
+        }
+    };
+    if (error) {
+        return (_jsx("div", { style: {
+                padding: '20px',
+                textAlign: 'center',
+                color: '#d32f2f',
+                background: '#ffebee',
+                borderRadius: '8px'
+            }, children: error }));
+    }
+    if (!signerInfo) {
+        return null;
+    }
+    return (_jsxs("div", { style: { lineHeight: "1.5em", overflowY: "auto", maxHeight: "500px", paddingRight: "8px", boxSizing: "border-box", userSelect: 'text' }, children: [signerInfo.signers && signerInfo.signers.length > 0 ? (_jsxs("div", { children: [_jsxs("h4", { style: { margin: '0 0 12px 0', color: '#0078d4', fontSize: '16px' }, children: ["Firme digitali (", signerInfo.signers.length, ")"] }), signerInfo.signers.map((signer, idx) => (_jsxs("div", { style: {
+                            border: "1px solid #d0d0d0",
+                            borderRadius: "8px",
+                            padding: "16px",
+                            marginBottom: "12px",
+                            background: "linear-gradient(135deg, #ffffff 0%, #f9f9f9 100%)",
+                            boxShadow: "0 2px 4px rgba(0,0,0,0.08)",
+                            userSelect: 'text',
+                        }, children: [_jsxs("h3", { style: { margin: "0 0 12px", color: "#0078d4", fontSize: '15px', fontWeight: '600' }, children: ["Firma ", signer.levelAndIndex] }), _jsxs("div", { style: {
+                                    display: 'grid',
+                                    gap: '10px',
+                                    fontSize: '13px'
+                                }, children: [_jsxs("div", { children: [_jsx("strong", { style: { color: '#555' }, children: "Intestatario:" }), _jsx("div", { style: { marginTop: '4px', color: '#333' }, children: signer.info1 ?? '-' })] }), _jsxs("div", { children: [_jsx("strong", { style: { color: '#555' }, children: "Riferimento temporale:" }), _jsx("div", { style: { marginTop: '4px', color: '#333' }, children: signer.info2 ?? '-' })] }), _jsxs("div", { children: [_jsx("strong", { style: { color: '#555' }, children: "Dettagli:" }), _jsx("div", { style: { marginTop: '4px', color: '#333' }, children: signer.info3 ?? '-' })] })] })] }, idx)))] })) : (_jsx("div", { style: {
+                    padding: '20px',
+                    textAlign: 'center',
+                    color: '#666',
+                    background: '#f5f5f5',
+                    borderRadius: '8px'
+                }, children: "Nessuna firma trovata" })), signerInfo.shA256 && (_jsxs("div", { style: {
+                    marginBottom: '12px',
+                    padding: '16px',
+                    background: '#f5f5f5',
+                    borderRadius: '8px',
+                    border: '1px solid #e0e0e0'
+                }, children: [_jsxs("div", { style: { marginBottom: '12px', display: 'flex', gap: '4px', flexWrap: 'wrap' }, children: [signerInfo.shA256 && (_jsx("button", { onClick: () => setSelectedHash('sha256'), style: hashButtonStyle(selectedHash === 'sha256'), children: "SHA-256" })), signerInfo.shA1 && (_jsx("button", { onClick: () => setSelectedHash('sha1'), style: hashButtonStyle(selectedHash === 'sha1'), children: "SHA-1" })), signerInfo.shA256Base64 && (_jsx("button", { onClick: () => setSelectedHash('sha256base64'), style: hashButtonStyle(selectedHash === 'sha256base64'), children: "Base64" }))] }), _jsxs("div", { style: {
+                            background: '#fff',
+                            padding: '12px',
+                            borderRadius: '6px',
+                            wordBreak: 'break-all',
+                            fontSize: '12px',
+                            border: '1px solid #d0d0d0',
+                            userSelect: 'text',
+                        }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '6px' }, children: [_jsxs("strong", { style: { color: '#0078d4', fontSize: '14px' }, children: [getHashLabel(), ":"] }), _jsxs("button", { onClick: copyToClipboard, style: {
+                                            background: copiedHash ? '#d4edda' : 'transparent',
+                                            border: 'none',
+                                            cursor: 'pointer',
+                                            padding: '4px 8px',
+                                            borderRadius: '4px',
+                                            display: 'flex',
+                                            alignItems: 'center',
+                                            gap: '4px',
+                                            transition: 'all 0.2s ease',
+                                            color: copiedHash ? '#155724' : '#666'
+                                        }, title: "Copia", children: [_jsx(IconCopy, { width: 16, height: 16 }), copiedHash && _jsx("span", { style: { fontSize: '11px' }, children: "Copiato" })] })] }), _jsx("div", { style: { color: '#333' }, children: getHashValue() })] })] }))] }));
+};
+export default TMSignatureInfoContent;

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { DownloadTypes, FormModes } from "../../../ts/types";
-import { associateColumnsToRows, calcResponsiveSizes, formatBytes, getExceptionMessage, Globalization, SDKUI_Localizator } from "../../../helper";
+import { associateColumnsToRows, calcResponsiveSizes, formatBytes, getExceptionMessage, getMoreInfoTasksForDocument, Globalization, SDKUI_Localizator } from "../../../helper";
 import TMModal from "../../base/TMModal";
 import { DeleteEngine, ResultTypes, SDK_Globals, UpdateEngineByID, UserListCacheService } from "@topconsultnpm/sdk-ts";
 import TMSpinner from "../../base/TMSpinner";
@@ -280,6 +280,6 @@ const TMViewHistoryDcmt = (props) => {
         ]);
     }, [showId]);
     return _jsx(TMModal, { title: `${SDKUI_Localizator.SearchResult} \u2014 ${SDKUI_Localizator.History + ": " + (fromDTD.nameLoc ?? SDKUI_Localizator.Document) + " (DID:" + inputDcmt.DID})`, width: calcResponsiveSizes(deviceType, '700px', '700px', '95%'), height: calcResponsiveSizes(deviceType, '80%', '80%', '95%'), onClose: onClose, children: _jsx(TMLayoutWaitingContainer, { direction: 'vertical', showWaitPanel: showWaitPanel, showWaitPanelPrimary: showPrimary, showWaitPanelSecondary: showSecondary, waitPanelTitle: waitPanelTitle, waitPanelTextPrimary: waitPanelTextPrimary, waitPanelValuePrimary: waitPanelValuePrimary, waitPanelMaxValuePrimary: waitPanelMaxValuePrimary, waitPanelTextSecondary: waitPanelTextSecondary, waitPanelValueSecondary: waitPanelValueSecondary, waitPanelMaxValueSecondary: waitPanelMaxValueSecondary, isCancelable: true, abortController: abortController, children: _jsxs(TMLayoutWaitingContainer, { direction: 'vertical', showWaitPanel: showLocalWaitPanel, showWaitPanelPrimary: showLocalPrimary, waitPanelTitle: waitLocalPanelTitle, waitPanelTextPrimary: waitLocalPanelTextPrimary, waitPanelValuePrimary: waitLocalPanelValuePrimary, waitPanelMaxValuePrimary: waitLocalPanelMaxValuePrimary, isCancelable: true, abortController: abortLocalController, children: [_jsx(TMDataGrid, { dataSource: dcmtHistory, dataColumns: dataColumns, focusedRowKey: focusedRowKey, selection: selection, onContextMenuPreparing: onContextMenuPreparing, onFocusedRowChanged: onFocusedRowChanged, onCellDblClick: onCellDblClick, noDataText: SDKUI_Localizator.NoDataToDisplay, showSearchPanel: showSearch }), (showDcmtForm && selectedDcmt !== undefined) &&
-                        _jsx(TMDcmtForm, { TID: Number(selectedDcmt.TID), DID: Number(selectedDcmt.DID), formMode: FormModes.ReadOnly, isModal: true, widthModal: "95%", heightModal: "95%", titleModal: fromDTD.name ?? SDKUI_Localizator.SearchResult, allowNavigation: dcmtHistory.length > 0, itemIndex: selectedIndex + 1, count: dcmtHistory.length, onClose: () => { setShowDcmtForm(false); }, canNext: canNavigateHandler('next'), canPrev: canNavigateHandler('prev'), onNext: () => onNavigateHandler('next'), onPrev: () => onNavigateHandler('prev'), allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback })] }) }) });
+                        _jsx(TMDcmtForm, { TID: Number(selectedDcmt.TID), DID: Number(selectedDcmt.DID), formMode: FormModes.ReadOnly, isModal: true, widthModal: "95%", heightModal: "95%", titleModal: fromDTD.name ?? SDKUI_Localizator.SearchResult, allowNavigation: dcmtHistory.length > 0, itemIndex: selectedIndex + 1, count: dcmtHistory.length, onClose: () => { setShowDcmtForm(false); }, canNext: canNavigateHandler('next'), canPrev: canNavigateHandler('prev'), onNext: () => onNavigateHandler('next'), onPrev: () => onNavigateHandler('prev'), allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers, moreInfoTasks: getMoreInfoTasksForDocument(allTasks ?? [], Number(selectedDcmt.TID), Number(selectedDcmt.DID)) })] }) }) });
 };
 export default TMViewHistoryDcmt;

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { ObjectClasses, TaskDescriptor, Priorities, PdGs, SDK_Globals, UserListCacheService, SDK_Localizator, Task_States } from '@topconsultnpm/sdk-ts';
 import { areDifferentIDs, formatDate, getOriginLabel, getPriorityLocalizatorValue, getPriorityLocalizatorValues, getStatusLocalizatorValues, gotoPDGExtendedLabel, taskValidatorAsync } from './TMTasksUtils';
 import ScrollView from 'devextreme-react/scroll-view';
@@ -21,6 +21,7 @@ import TMDcmtForm from '../documents/TMDcmtForm';
 import styled from 'styled-components';
 import { TMColors } from '../../../utils/theme';
 import { renderContextBlock } from './TMTasksUtilsView';
+import { DeviceType, useDeviceType } from '../../base/TMDeviceProvider';
 const ResponseCommentWrapper = styled.div `
   position: relative;
   width: 100%;
@@ -105,6 +106,10 @@ const TMTaskForm = (props) => {
     };
     const { formData, setFormData, formDataOrig, validationItems, exception, saveDataAsync } = useSaveForm(formMode, id, sfo, validator, onSaved, onStatusChanged, customizeFormData);
     const containerRef = useRef(null);
+    // 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 isMobileDevice = useMemo(() => { return deviceType === DeviceType.MOBILE; }, [deviceType]);
     const [isMobile, setIsMobile] = useState(false);
     const [showDcmtForm, setShowDcmtForm] = useState(false);
     const mobileBreakpoint = 768;
@@ -325,6 +330,25 @@ const TMTaskForm = (props) => {
         await editTaskCallback(task);
         onClose?.();
     };
+    const handleNavigateToReference = (ref) => {
+        switch (ref.objClass) {
+            case ObjectClasses.Dossier:
+                if (ref.objID)
+                    handleNavigateToDossiers(ref.objID);
+                else
+                    console.log("Dossier reference missing objID");
+                break;
+            case ObjectClasses.WorkingGroup:
+                if (ref.objID)
+                    handleNavigateToWGs(ref.objID);
+                else
+                    console.log("Working Group reference missing objID");
+                break;
+            // Handle other object types as needed
+            default:
+                console.warn(`Unhandled object type: ${ref.objClass}`);
+        }
+    };
     return (_jsx("div", { style: { width: "100%", height: "100%", overflow: "auto" }, ref: containerRef, children: _jsx(TMSaveForm, { width: width, height: height, id: id, title: title, isModal: isModal, formMode: formMode, onSaveAsync: saveDataAsync, onClose: onCloseCallback, onUndo: onUndoCallback, exception: exception, isModified: calcIsModified(formData, formDataOrig), validationItems: validationItems, showBackButton: showBackButton, hasNavigation: (hasNavigation && formMode !== FormModes.Create), canNext: canNext(), onNext: onNextCallback, canPrev: canPrev(), onPrev: onPrevCallback, showToolbar: !(showDcmtForm && formData?.iD1 && formData?.iD2), children: _jsxs(_Fragment, { children: [_jsx(ScrollView, { direction: "vertical", useNative: true, height: "calc(100% - 35px)", children: _jsx("div", { style: { marginRight: "5px" }, children: _jsxs(TMLayoutContainer, { direction: 'vertical', gap: 2, children: [(formMode === FormModes.Update && areDifferentIDs(formDataOrig?.fromID, SDK_Globals.tmSession?.SessionDescr?.userID)) && _jsx(TMConditionalWrapper, { condition: !isMobile, wrapper: children => _jsx("div", { style: { display: 'flex', flexDirection: 'row', width: '100%', gap: 10 }, children: children }), children: _jsxs("div", { style: { width: '100%', display: 'flex', alignItems: 'center', color: "#E29000" }, children: [_jsx("i", { className: "dx-icon-info", style: { fontSize: 20 } }), "\u00A0", _jsx("span", { children: SDKUI_Localizator.TaskAssignedMessage.replaceParams(formDataOrig?.fromName ?? '') })] }) }), taskContext?.workItem === undefined && (!areDifferentIDs(formData?.fromID, SDK_Globals.tmSession?.SessionDescr?.userID)
                                         && !areDifferentIDs(formData?.toID, SDK_Globals.tmSession?.SessionDescr?.userID))
                                         && _jsx(TMConditionalWrapper, { condition: !isMobile, wrapper: children => _jsx("div", { style: { display: 'flex', flexDirection: 'row', width: '100%', gap: 10 }, children: children }), children: _jsxs("div", { style: { width: '100%', display: 'flex', alignItems: 'center', color: "#2559A5" }, children: [_jsx("i", { className: "dx-icon-info", style: { fontSize: 20 } }), "\u00A0", _jsx("span", { children: SDKUI_Localizator.PersonalTaskAssignmentMessage })] }) }), (!areDifferentIDs(formData?.fromID, SDK_Globals.tmSession?.SessionDescr?.userID)
@@ -355,29 +379,55 @@ const TMTaskForm = (props) => {
                                                 width: '100%',
                                                 gap: 16,
                                                 padding: '8px 0'
-                                            }, children: children })), children: _jsx("div", { style: { width: isMobile ? '100%' : '50%' }, children: _jsx("div", { style: {
-                                                    display: 'flex',
-                                                    alignItems: 'center',
-                                                    marginTop: 12
-                                                }, children: _jsx(TMTooltip, { content: formData.pdG !== PdGs.None ? gotoPDGExtendedLabel(true, formData.pdG, formData.iD1Name) : '', children: _jsxs("span", { onClick: () => formData.pdG !== PdGs.None ? gotoPDGExtendedLabelClickCallback() : null, style: {
-                                                            display: 'inline-flex',
-                                                            alignItems: 'center',
-                                                            lineHeight: 1,
-                                                            padding: '6px 10px',
-                                                            borderRadius: 8,
-                                                            backgroundColor: formData.pdG !== PdGs.None ? '#f5f5f7' : 'transparent',
-                                                            color: formData.pdG !== PdGs.None ? '#2559A5' : '#444',
-                                                            cursor: formData.pdG !== PdGs.None ? 'pointer' : 'default',
-                                                            fontWeight: 600,
-                                                            transition: 'all 0.25s ease',
-                                                            gap: 6
-                                                        }, onMouseEnter: e => {
-                                                            if (formData.pdG !== PdGs.None)
-                                                                e.currentTarget.style.backgroundColor = '#ebebef';
-                                                        }, onMouseLeave: e => {
-                                                            if (formData.pdG !== PdGs.None)
-                                                                e.currentTarget.style.backgroundColor = '#f5f5f7';
-                                                        }, children: [_jsx("span", { style: { display: 'flex', alignItems: 'center' }, children: getPdgsIconMap().get(formData.pdG) }), _jsx("span", { children: getOriginLabel(formData.pdG, formData.iD1Name) })] }) }) }) }) })), _jsx(TMConditionalWrapper, { condition: !isMobile, wrapper: children => _jsx("div", { style: { display: 'flex', flexDirection: 'row', width: '100%', gap: 10 }, children: children }), children: _jsx("div", { style: { width: isMobile ? '100%' : '50%' }, children: _jsx(TMTextBox, { label: SDKUI_Localizator.Name, value: formData?.name ?? '', readOnly: fieldsReadOnly.name, autoFocus: true, maxLength: 100, isModifiedWhen: formData?.name !== formDataOrig?.name, onValueChanged: (e) => { setFormData({ ...formData ?? {}, name: e.target.value }); }, validationItems: validationItems?.filter(o => o.PropertyName === SDKUI_Localizator.Name) }) }) }), _jsx("div", { style: { width: '100%' }, children: _jsx(TMTextArea, { label: SDKUI_Localizator.Description, value: formData?.description ?? '', maxLength: 200, readOnly: fieldsReadOnly.description, isModifiedWhen: formData?.description !== formDataOrig?.description, onValueChanged: (e) => { setFormData({ ...formData ?? {}, description: e.target.value }); }, validationItems: validationItems?.filter(o => o.PropertyName === SDKUI_Localizator.Description), resize: false }) }), _jsx(TMConditionalWrapper, { condition: !isMobile, wrapper: children => _jsx("div", { style: { display: 'flex', flexDirection: 'row', width: '100%', gap: 10 }, children: children }), children: (formMode === FormModes.Create || !areDifferentIDs(formDataOrig?.fromID, SDK_Globals.tmSession?.SessionDescr?.userID)) ?
+                                            }, children: children })), children: _jsx("div", { style: {
+                                                width: "100%",
+                                                display: 'flex',
+                                                alignItems: 'center',
+                                                justifyContent: 'center',
+                                                marginTop: 12
+                                            }, children: _jsxs("div", { onClick: () => formData.pdG !== PdGs.None ? gotoPDGExtendedLabelClickCallback() : null, style: {
+                                                    backgroundColor: "#C2388B",
+                                                    color: "#fff",
+                                                    padding: "10px 16px",
+                                                    borderRadius: "20px",
+                                                    display: "flex",
+                                                    alignItems: "center",
+                                                    justifyContent: "space-between",
+                                                    cursor: "pointer",
+                                                    fontWeight: 500,
+                                                    transition: "background-color 0.3s",
+                                                    minWidth: "180px",
+                                                    maxWidth: "100%",
+                                                    flexWrap: "wrap",
+                                                    gap: "8px",
+                                                }, onMouseEnter: e => {
+                                                    if (formData.pdG !== PdGs.None)
+                                                        e.currentTarget.style.backgroundColor = "#A12D78";
+                                                }, onMouseLeave: e => {
+                                                    if (formData.pdG !== PdGs.None)
+                                                        e.currentTarget.style.backgroundColor = "#C2388B";
+                                                }, children: [_jsxs("span", { style: {
+                                                            flex: 1,
+                                                            textAlign: "center",
+                                                            gap: "6px",
+                                                            display: "flex",
+                                                            justifyContent: "center",
+                                                            alignItems: "center",
+                                                        }, children: [formData.pdG === PdGs.WG && _jsx("span", { children: SDKUI_Localizator.GoToWorkgroup }), formData.pdG === PdGs.CF && _jsx("span", { children: SDKUI_Localizator.GoToDossier }), formData.pdG === PdGs.DT && _jsx("span", { children: SDKUI_Localizator.GoToDocument }), (() => {
+                                                                const originLabel = getOriginLabel(formData.pdG, formData.iD1Name);
+                                                                if (!originLabel)
+                                                                    return null;
+                                                                const maxLength = isMobileDevice ? 10 : 30;
+                                                                const displayText = originLabel.length > maxLength
+                                                                    ? originLabel.slice(0, maxLength) + "..."
+                                                                    : originLabel;
+                                                                return _jsxs("span", { children: ["\u201C", displayText, "\u201D"] });
+                                                            })()] }), _jsx(TMTooltip, { content: _jsxs("div", { style: { textAlign: "left" }, children: [formData.pdG && (_jsxs(_Fragment, { children: [_jsxs("div", { style: {
+                                                                                display: "flex",
+                                                                                alignItems: "center",
+                                                                                gap: "6px",
+                                                                                fontWeight: 600,
+                                                                            }, children: [_jsx("span", { style: { display: "flex", alignItems: "center" }, children: getPdgsIconMap().get(formData.pdG) }), _jsx("span", { children: formData.pdG === PdGs.WG ? SDKUI_Localizator.WorkGroup : formData.pdG === PdGs.CF ? SDKUI_Localizator.Dossier : formData.pdG === PdGs.DT ? SDKUI_Localizator.Document : "" })] }), _jsx("hr", { style: { margin: "4px 0 8px 0" } })] })), formData.iD1 != null && formData.iD1 !== 0 && (_jsxs("div", { children: [_jsx("b", { children: "ID1" }), ": ", formData.iD1.toString()] })), formData.iD1Name && (_jsxs("div", { children: [_jsx("b", { children: "ID1NAME" }), ": ", formData.iD1Name.toString()] })), formData.iD2 != null && formData.iD2 !== 0 && (_jsxs("div", { children: [_jsx("b", { children: "ID2" }), ": ", formData.iD2.toString()] }))] }), children: _jsx("i", { className: "dx-icon-info", style: { fontSize: "1.3rem", flexShrink: 0 } }) })] }) }) })), _jsx(TMConditionalWrapper, { condition: !isMobile, wrapper: children => _jsx("div", { style: { display: 'flex', flexDirection: 'row', width: '100%', gap: 10 }, children: children }), children: _jsx("div", { style: { width: isMobile ? '100%' : '50%' }, children: _jsx(TMTextBox, { label: SDKUI_Localizator.Name, value: formData?.name ?? '', readOnly: fieldsReadOnly.name, autoFocus: true, maxLength: 100, isModifiedWhen: formData?.name !== formDataOrig?.name, onValueChanged: (e) => { setFormData({ ...formData ?? {}, name: e.target.value }); }, validationItems: validationItems?.filter(o => o.PropertyName === SDKUI_Localizator.Name) }) }) }), _jsx("div", { style: { width: '100%' }, children: _jsx(TMTextArea, { label: SDKUI_Localizator.Description, value: formData?.description ?? '', maxLength: 200, readOnly: fieldsReadOnly.description, isModifiedWhen: formData?.description !== formDataOrig?.description, onValueChanged: (e) => { setFormData({ ...formData ?? {}, description: e.target.value }); }, validationItems: validationItems?.filter(o => o.PropertyName === SDKUI_Localizator.Description), resize: false }) }), _jsx(TMConditionalWrapper, { condition: !isMobile, wrapper: children => _jsx("div", { style: { display: 'flex', flexDirection: 'row', width: '100%', gap: 10 }, children: children }), children: (formMode === FormModes.Create || !areDifferentIDs(formDataOrig?.fromID, SDK_Globals.tmSession?.SessionDescr?.userID)) ?
                                             _jsx("div", { id: "assignedToAnotherUserField", style: { width: isMobile ? '100%' : '50%' }, children: _jsx(TMUserChooser, { dataSource: usersList ?? undefined, allowShowAllUsers: !!taskContext?.dossier, allowMultipleSelection: false, label: SDKUI_Localizator.AssignedTo_Female, readOnly: fieldsReadOnly.assignedTO, values: formData?.toID ? [formData?.toID] : [], isModifiedWhen: formData?.toID !== formDataOrig?.toID, validationItems: validationItems?.filter(o => o.PropertyName === SDKUI_Localizator.AssignedTo_Female), onValueChanged: (newValue) => {
                                                         if (newValue === undefined)
                                                             return;
@@ -387,6 +437,6 @@ const TMTaskForm = (props) => {
                                                         : _jsx(TMTextBox, { label: SDKUI_Localizator.Priority, value: getPriorityLocalizatorValue(formData?.priority ?? Priorities.Low), readOnly: true }) })] }) }), _jsx(TMConditionalWrapper, { condition: !isMobile, wrapper: children => _jsx("div", { style: { display: 'flex', flexDirection: 'row', width: '100%', gap: 10 }, children: children }), children: _jsxs(_Fragment, { children: [_jsx("div", { style: { width: isMobile ? '100%' : '50%', marginTop: 10 }, children: !fieldsReadOnly.startDate ? _jsx(TMDateBox, { id: "start-date", resetTimeToZeroOnKeyPress: false, label: SDKUI_Localizator.StartDate, dateDisplayType: DateDisplayTypes.DateTime, value: formData?.startTime, isModifiedWhen: formData?.startTime !== formDataOrig?.startTime, validationItems: validationItems?.filter(o => o.PropertyName === SDKUI_Localizator.ErrorStartEndDate), onContentReady: handleStartTimeContentReady, onValueChange: (value) => { setFormData({ ...formData ?? {}, startTime: value }); }, showClearButton: true }) : _jsx(TMTextBox, { label: SDKUI_Localizator.StartDate, value: formData?.startTime ? formatDate(formData?.startTime) : '', readOnly: true }) }), _jsx("div", { style: { width: isMobile ? '100%' : '50%', marginTop: 10 }, children: !fieldsReadOnly.startDate ? _jsx(TMDateBox, { id: "end-date", resetTimeToZeroOnKeyPress: false, label: SDKUI_Localizator.Expiration, dateDisplayType: DateDisplayTypes.DateTime, value: formData?.endTime, isModifiedWhen: formData?.endTime !== formDataOrig?.endTime, validationItems: validationItems?.filter(o => o.PropertyName === SDKUI_Localizator.ErrorStartEndDate || o.PropertyName === SDKUI_Localizator.ErrorEndRemDate), onContentReady: handleEndTimeContentReady, onValueChange: (value) => { setFormData({ ...formData ?? {}, endTime: value }); }, showClearButton: true, readOnly: fieldsReadOnly.endDate }) : _jsx(TMTextBox, { label: SDKUI_Localizator.Expiration, value: formData?.endTime ? formatDate(formData?.endTime) : '', readOnly: true }) })] }) }), _jsx(TMConditionalWrapper, { condition: !isMobile, wrapper: children => _jsx("div", { style: { display: 'flex', flexDirection: 'row', width: '100%', gap: 3 }, children: children }), children: _jsx("div", { style: { width: isMobile ? '100%' : '50%', marginTop: 10 }, children: _jsx(TMDateBox, { id: "alert-time", resetTimeToZeroOnKeyPress: false, label: SDKUI_Localizator.Reminder, dateDisplayType: DateDisplayTypes.DateTime, value: formData?.remTime ?? undefined, isModifiedWhen: formData?.remTime !== formDataOrig?.remTime, validationItems: validationItems?.filter(o => o.PropertyName === SDKUI_Localizator.ErrorEndRemDate), onValueChange: (value) => { setFormData({ ...formData ?? {}, remTime: value }); }, showClearButton: true, readOnly: fieldsReadOnly.remTime }) }) }), (formData?.state && [Task_States.Completed, Task_States.Waiting, Task_States.Deferred].includes(formData?.state) ||
                                         (formData?.response ?? "") !== "") && _jsx(TMConditionalWrapper, { condition: !isMobile, wrapper: children => _jsx("div", { style: { display: 'flex', flexDirection: 'row', width: '100%', gap: 3 }, children: children }), children: _jsx("div", { style: { width: isMobile ? '100%' : '50%', marginTop: 10 }, children: _jsxs(ResponseCommentWrapper, { children: [_jsx(ResponseCommentTextArea, { id: "responseId", name: "response", "$isValid": true, value: formData?.response ?? '', onChange: onAnswerChange, "$isModifiedWhen": formData?.response !== formDataOrig?.response, disabled: (formData?.response ?? "") !== "" &&
                                                             (formData?.state && ![Task_States.Completed, Task_States.Waiting, Task_States.Deferred].includes(formData?.state)) }), _jsxs(ResponseCommentLabel, { htmlFor: "responseId", children: [SDKUI_Localizator.Answer, _jsxs(TMTooltip, { content: SDKUI_Localizator.AnswerTooltip, children: [" ", _jsx("i", { className: 'dx-icon-info' }), " "] })] }), _jsx(ResponseCommentCharacterCounter, { children: `${500 - (formData?.response ?? '').length} ${SDKUI_Localizator.CharactersRemaining}` })] }) }) })] }) }) }), (showDcmtForm && formData?.iD1 && formData?.iD2) &&
-                        _jsx(TMDcmtForm, { titleModal: formData.iD1Name ?? '-', isModal: true, TID: formData.iD1, DID: formData.iD2, allowButtonsRefs: true, taskMoreInfo: formData, onWFOperationCompleted: refreshWorkflowApprove, onTaskCompleted: onTaskCompleted, onClose: () => { setShowDcmtForm(false); }, onOpenS4TViewerRequest: onOpenS4TViewerRequest, s4TViewerDialogComponent: s4TViewerDialogComponent, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers })] }) }) }));
+                        _jsx(TMDcmtForm, { titleModal: formData.iD1Name ?? '-', isModal: true, TID: formData.iD1, DID: formData.iD2, allowButtonsRefs: true, moreInfoTasks: [formData], onWFOperationCompleted: refreshWorkflowApprove, onTaskCompleted: onTaskCompleted, onClose: () => { setShowDcmtForm(false); }, onOpenS4TViewerRequest: onOpenS4TViewerRequest, s4TViewerDialogComponent: s4TViewerDialogComponent, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers, onReferenceClick: handleNavigateToReference })] }) }) }));
 };
 export default TMTaskForm;

package/lib/components/features/tasks/TMTasksAgenda.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
 import { TaskDescriptor } from "@topconsultnpm/sdk-ts";
 import { FormModes } from "../../../ts";
+import { TMContextMenuItemProps } from "../../NewComponents/ContextMenu";
 interface TMTasksAgendaProps {
     id: string;
     showId: boolean;
@@ -12,6 +13,7 @@ interface TMTasksAgendaProps {
     setCurrentAgendaDate: React.Dispatch<React.SetStateAction<Date>>;
     openTaskForm: (formMode: FormModes, task?: TaskDescriptor) => void;
     handleFocusedRowChange: (row: TaskDescriptor | undefined) => void;
+    menuItems: TMContextMenuItemProps[];
 }
-declare const TMTasksAgenda: React.MemoExoticComponent<(props: TMTasksAgendaProps) => import("react/jsx-runtime").JSX.Element>;
+declare const TMTasksAgenda: (props: TMTasksAgendaProps) => import("react/jsx-runtime").JSX.Element;
 export default TMTasksAgenda;

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

@@ -1,5 +1,5 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import React, { useCallback, useEffect, useState } from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import ArrayStore from "devextreme/data/array_store";
 import Scheduler from "devextreme-react/scheduler";
 import { calculateNumberOfDays, highlightTaskText, priorityLegend, renderTaskIcons } from "./TMTasksUtilsView";
@@ -11,14 +11,31 @@ import { FormModes } from "../../../ts";
 import { SDKUI_Localizator } from "../../../helper";
 import TMCustomSearchBar from "../../../helper/TMCustomSearchBar";
 import TMTooltip from "../../base/TMTooltip";
-const TMTasksAgenda = React.memo((props) => {
+import TMContextMenu from "../../NewComponents/ContextMenu/TMContextMenu";
+const MemoizedScheduler = React.memo(({ dataSource, currentAgendaDate, appointmentRender, onAppointmentDblClick, onCurrentDateChange, onAppointmentContextMenu, onAppointmentClick }) => {
     const views = ['agenda'];
-    const { id, showId, showSearch, visualizedTasks, fromCell, toCell, currentAgendaDate, setCurrentAgendaDate, openTaskForm, handleFocusedRowChange } = props;
+    return (_jsx(Scheduler, { id: "tasks-agenda", defaultCurrentView: "agenda", dataSource: dataSource, width: "100%", height: "100%", editing: false, views: views, currentDate: currentAgendaDate, appointmentRender: appointmentRender, onAppointmentDblClick: onAppointmentDblClick, onCurrentDateChange: onCurrentDateChange, onAppointmentContextMenu: onAppointmentContextMenu, onAppointmentClick: onAppointmentClick }));
+});
+const TMTasksAgenda = (props) => {
+    const { id, showId, showSearch, visualizedTasks, fromCell, toCell, currentAgendaDate, setCurrentAgendaDate, openTaskForm, handleFocusedRowChange, menuItems } = props;
     const [schedulerData, setSchedulerData] = useState([]);
     const [loading, setLoading] = useState(false);
     const [searchText, setSearchText] = useState('');
+    const [contextMenuVisible, setContextMenuVisible] = useState(false);
+    const [contextMenuPosition, setContextMenuPosition] = useState({ x: 0, y: 0 });
+    const prevTasksRef = useRef({ length: 0 });
     useEffect(() => {
-        setSchedulerData(convertToSchedulerAppointments(visualizedTasks));
+        const currentSignature = {
+            length: visualizedTasks.length,
+            firstId: visualizedTasks[0]?.id,
+            lastId: visualizedTasks[visualizedTasks.length - 1]?.id
+        };
+        if (prevTasksRef.current.length !== currentSignature.length ||
+            prevTasksRef.current.firstId !== currentSignature.firstId ||
+            prevTasksRef.current.lastId !== currentSignature.lastId) {
+            prevTasksRef.current = currentSignature;
+            setSchedulerData(convertToSchedulerAppointments(visualizedTasks));
+        }
     }, [visualizedTasks]);
     useEffect(() => {
         let timeoutId;
@@ -74,13 +91,16 @@ const TMTasksAgenda = React.memo((props) => {
         if (e === undefined || e.event === undefined || e.appointmentData.id === undefined)
             return;
         e.event.preventDefault();
+        e.event.stopPropagation();
         const { id } = e.appointmentData;
-        // Update the state with the new set of selected appointments
         const task = visualizedTasks.find(task => task.id === id);
         if (task) {
             handleFocusedRowChange(task);
         }
-    }, []);
+        const event = e.event;
+        setContextMenuPosition({ x: event.clientX, y: event.clientY });
+        setContextMenuVisible(true);
+    }, [visualizedTasks, handleFocusedRowChange]);
     const onCurrentDateChange = useCallback((value) => {
         // Exit early if it's not a valid Date
         if (!(value instanceof Date) || isNaN(value.getTime())) {
@@ -101,7 +121,26 @@ const TMTasksAgenda = React.memo((props) => {
             openTaskForm(FormModes.Update, task);
         }
     }, [visualizedTasks]);
+    const handleWrapperContextMenu = useCallback((e) => {
+        handleFocusedRowChange(undefined);
+        setContextMenuPosition({ x: e.clientX, y: e.clientY });
+        setContextMenuVisible(true);
+    }, [handleFocusedRowChange]);
+    const handleCloseContextMenu = useCallback(() => {
+        setContextMenuVisible(false);
+    }, []);
+    const dataSourceRef = useRef(new ArrayStore({ key: `tasks-agenda-data`, data: schedulerData }));
+    const dataLengthRef = useRef(0);
+    if (dataLengthRef.current !== schedulerData.length) {
+        dataLengthRef.current = schedulerData.length;
+        dataSourceRef.current = new ArrayStore({ key: `tasks-agenda-data`, data: schedulerData });
+    }
+    const memoizedDataSource = useMemo(() => dataSourceRef.current, [schedulerData.length]);
     return _jsxs("div", { style: { height: "100%", width: "100%" }, children: [_jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%', height: "48px" }, children: [_jsx("div", { style: { width: showSearch ? "160px" : "0", marginLeft: '10px' }, children: showSearch && (_jsx(TMCustomSearchBar, { initialValue: searchText, onSearchChange: (value) => setSearchText(value) })) }), _jsx("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: "default" }, children: _jsxs(TMTooltip, { content: priorityLegend(), children: [" ", SDKUI_Localizator.PriorityLegend] }) })] }), _jsx("div", { style: { height: "calc(100% - 48px)", width: "100%" }, children: loading ? _jsx("div", { style: { display: "flex", justifyContent: "center", alignItems: "center", height: "100%", width: "100%" }, children: _jsx(LoadIndicator, {}) })
-                    : _jsx("div", { id: `tasks-agenda-wrapper-${id}`, style: { width: "100%", height: "100%" }, onContextMenu: () => { handleFocusedRowChange(undefined); }, onClick: () => { handleFocusedRowChange(undefined); }, children: _jsx(Scheduler, { id: "tasks-agenda", defaultCurrentView: "agenda", dataSource: new ArrayStore({ key: `tasks-agenda-data`, data: schedulerData }), width: "100%", height: "100%", editing: false, views: views, currentDate: currentAgendaDate, appointmentRender: appointmentRender, onAppointmentDblClick: handleAppointmentDblClick, onCurrentDateChange: onCurrentDateChange, onAppointmentContextMenu: onAppointmentContextMenu, onAppointmentClick: handleAppointmentClick }) }) })] });
-});
+                    : _jsxs(_Fragment, { children: [_jsx(TMContextMenu, { items: menuItems, externalControl: {
+                                    visible: contextMenuVisible,
+                                    position: contextMenuPosition,
+                                    onClose: handleCloseContextMenu
+                                } }), _jsx("div", { id: `tasks-agenda-wrapper-${id}`, style: { width: "100%", height: "100%" }, onContextMenu: handleWrapperContextMenu, children: _jsx(MemoizedScheduler, { dataSource: memoizedDataSource, currentAgendaDate: currentAgendaDate, appointmentRender: appointmentRender, onAppointmentDblClick: handleAppointmentDblClick, onCurrentDateChange: onCurrentDateChange, onAppointmentContextMenu: onAppointmentContextMenu, onAppointmentClick: handleAppointmentClick }) })] }) })] });
+};
 export default TMTasksAgenda;

package/lib/components/features/tasks/TMTasksCalendar.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { TaskDescriptor } from "@topconsultnpm/sdk-ts";
 import { FormModes } from '../../../ts';
+import { TMContextMenuItemProps } from '../../NewComponents/ContextMenu/types';
 interface TMTasksCalendarProps {
     id: string;
     visualizedTasks: Array<TaskDescriptor>;
@@ -16,6 +17,7 @@ interface TMTasksCalendarProps {
     setCalendarEndDate: React.Dispatch<React.SetStateAction<Date | undefined>>;
     focusedRowKey: number | undefined;
     handleFocusedRowChange: (row: TaskDescriptor | undefined) => void;
+    menuItems: TMContextMenuItemProps[];
 }
 declare const TMTasksCalendar: (props: TMTasksCalendarProps) => import("react/jsx-runtime").JSX.Element;
 export default TMTasksCalendar;

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

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import ArrayStore from 'devextreme/data/array_store';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { Priorities, Task_States } from "@topconsultnpm/sdk-ts";
@@ -10,13 +10,15 @@ import { FormModes } from '../../../ts';
 import { SDKUI_Localizator } from '../../../helper';
 import TMTooltip from '../../base/TMTooltip';
 import TMCustomSearchBar from '../../../helper/TMCustomSearchBar';
+import TMContextMenu from '../../NewComponents/ContextMenu/TMContextMenu';
 const views = ['month'];
-let clickTimeout = null; // Timeout reference
+let clickTimeout = null;
 let clickCount = 0; // Click counter
 let lastClickedCell = null;
 const TMTasksCalendar = (props) => {
-    const { id, visualizedTasks, showId, showSearch, fromCell, toCell, openTaskForm, onDeleteCallback, currentCalendarDate, setCurrentCalendarDate, focusedRowKey, handleFocusedRowChange, setCalendarStartDate, setCalendarEndDate } = props;
+    const { id, visualizedTasks, showId, showSearch, fromCell, toCell, openTaskForm, onDeleteCallback, currentCalendarDate, setCurrentCalendarDate, focusedRowKey, handleFocusedRowChange, setCalendarStartDate, setCalendarEndDate, menuItems } = props;
     const [isMobile, setIsMobile] = useState(false);
+    const [contextMenuControl, setContextMenuControl] = useState({ visible: false, position: { x: 0, y: 0 } });
     const mobileBreakpoint = 768;
     const [schedulerData, setSchedulerData] = useState([]);
     const [isRange, setIsRange] = useState(false);
@@ -228,13 +230,23 @@ const TMTasksCalendar = (props) => {
             }
         }
     };
-    const onWrapperContextMenu = useCallback(() => {
-        handleFocusedRowChange(undefined);
-    }, []);
     const onWrapperClick = useCallback(() => {
         handleFocusedRowChange(undefined);
     }, []);
+    const handleWrapperContextMenu = useCallback((e) => {
+        setContextMenuControl({
+            visible: true,
+            position: { x: e.clientX, y: e.clientY }
+        });
+    }, []);
+    const handleCloseContextMenu = useCallback(() => {
+        setContextMenuControl(prev => ({ ...prev, visible: false }));
+    }, []);
     return (_jsxs("div", { style: { width: "100%", height: "100%" }, children: [_jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%', height: "48px", padding: 5 }, children: [_jsx("div", { style: { width: showSearch ? "160px" : "0", marginLeft: '10px' }, children: showSearch && (_jsx(TMCustomSearchBar, { initialValue: searchText, onSearchChange: (value) => setSearchText(value) })) }), _jsx("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: "default" }, children: _jsx(TMTooltip, { content: priorityLegend(), children: SDKUI_Localizator.PriorityLegend }) })] }), _jsx("div", { style: { height: "calc(100% - 48px)", width: "100%" }, children: loading ? _jsx("div", { style: { display: "flex", justifyContent: "center", alignItems: "center", height: "100%", width: "100%" }, children: _jsx(LoadIndicator, {}) })
-                    : _jsx("div", { id: `tasks-calendar-wrapper-${id}`, style: { width: "100%", height: "100%" }, onContextMenu: onWrapperContextMenu, onClick: onWrapperClick, children: _jsx(Scheduler, { ref: schedulerRef, id: "tasks-calendar", dataSource: new ArrayStore({ key: 'tasks-calendar-data', data: schedulerData }), views: views, defaultCurrentView: "month", adaptivityEnabled: isMobile, editing: false, width: "100%", height: "100%", currentDate: currentCalendarDate, appointmentComponent: appointmentComponent, onAppointmentFormOpening: handleAppointmentFormOpening, appointmentTooltipComponent: appointmentTooltipComponent, onAppointmentDblClick: handleAppointmentDblClick, onCurrentDateChange: onCurrentCalendarDateChange, onAppointmentContextMenu: onAppointmentContextMenu, onCellContextMenu: onCellContextMenu, onCellClick: handleCellClick, onAppointmentClick: handleAppointmentClick, onContentReady: handleContentReady, onOptionChanged: onOptionChanged, children: _jsx(Resource, { dataSource: prioritiesResourceData, fieldExpr: "priority", label: "Priority" }) }) }) })] }));
+                    : _jsxs(_Fragment, { children: [_jsx(TMContextMenu, { items: menuItems, externalControl: {
+                                    visible: contextMenuControl.visible,
+                                    position: contextMenuControl.position,
+                                    onClose: handleCloseContextMenu
+                                } }), _jsx("div", { id: `tasks-calendar-wrapper-${id}`, style: { width: "100%", height: "100%" }, onContextMenu: handleWrapperContextMenu, onClick: onWrapperClick, children: _jsx(Scheduler, { ref: schedulerRef, id: "tasks-calendar", dataSource: new ArrayStore({ key: 'tasks-calendar-data', data: schedulerData }), views: views, defaultCurrentView: "month", adaptivityEnabled: isMobile, editing: false, width: "100%", height: "100%", currentDate: currentCalendarDate, appointmentComponent: appointmentComponent, onAppointmentFormOpening: handleAppointmentFormOpening, appointmentTooltipComponent: appointmentTooltipComponent, onAppointmentDblClick: handleAppointmentDblClick, onCurrentDateChange: onCurrentCalendarDateChange, onAppointmentContextMenu: onAppointmentContextMenu, onCellContextMenu: onCellContextMenu, onCellClick: handleCellClick, onAppointmentClick: handleAppointmentClick, onContentReady: handleContentReady, onOptionChanged: onOptionChanged, children: _jsx(Resource, { dataSource: prioritiesResourceData, fieldExpr: "priority", label: "Priority" }) }) })] }) })] }));
 };
 export default TMTasksCalendar;

package/lib/components/features/tasks/TMTasksUtils.d.ts

@@ -2,7 +2,7 @@ import { Appointment } from 'devextreme/ui/scheduler';
 import { ContextMenuTypes } from 'devextreme-react/context-menu';
 import { TaskDescriptor, Task_States, PdGs, Priorities, ValidationItem } from '@topconsultnpm/sdk-ts';
 import { FormModes, TaskContext } from '../../../ts';
-import { TMDataGridContextMenuItem } from '../../base/TMDataGrid';
+import { TMContextMenuItemProps } from '../../NewComponents/ContextMenu';
 export declare const TEXT_SELECTED_COLOR = "#ff5e1a";
 export declare const BG_COLOR_INACTIVE_WIDGET = "#fff";
 export declare const BG_COLOR_ACTIVE_WIDGET = "#fff0b7";
@@ -100,7 +100,7 @@ export declare const gotoPDGExtendedLabel: (gotoVisible: boolean, pdg: PdGs, iD1
 export declare const convertToSchedulerAppointments: (tasks: Array<TaskDescriptor>) => Array<Appointment>;
 export declare const formatDate: (date: Date) => string;
 export declare const areDifferentIDs: (fromID: number | undefined, userID: number | undefined) => boolean;
-export declare const createTasksMenuItems: (taskDescriptor: TaskDescriptor | undefined, showId: boolean, setShowId: React.Dispatch<React.SetStateAction<boolean>>, showSearch: boolean, setShowSearch: React.Dispatch<React.SetStateAction<boolean>>, openTaskForm: (formMode: FormModes, task?: TaskDescriptor, isContextual?: boolean) => void, openEditTaskForm: (rowId: number | undefined) => void, openDuplicateTaskForm: (rowId: number | undefined) => void, onDeleteCallback: (rowIds: Array<number>) => void, markAsStatus: (rowIds: Array<number>, status: Task_States) => void, getAllTasks: () => Promise<void>, fromWG: boolean, showContextualWG: boolean, setShowContextualWG: React.Dispatch<React.SetStateAction<boolean>>, fromDossier: boolean, showContextualDossier: boolean, setShowContextualDossier: React.Dispatch<React.SetStateAction<boolean>>, fromDocument: boolean, showContextualDocument: boolean, setShowContextualDocument: React.Dispatch<React.SetStateAction<boolean>>, showGoToToday: boolean, handleGoToToday?: () => void, fromDatagrid?: boolean) => Array<TMDataGridContextMenuItem>;
+export declare const createTasksMenuItems: (taskDescriptor: TaskDescriptor | undefined, showId: boolean, setShowId: React.Dispatch<React.SetStateAction<boolean>>, showSearch: boolean, setShowSearch: React.Dispatch<React.SetStateAction<boolean>>, openTaskForm: (formMode: FormModes, task?: TaskDescriptor, isContextual?: boolean) => void, openEditTaskForm: (rowId: number | undefined) => void, openDuplicateTaskForm: (rowId: number | undefined) => void, onDeleteCallback: (rowIds: Array<number>) => void, markAsStatus: (rowIds: Array<number>, status: Task_States) => void, getAllTasks: () => Promise<void>, fromWG: boolean, showContextualWG: boolean, setShowContextualWG: React.Dispatch<React.SetStateAction<boolean>>, fromDossier: boolean, showContextualDossier: boolean, setShowContextualDossier: React.Dispatch<React.SetStateAction<boolean>>, fromDocument: boolean, showContextualDocument: boolean, setShowContextualDocument: React.Dispatch<React.SetStateAction<boolean>>, showGoToToday: boolean, handleGoToToday?: () => void, fromDatagrid?: boolean) => Array<TMContextMenuItemProps>;
 export declare const checkIfNew: (fromId: number | undefined, isNew: number | undefined) => boolean;
 export declare const getNewTaskCount: (tasks: Array<TaskDescriptor>) => number;
 export declare const isTaskAssignedToAnotherUser: (task: TaskDescriptor) => boolean;