@topconsultnpm/sdkui-react 6.20.0-dev1.9 → 6.20.0-dev1.90

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

@@ -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 })] }) }) });
 };
 export default TMViewHistoryDcmt;

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

@@ -325,6 +325,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)
@@ -387,6 +406,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, 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, 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;

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

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Task_States, PdGs, Priorities, ValidationItem, SDK_Localizator, ResultTypes, SDK_Globals } from '@topconsultnpm/sdk-ts';
 import { TMColors } from '../../../utils/theme';
 import { SDKUI_Localizator } from '../../../helper';
@@ -399,59 +400,65 @@ export const areDifferentIDs = (fromID, userID) => {
 export const createTasksMenuItems = (taskDescriptor, showId, setShowId, showSearch, setShowSearch, openTaskForm, openEditTaskForm, openDuplicateTaskForm, onDeleteCallback, markAsStatus, getAllTasks, fromWG, showContextualWG, setShowContextualWG, fromDossier, showContextualDossier, setShowContextualDossier, fromDocument, showContextualDocument, setShowContextualDocument, showGoToToday, handleGoToToday, fromDatagrid = true) => {
     const isTaskDescriptorDefined = taskDescriptor !== undefined;
     const isTaskFromAnotherUser = isTaskDescriptorDefined && areDifferentIDs(taskDescriptor.fromID, SDK_Globals.tmSession?.SessionDescr?.userID);
+    const getRowIdsAsArray = (rowIds) => {
+        if (fromDatagrid) {
+            return Array.isArray(rowIds) ? rowIds : [rowIds];
+        }
+        return taskDescriptor?.id ? [taskDescriptor.id] : [];
+    };
     const menuItems = [
         {
             id: 'createContextualTask',
-            text: SDKUI_Localizator.CreateContextualTask,
-            icon: 'plus',
+            name: SDKUI_Localizator.CreateContextualTask,
+            icon: _jsx("span", { className: "dx-icon-plus" }),
             onClick: () => { openTaskForm(FormModes.Create, undefined, true); },
             disabled: false
         },
         {
-            text: SDKUI_Localizator.Create,
-            icon: 'plus',
+            name: SDKUI_Localizator.Create,
+            icon: _jsx("span", { className: "dx-icon-plus" }),
             onClick: () => { openTaskForm(FormModes.Create, undefined, false); },
             disabled: false
         },
         {
-            text: SDKUI_Localizator.Update,
-            icon: 'edit',
-            onClick: openEditTaskForm,
+            name: SDKUI_Localizator.Update,
+            icon: _jsx("span", { className: "dx-icon-edit" }),
+            onClick: (rowId) => openEditTaskForm(fromDatagrid ? rowId : taskDescriptor?.id),
             operationType: 'singleRow',
             disabled: fromDatagrid ? false : !isTaskDescriptorDefined
         },
         {
-            text: SDKUI_Localizator.Duplicate,
-            icon: 'copy',
-            onClick: openDuplicateTaskForm,
+            name: SDKUI_Localizator.Duplicate,
+            icon: _jsx("span", { className: "dx-icon-copy" }),
+            onClick: (rowId) => openDuplicateTaskForm(fromDatagrid ? rowId : taskDescriptor?.id),
             operationType: 'singleRow',
             disabled: fromDatagrid ? isTaskFromAnotherUser : !isTaskDescriptorDefined || isTaskFromAnotherUser
         },
         {
-            text: SDKUI_Localizator.Delete,
-            icon: 'trash',
-            onClick: onDeleteCallback,
+            name: SDKUI_Localizator.Delete,
+            icon: _jsx("span", { className: "dx-icon-trash" }),
+            onClick: (rowIds) => onDeleteCallback(getRowIdsAsArray(rowIds)),
             operationType: 'multiRow',
             disabled: fromDatagrid ? isTaskFromAnotherUser : !isTaskDescriptorDefined || isTaskFromAnotherUser
         },
         {
-            icon: 'optionsgear',
-            text: SDKUI_Localizator.MarkAs,
+            icon: _jsx("span", { className: "dx-icon-optionsgear" }),
+            name: SDKUI_Localizator.MarkAs,
             id: "markAs",
             operationType: 'multiRow',
             disabled: fromDatagrid ? false : !isTaskDescriptorDefined,
-            items: [
-                { icon: 'product', text: SDKUI_Localizator.NewFemale, operationType: 'multiRow', onClick: (rowIds) => markAsStatus(rowIds, Task_States.NotStarted) },
-                { icon: 'refresh', text: SDKUI_Localizator.InProgress, operationType: 'multiRow', onClick: (rowIds) => markAsStatus(rowIds, Task_States.InProgress) },
-                { icon: 'check', text: SDKUI_Localizator.Completed, operationType: 'multiRow', onClick: (rowIds) => markAsStatus(rowIds, Task_States.Completed) },
-                { icon: 'taskstop', text: SDKUI_Localizator.Pending, operationType: 'multiRow', onClick: (rowIds) => markAsStatus(rowIds, Task_States.Waiting) },
-                { icon: 'clock', text: SDKUI_Localizator.Postponed, operationType: 'multiRow', onClick: (rowIds) => markAsStatus(rowIds, Task_States.Deferred) }
+            submenu: [
+                { icon: _jsx("span", { className: "dx-icon-product" }), name: SDKUI_Localizator.NewFemale, operationType: 'multiRow', onClick: (rowIds) => markAsStatus(getRowIdsAsArray(rowIds), Task_States.NotStarted) },
+                { icon: _jsx("span", { className: "dx-icon-refresh" }), name: SDKUI_Localizator.InProgress, operationType: 'multiRow', onClick: (rowIds) => markAsStatus(getRowIdsAsArray(rowIds), Task_States.InProgress) },
+                { icon: _jsx("span", { className: "dx-icon-check" }), name: SDKUI_Localizator.Completed, operationType: 'multiRow', onClick: (rowIds) => markAsStatus(getRowIdsAsArray(rowIds), Task_States.Completed) },
+                { icon: _jsx("span", { className: "dx-icon-taskstop" }), name: SDKUI_Localizator.Pending, operationType: 'multiRow', onClick: (rowIds) => markAsStatus(getRowIdsAsArray(rowIds), Task_States.Waiting) },
+                { icon: _jsx("span", { className: "dx-icon-clock" }), name: SDKUI_Localizator.Postponed, operationType: 'multiRow', onClick: (rowIds) => markAsStatus(getRowIdsAsArray(rowIds), Task_States.Deferred) }
             ]
         },
         {
             id: 'wgContextFilter',
-            text: showContextualWG ? SDKUI_Localizator.RemoveContextualFilter : SDKUI_Localizator.ApplyContextualFilter,
-            icon: 'filter',
+            name: showContextualWG ? SDKUI_Localizator.RemoveContextualFilter : SDKUI_Localizator.ApplyContextualFilter,
+            icon: _jsx("span", { className: "dx-icon-filter" }),
             onClick: () => { setShowContextualWG(prev => !prev); },
             disabled: false,
             beginGroup: true,
@@ -459,8 +466,8 @@ export const createTasksMenuItems = (taskDescriptor, showId, setShowId, showSear
         },
         {
             id: 'dossierContextFilter',
-            text: showContextualDossier ? SDKUI_Localizator.RemoveContextualFilter : SDKUI_Localizator.ApplyContextualFilter,
-            icon: 'filter',
+            name: showContextualDossier ? SDKUI_Localizator.RemoveContextualFilter : SDKUI_Localizator.ApplyContextualFilter,
+            icon: _jsx("span", { className: "dx-icon-filter" }),
             onClick: () => { setShowContextualDossier(prev => !prev); },
             disabled: false,
             beginGroup: !fromWG && !fromDocument,
@@ -468,38 +475,38 @@ export const createTasksMenuItems = (taskDescriptor, showId, setShowId, showSear
         },
         {
             id: 'documentContextFilter',
-            text: showContextualDocument ? SDKUI_Localizator.RemoveContextualFilter : SDKUI_Localizator.ApplyContextualFilter,
-            icon: 'filter',
+            name: showContextualDocument ? SDKUI_Localizator.RemoveContextualFilter : SDKUI_Localizator.ApplyContextualFilter,
+            icon: _jsx("span", { className: "dx-icon-filter" }),
             onClick: () => { setShowContextualDocument(prev => !prev); },
             disabled: false,
             beginGroup: !fromDossier && !fromWG,
             visible: fromDocument
         },
         {
-            icon: "event",
+            icon: _jsx("span", { className: "dx-icon-event" }),
             onClick: () => { if (handleGoToToday) {
                 handleGoToToday();
             } },
-            text: SDKUI_Localizator.GoToToday,
+            name: SDKUI_Localizator.GoToToday,
             disabled: false,
             beginGroup: true,
         },
         {
             beginGroup: true,
-            icon: showSearch ? "eyeclose" : "eyeopen",
+            icon: showSearch ? _jsx("span", { className: "dx-icon-eyeclose" }) : _jsx("span", { className: "dx-icon-eyeopen" }),
             onClick: () => setShowSearch(prevShowSearch => !prevShowSearch),
-            text: showSearch ? SDKUI_Localizator.HideSearch : SDKUI_Localizator.ShowSearch,
+            name: showSearch ? SDKUI_Localizator.HideSearch : SDKUI_Localizator.ShowSearch,
             disabled: false
         },
         {
-            icon: showId ? "eyeclose" : "eyeopen",
+            icon: showId ? _jsx("span", { className: "dx-icon-eyeclose" }) : _jsx("span", { className: "dx-icon-eyeopen" }),
             onClick: () => setShowId(prevShowId => !prevShowId),
-            text: showId ? SDKUI_Localizator.ID_Hide : SDKUI_Localizator.ID_Show,
+            name: showId ? SDKUI_Localizator.ID_Hide : SDKUI_Localizator.ID_Show,
             disabled: false
         },
         {
-            text: SDKUI_Localizator.Refresh,
-            icon: 'refresh',
+            name: SDKUI_Localizator.Refresh,
+            icon: _jsx("span", { className: "dx-icon-refresh" }),
             onClick: () => getAllTasks(),
             disabled: false,
         },
@@ -529,7 +536,7 @@ export const createTasksMenuItems = (taskDescriptor, showId, setShowId, showSear
             item.visible === undefined);
     }
     if (showGoToToday === false) {
-        filteredMenuItems = filteredMenuItems.filter(item => item.text !== SDKUI_Localizator.GoToToday);
+        filteredMenuItems = filteredMenuItems.filter(item => item.name !== SDKUI_Localizator.GoToToday);
     }
     return filteredMenuItems;
 };