@topconsultnpm/sdkui-react 6.20.0-dev1.59 → 6.20.0-dev1.60

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

@@ -187,10 +187,22 @@ const TMContextMenu = ({ items, trigger = 'right', children, target, externalCon
             });
         }
     }, [items, menuState.visible, externalControl, keepOpenOnClick]);
+    // Track when the menu was opened to prevent immediate close on iOS
+    const menuOpenedAtRef = useRef(0);
+    useEffect(() => {
+        if (menuState.visible) {
+            menuOpenedAtRef.current = Date.now();
+        }
+    }, [menuState.visible]);
     useEffect(() => {
         if (!menuState.visible)
             return;
         const handleClickOutside = (event) => {
+            // On iOS, prevent closing immediately after opening (within 300ms)
+            // This handles the case where touchend from long-press triggers touchstart listener
+            if (Date.now() - menuOpenedAtRef.current < 300) {
+                return;
+            }
             const target = event.target;
             // Check if click is inside main menu
             if (menuRef.current?.contains(target)) {

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

@@ -1,2 +1,5 @@
 export { default as ContextMenu } from './TMContextMenu';
 export type { TMContextMenuItemProps, TMContextMenuProps } from './types';
+export { useLongPress, triggerContextMenuEvent } from './useLongPress';
+export type { UseLongPressOptions } from './useLongPress';
+export { useIsIOS } from './hooks';

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

@@ -1 +1,3 @@
 export { default as ContextMenu } from './TMContextMenu';
+export { useLongPress, triggerContextMenuEvent } from './useLongPress';
+export { useIsIOS } from './hooks';

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

@@ -0,0 +1,21 @@
+export interface UseLongPressOptions {
+    containerRef: React.RefObject<HTMLElement>;
+    targetSelector: string | string[];
+    onLongPress: (event: {
+        clientX: number;
+        clientY: number;
+        target: HTMLElement;
+    }) => void;
+    onTouchStart?: (event: {
+        clientX: number;
+        clientY: number;
+        target: HTMLElement;
+        rowElement: HTMLElement;
+    }) => void;
+    duration?: number;
+    moveThreshold?: number;
+    hapticFeedback?: boolean;
+    enabled?: boolean;
+}
+export declare function useLongPress({ containerRef, targetSelector, onLongPress, onTouchStart, duration, moveThreshold, hapticFeedback, enabled, }: UseLongPressOptions): void;
+export declare function triggerContextMenuEvent(target: HTMLElement, clientX: number, clientY: number): void;

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

@@ -0,0 +1,112 @@
+import { useEffect, useRef } from 'react';
+import { useIsIOS } from './hooks';
+export function useLongPress({ containerRef, targetSelector, onLongPress, onTouchStart, duration = 500, moveThreshold = 10, hapticFeedback = true, enabled = true, }) {
+    const isIOS = useIsIOS();
+    const longPressTriggeredRef = useRef(false);
+    useEffect(() => {
+        if (!isIOS || !enabled || !containerRef.current)
+            return;
+        const container = containerRef.current;
+        let longPressTimeout = null;
+        let touchStartPos = null;
+        let longPressTarget = null;
+        const matchesSelector = (element) => {
+            const selectors = Array.isArray(targetSelector) ? targetSelector : [targetSelector];
+            for (const selector of selectors) {
+                const match = element.closest(selector);
+                if (match)
+                    return match;
+            }
+            return null;
+        };
+        const handleTouchStart = (e) => {
+            const touch = e.touches[0];
+            const target = touch.target;
+            // Check if target matches any of the specified selectors
+            const matchedElement = matchesSelector(target);
+            if (!matchedElement)
+                return;
+            touchStartPos = { x: touch.clientX, y: touch.clientY };
+            longPressTriggeredRef.current = false;
+            longPressTarget = target;
+            // Call optional onTouchStart callback
+            if (onTouchStart) {
+                onTouchStart({
+                    clientX: touch.clientX,
+                    clientY: touch.clientY,
+                    target,
+                    rowElement: matchedElement,
+                });
+            }
+            if (longPressTimeout)
+                clearTimeout(longPressTimeout);
+            longPressTimeout = setTimeout(() => {
+                longPressTriggeredRef.current = true;
+                // Haptic feedback
+                if (hapticFeedback && 'vibrate' in navigator) {
+                    navigator.vibrate(50);
+                }
+                // Call onLongPress callback
+                onLongPress({
+                    clientX: touch.clientX,
+                    clientY: touch.clientY,
+                    target: longPressTarget,
+                });
+                longPressTimeout = null;
+            }, duration);
+        };
+        const handleTouchMove = (e) => {
+            if (!touchStartPos || !longPressTimeout)
+                return;
+            const touch = e.touches[0];
+            const dx = Math.abs(touch.clientX - touchStartPos.x);
+            const dy = Math.abs(touch.clientY - touchStartPos.y);
+            // Cancel long-press if finger moved too much
+            if (dx > moveThreshold || dy > moveThreshold) {
+                clearTimeout(longPressTimeout);
+                longPressTimeout = null;
+            }
+        };
+        const handleTouchEnd = () => {
+            if (longPressTimeout) {
+                clearTimeout(longPressTimeout);
+                longPressTimeout = null;
+            }
+            touchStartPos = null;
+            longPressTarget = null;
+        };
+        // Prevent click after long-press to avoid unintended actions
+        const handleClick = (e) => {
+            if (longPressTriggeredRef.current) {
+                e.preventDefault();
+                e.stopPropagation();
+                e.stopImmediatePropagation();
+                longPressTriggeredRef.current = false;
+            }
+        };
+        container.addEventListener('touchstart', handleTouchStart, { passive: true });
+        container.addEventListener('touchmove', handleTouchMove, { passive: true });
+        container.addEventListener('touchend', handleTouchEnd);
+        container.addEventListener('touchcancel', handleTouchEnd);
+        container.addEventListener('click', handleClick, { capture: true });
+        return () => {
+            if (longPressTimeout)
+                clearTimeout(longPressTimeout);
+            container.removeEventListener('touchstart', handleTouchStart);
+            container.removeEventListener('touchmove', handleTouchMove);
+            container.removeEventListener('touchend', handleTouchEnd);
+            container.removeEventListener('touchcancel', handleTouchEnd);
+            container.removeEventListener('click', handleClick, { capture: true });
+        };
+    }, [isIOS, enabled, containerRef, targetSelector, onLongPress, onTouchStart, duration, moveThreshold, hapticFeedback]);
+}
+export function triggerContextMenuEvent(target, clientX, clientY) {
+    const contextMenuEvent = new MouseEvent('contextmenu', {
+        bubbles: true,
+        cancelable: true,
+        clientX,
+        clientY,
+        button: 2,
+    });
+    target.dispatchEvent(contextMenuEvent);
+}

package/lib/components/base/TMAccordionNew.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useEffect, useCallback } from 'react';
 import styled from 'styled-components';
-import { ContextMenu, LoadIndicator } from 'devextreme-react';
+import { LoadIndicator } from 'devextreme-react';
 import { LocalStorageService } from '@topconsultnpm/sdk-ts';
 import TMTooltip from './TMTooltip';
+import TMContextMenu from '../NewComponents/ContextMenu/TMContextMenu';
 const Container = styled.div `
     width: 100%;
     height: 100%;
@@ -154,12 +155,15 @@ const DEFAULT_COLORS = ['#339af0', '#fa5252', '#40c057', '#f59f00', '#e64980', '
 const TMAccordion = ({ groups, localStorageKey, selectedItem, onSelectedItemChange }) => {
     const [openAccordions, setOpenAccordions] = useState({});
     const [isInitialized, setIsInitialized] = useState(false);
-    const [anchorEl, setAnchorEl] = useState(null);
-    const [contextMenuItems, setContextMenuItems] = useState([]);
     const [focusedItem, setFocusedItem] = useState(undefined);
+    // Item context menu state
+    const [itemContextMenuVisible, setItemContextMenuVisible] = useState(false);
+    const [itemContextMenuPosition, setItemContextMenuPosition] = useState({ x: 0, y: 0 });
+    const [itemContextMenuItems, setItemContextMenuItems] = useState([]);
+    // Header context menu state
     const [headerContextGroupId, setHeaderContextGroupId] = useState(null);
     const [headerContextVisible, setHeaderContextVisible] = useState(false);
-    const [headerContextPosition, setHeaderContextPosition] = useState(null);
+    const [headerContextPosition, setHeaderContextPosition] = useState({ x: 0, y: 0 });
     useEffect(() => {
         const initialState = {};
         if (!groups || groups.length === 0) {
@@ -240,11 +244,21 @@ const TMAccordion = ({ groups, localStorageKey, selectedItem, onSelectedItemChan
         if (menuItems.length === 0) {
             return;
         }
-        setAnchorEl(event.currentTarget);
-        setContextMenuItems(menuItems);
+        // Convert to TMContextMenuItemProps format
+        const convertedItems = menuItems.map((mi) => ({
+            name: mi.text || mi.name || '',
+            // Only pass icon if it's a React element, not a string (DevExtreme used string icons)
+            icon: typeof mi.icon === 'string' ? undefined : mi.icon,
+            disabled: mi.disabled,
+            onClick: mi.onClick,
+            submenu: mi.items || mi.submenu,
+        }));
+        setItemContextMenuPosition({ x: event.clientX, y: event.clientY });
+        setItemContextMenuItems(convertedItems);
+        setItemContextMenuVisible(true);
     };
     const closeContextMenu = useCallback(() => {
-        setAnchorEl(null);
+        setItemContextMenuVisible(false);
     }, []);
     const handleHeaderContextMenu = (event, groupId) => {
         event.preventDefault();
@@ -260,12 +274,11 @@ const TMAccordion = ({ groups, localStorageKey, selectedItem, onSelectedItemChan
     };
     const closeHeaderContextMenu = useCallback(() => {
         setHeaderContextVisible(false);
-        setHeaderContextPosition(null);
         setHeaderContextGroupId(null);
     }, []);
     const headerContextMenuItems = headerContextGroupId ? [
         {
-            text: openAccordions[headerContextGroupId] ? 'Collassa' : 'Espandi',
+            name: openAccordions[headerContextGroupId] ? 'Collassa' : 'Espandi',
             onClick: () => {
                 toggleAccordion(headerContextGroupId);
                 closeHeaderContextMenu();
@@ -295,19 +308,19 @@ const TMAccordion = ({ groups, localStorageKey, selectedItem, onSelectedItemChan
         const color = getGroupColor(group, index);
         const isOpen = openAccordions[group.id] ?? true;
         if (group.customComponent) {
-            return (_jsxs(AccordionItem, { children: [_jsxs(AccordionHeader, { "$color": color, "$isOpen": isOpen, onClick: (e) => handleHeaderClick(e, group.id), onContextMenu: (e) => handleHeaderContextMenu(e, group.id), children: [_jsxs(AccordionTitle, { children: [group.icon, _jsx(TitleText, { children: group.title })] }), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '10px' }, children: [renderBadges(group, color), _jsx(ToggleIcon, { "$isOpen": isOpen, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: _jsx("path", { d: "M4 6L8 10L12 6", stroke: "#495057", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] })] }), isOpen && (_jsx(CustomComponentContainer, { children: group.customComponent }))] }, group.id));
+            return (_jsxs(AccordionItem, { children: [_jsxs(AccordionHeader, { id: `accordion-header-${group.id}`, "$color": color, "$isOpen": isOpen, onClick: (e) => handleHeaderClick(e, group.id), onContextMenu: (e) => handleHeaderContextMenu(e, group.id), children: [_jsxs(AccordionTitle, { children: [group.icon, _jsx(TitleText, { children: group.title })] }), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '10px' }, children: [renderBadges(group, color), _jsx(ToggleIcon, { "$isOpen": isOpen, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: _jsx("path", { d: "M4 6L8 10L12 6", stroke: "#495057", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] })] }), isOpen && (_jsx(CustomComponentContainer, { children: group.customComponent }))] }, group.id));
         }
         if (!group.dataSource || group.dataSource.length === 0)
             return null;
         if (!group.renderItem) {
-            return (_jsxs(AccordionItem, { children: [_jsxs(AccordionHeader, { "$color": color, "$isOpen": isOpen, onClick: (e) => handleHeaderClick(e, group.id), onContextMenu: (e) => handleHeaderContextMenu(e, group.id), children: [_jsxs(AccordionTitle, { children: [group.icon, _jsx(TitleText, { children: group.title })] }), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '10px' }, children: [renderBadges(group, color), _jsx(ToggleIcon, { "$isOpen": isOpen, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: _jsx("path", { d: "M4 6L8 10L12 6", stroke: "#495057", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] })] }), _jsx(AccordionContent, { "$isOpen": isOpen, "$maxHeight": 100, children: _jsxs(ErrorMessage, { children: ["\u26A0\uFE0F renderItem function is required for \"", group.title, "\" group"] }) })] }, group.id));
+            return (_jsxs(AccordionItem, { children: [_jsxs(AccordionHeader, { id: `accordion-header-${group.id}`, "$color": color, "$isOpen": isOpen, onClick: (e) => handleHeaderClick(e, group.id), onContextMenu: (e) => handleHeaderContextMenu(e, group.id), children: [_jsxs(AccordionTitle, { children: [group.icon, _jsx(TitleText, { children: group.title })] }), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '10px' }, children: [renderBadges(group, color), _jsx(ToggleIcon, { "$isOpen": isOpen, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: _jsx("path", { d: "M4 6L8 10L12 6", stroke: "#495057", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] })] }), _jsx(AccordionContent, { "$isOpen": isOpen, "$maxHeight": 100, children: _jsxs(ErrorMessage, { children: ["\u26A0\uFE0F renderItem function is required for \"", group.title, "\" group"] }) })] }, group.id));
         }
         const itemHeight = group.itemHeight || 80;
         const maxHeight = group.dataSource.length * itemHeight + 20;
-        return (_jsxs(AccordionItem, { children: [_jsxs(AccordionHeader, { "$color": color, "$isOpen": isOpen, onClick: (e) => handleHeaderClick(e, group.id), onContextMenu: (e) => handleHeaderContextMenu(e, group.id), children: [_jsxs(AccordionTitle, { children: [group.icon, _jsx(TitleText, { children: group.title })] }), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '10px' }, children: [renderBadges(group, color), _jsx(ToggleIcon, { "$isOpen": isOpen, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: _jsx("path", { d: "M4 6L8 10L12 6", stroke: "#495057", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] })] }), _jsx(AccordionContent, { "$isOpen": isOpen, "$maxHeight": maxHeight, children: _jsx(ItemsList, { children: group.dataSource.map((item, itemIndex) => {
+        return (_jsxs(AccordionItem, { children: [_jsxs(AccordionHeader, { id: `accordion-header-${group.id}`, "$color": color, "$isOpen": isOpen, onClick: (e) => handleHeaderClick(e, group.id), onContextMenu: (e) => handleHeaderContextMenu(e, group.id), children: [_jsxs(AccordionTitle, { children: [group.icon, _jsx(TitleText, { children: group.title })] }), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '10px' }, children: [renderBadges(group, color), _jsx(ToggleIcon, { "$isOpen": isOpen, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: _jsx("path", { d: "M4 6L8 10L12 6", stroke: "#495057", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] })] }), _jsx(AccordionContent, { "$isOpen": isOpen, "$maxHeight": maxHeight, children: _jsx(ItemsList, { children: group.dataSource.map((item, itemIndex) => {
                             const isSelected = selectedItem === item;
                             const isFocused = focusedItem === item;
-                            return (_jsx(ListItem, { "$isSelected": isSelected, "$color": color, onClick: () => handleItemClick(item, group), onDoubleClick: () => handleItemDoubleClick(item, group), onMouseEnter: () => setFocusedItem(item), onMouseLeave: () => setFocusedItem(undefined), onContextMenu: (e) => handleContextMenu(e, item, group), children: group.renderItem(item, isSelected, isFocused, color) }, itemIndex * 2));
+                            return (_jsx(ListItem, { id: `accordion-item-${group.id}-${itemIndex}`, className: "tm-accordion-list-item", "$isSelected": isSelected, "$color": color, onClick: () => handleItemClick(item, group), onDoubleClick: () => handleItemDoubleClick(item, group), onMouseEnter: () => setFocusedItem(item), onMouseLeave: () => setFocusedItem(undefined), onContextMenu: (e) => handleContextMenu(e, item, group), children: group.renderItem(item, isSelected, isFocused, color) }, itemIndex * 2));
                         }) }) })] }, group.id));
     };
     if (!isInitialized) {
@@ -321,6 +334,14 @@ const TMAccordion = ({ groups, localStorageKey, selectedItem, onSelectedItemChan
             event.preventDefault();
         }
     };
-    return (_jsxs(_Fragment, { children: [_jsx(Container, { onContextMenu: handleContainerContextMenu, children: groups.map((group, index) => renderAccordion(group, index)) }), anchorEl && contextMenuItems.length > 0 && (_jsx(ContextMenu, { dataSource: contextMenuItems, target: anchorEl, onHiding: closeContextMenu })), headerContextPosition && headerContextMenuItems.length > 0 && (_jsx(ContextMenu, { dataSource: headerContextMenuItems, visible: headerContextVisible, position: { my: 'left top', at: 'left top', offset: `${headerContextPosition.x} ${headerContextPosition.y}` }, onHiding: closeHeaderContextMenu }))] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Container, { onContextMenu: handleContainerContextMenu, children: groups.map((group, index) => renderAccordion(group, index)) }), _jsx(TMContextMenu, { items: itemContextMenuItems, target: ".tm-accordion-list-item", externalControl: {
+                    visible: itemContextMenuVisible,
+                    position: itemContextMenuPosition,
+                    onClose: closeContextMenu
+                } }), _jsx(TMContextMenu, { items: headerContextMenuItems, target: "[id^='accordion-header-']", externalControl: {
+                    visible: headerContextVisible,
+                    position: headerContextPosition,
+                    onClose: closeHeaderContextMenu
+                } })] }));
 };
 export default TMAccordion;

package/lib/components/base/TMDataGrid.js

@@ -5,6 +5,7 @@ import DataSource from 'devextreme/data/data_source';
 import { IconAll, IconSelected, IconVisible, SDKUI_Globals, SDKUI_Localizator } from '../../helper';
 import TMCounterContainer, { CounterItemKey } from './TMCounterContainer';
 import TMContextMenu from '../NewComponents/ContextMenu/TMContextMenu';
+import { useLongPress } from '../NewComponents/ContextMenu/useLongPress';
 ;
 export var TMDataGridPageSize;
 (function (TMDataGridPageSize) {
@@ -77,6 +78,35 @@ const TMDataGrid = React.forwardRef((props, ref) => {
             gridContainer.removeEventListener('contextmenu', handleContextMenu);
         };
     }, [customContextMenuItems]);
+    // iOS-specific: Handle touch for focused row change and long-press for context menu
+    useLongPress({
+        containerRef: gridContainerRef,
+        targetSelector: '.dx-data-row',
+        enabled: !!customContextMenuItems,
+        onTouchStart: ({ rowElement }) => {
+            // Change focused row immediately on touch (fixes focus issue)
+            if (!internalRef.current)
+                return;
+            const rowIndex = Array.from(rowElement.parentElement?.children || []).indexOf(rowElement);
+            const rowKey = internalRef.current.instance().getKeyByRowIndex(rowIndex);
+            if (rowKey !== undefined && rowKey !== focusedRowKey) {
+                internalRef.current.instance().option('focusedRowKey', rowKey);
+            }
+        },
+        onLongPress: ({ clientX, clientY, target }) => {
+            if (!internalRef.current)
+                return;
+            const rowElement = target.closest('.dx-data-row');
+            if (!rowElement)
+                return;
+            const rowIndex = Array.from(rowElement.parentElement?.children || []).indexOf(rowElement);
+            const rowKey = internalRef.current.instance().getKeyByRowIndex(rowIndex);
+            // Show context menu
+            setCustomContextMenuVisible(true);
+            setCustomContextMenuPosition({ x: clientX, y: clientY });
+            setCustomContextMenuRowKey(rowKey);
+        },
+    });
     // Creating a ref to store the timestamp of the last selection change
     const lastSelectionChangeTime = useRef(Date.now());
     useEffect(() => {

package/lib/components/editors/TMTextBox.js

@@ -9,7 +9,7 @@ import { TMExceptionBoxManager } from '../base/TMPopUp';
 import TMLayoutContainer, { TMLayoutItem } from '../base/TMLayout';
 import TMVilViewer from '../base/TMVilViewer';
 import TMTooltip from '../base/TMTooltip';
-import { ContextMenu } from 'devextreme-react';
+import TMContextMenu from '../NewComponents/ContextMenu/TMContextMenu';
 import { DeviceType, useDeviceType } from '../base/TMDeviceProvider';
 import TMChooserForm from '../forms/TMChooserForm';
 import { FormulaItemHelper } from './TMTextExpression';
@@ -94,7 +94,10 @@ const TMTextBox = ({ autoFocus, maxLength, labelColor, precision, fromModal = fa
         if (formulaItems && formulaItems.length > 0) {
             let menuItems = [];
             for (const formula of formulaItems) {
-                menuItems.push({ text: formula });
+                menuItems.push({
+                    name: formula,
+                    onClick: () => insertText(formula)
+                });
             }
             setFormulaMenuItems(menuItems);
         }
@@ -269,7 +272,7 @@ const TMTextBox = ({ autoFocus, maxLength, labelColor, precision, fromModal = fa
                                         onBlur?.(undefined);
                                     }, children: _jsx(IconClearButton, {}) }), buttons.map((buttonItem, index) => {
                                 return (_jsx(StyledTextBoxEditorButton, { onClick: buttonItem.onClick, children: _jsx(TMTooltip, { content: buttonItem.text, children: buttonItem.icon }) }, buttonItem.text));
-                            })] }), openFormulaItemsChooser(), formulaItems.length > 0 && (_jsx(ContextMenu, { dataSource: formulaMenuItems, target: `#text-${id}`, onItemClick: (e) => { insertText(e.itemData?.text ?? ''); } })), _jsx(TMVilViewer, { vil: validationItems })] }));
+                            })] }), openFormulaItemsChooser(), formulaItems.length > 0 && (_jsx(TMContextMenu, { items: formulaMenuItems, target: `#text-${id}` })), _jsx(TMVilViewer, { vil: validationItems })] }));
     };
     const renderedLeftLabelTextBox = () => {
         return (_jsxs(TMLayoutContainer, { direction: 'horizontal', children: [icon && _jsx(TMLayoutItem, { width: '20px', children: _jsx(StyledEditorIcon, { "$disabled": disabled, "$vil": validationItems, "$isModified": isModifiedWhen, children: icon }) }), _jsx(TMLayoutItem, { children: _jsxs(StyledEditorContainer, { "$width": width, children: [label && _jsx(StyledEditorLabel, { "$color": labelColor, "$isFocused": isFocused, "$labelPosition": labelPosition, "$disabled": disabled, children: label }), renderInputField()] }) })] }));

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

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { DcmtTypeListCacheService, SDK_Localizator } from '@topconsultnpm/sdk-ts';
-import { ContextMenu } from 'devextreme-react';
 import TMRelationViewer from './TMRelationViewer';
-import { genUniqueId, svgToString, IconMultipleSelection, IconCheckFile, IconDetailDcmts, SDKUI_Localizator, IconMail, IconDcmtTypeOnlyMetadata, IconCopy, IconMenuVertical, IconDataList, IconPreview, IconSearchCheck, IconBoard, IconDcmtTypeSys, IconShow } from '../../../helper';
+import TMContextMenu from '../../NewComponents/ContextMenu/TMContextMenu';
+import { genUniqueId, IconMultipleSelection, IconCheckFile, IconDetailDcmts, SDKUI_Localizator, IconMail, IconDcmtTypeOnlyMetadata, IconCopy, IconMenuVertical, IconDataList, IconPreview, IconSearchCheck, IconBoard, IconDcmtTypeSys, IconShow } from '../../../helper';
 import { FormModes, SearchResultContext } from '../../../ts';
 import { TMColors } from '../../../utils/theme';
 import ShowAlert from '../../base/TMAlert';
@@ -46,120 +46,105 @@ const TMMasterDetailDcmts = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallba
     }, []);
     const commandsMenuItems = [
         {
-            icon: svgToString(_jsx(IconMultipleSelection, { color: allowMultipleSelection ? TMColors.tertiary : TMColors.text_normal })),
-            text: "Selezione multipla",
-            operationType: 'singleRow',
+            icon: _jsx(IconMultipleSelection, { color: allowMultipleSelection ? TMColors.tertiary : TMColors.text_normal }),
+            name: "Selezione multipla",
             onClick: () => {
                 setAllowMultipleSelection(prev => !prev);
             }
         },
         {
-            icon: svgToString(_jsx(IconCheckFile, {})),
-            text: "Consenti dettagli con 0 documenti",
-            operationType: 'singleRow',
+            icon: _jsx(IconCheckFile, {}),
+            name: "Consenti dettagli con 0 documenti",
             onClick: () => {
                 setShowZeroDcmts(prev => !prev);
             }
         },
         {
-            icon: svgToString(_jsx(IconDetailDcmts, { transform: 'scale(-1, 1)' })),
-            text: SDKUI_Localizator.DcmtsMaster,
-            operationType: 'singleRow',
+            icon: _jsx(IconDetailDcmts, { transform: 'scale(-1, 1)' }),
+            name: SDKUI_Localizator.DcmtsMaster,
             disabled: !focusedItem?.isDcmt || !isForMaster,
             onClick: () => {
                 appendMasterDcmts?.(focusedItem?.tid, focusedItem?.did);
             }
         },
         {
-            icon: svgToString(_jsx(IconMail, {})),
-            text: "Invia per posta",
-            operationType: 'multiRow',
+            icon: _jsx(IconMail, {}),
+            name: "Invia per posta",
             disabled: false,
             beginGroup: true,
-            items: [
+            submenu: [
                 {
-                    icon: svgToString(_jsx(IconMail, {})),
-                    text: "I documenti selezionati",
-                    operationType: 'multiRow',
+                    icon: _jsx(IconMail, {}),
+                    name: "I documenti selezionati",
                     disabled: false,
                     onClick: () => ShowAlert({ message: "TODO", mode: 'info', title: `${"TODO"}`, duration: 3000 })
                 },
                 {
-                    icon: svgToString(_jsx(IconMail, {})),
-                    text: "I documenti di primo livello e tutti i documenti correlati",
-                    operationType: 'multiRow',
+                    icon: _jsx(IconMail, {}),
+                    name: "I documenti di primo livello e tutti i documenti correlati",
                     disabled: false,
                     onClick: () => ShowAlert({ message: "TODO", mode: 'info', title: `${"TODO"}`, duration: 3000 })
                 },
                 {
-                    icon: svgToString(_jsx(IconMail, {})),
-                    text: "I documenti di primo livello e i documenti correlati personalizzando l'operazione",
-                    operationType: 'multiRow',
+                    icon: _jsx(IconMail, {}),
+                    name: "I documenti di primo livello e i documenti correlati personalizzando l'operazione",
                     disabled: false,
                     onClick: () => ShowAlert({ message: "TODO", mode: 'info', title: `${"TODO"}`, duration: 3000 })
                 },
             ]
         },
         {
-            icon: svgToString(_jsx(IconDcmtTypeOnlyMetadata, {})),
-            text: "Unisci in un file PDF",
-            operationType: 'multiRow',
+            icon: _jsx(IconDcmtTypeOnlyMetadata, {}),
+            name: "Unisci in un file PDF",
             disabled: false,
-            items: [
+            submenu: [
                 {
-                    icon: svgToString(_jsx(IconDcmtTypeOnlyMetadata, {})),
-                    text: "I documenti selezionati",
-                    operationType: 'multiRow',
+                    icon: _jsx(IconDcmtTypeOnlyMetadata, {}),
+                    name: "I documenti selezionati",
                     disabled: false,
                     onClick: () => ShowAlert({ message: "TODO", mode: 'info', title: `${"TODO"}`, duration: 3000 })
                 },
                 {
-                    icon: svgToString(_jsx(IconDcmtTypeOnlyMetadata, {})),
-                    text: "I documenti di primo livello e tutti i documenti correlati",
-                    operationType: 'multiRow',
+                    icon: _jsx(IconDcmtTypeOnlyMetadata, {}),
+                    name: "I documenti di primo livello e tutti i documenti correlati",
                     disabled: false,
                     onClick: () => ShowAlert({ message: "TODO", mode: 'info', title: `${"TODO"}`, duration: 3000 })
                 },
                 {
-                    icon: svgToString(_jsx(IconDcmtTypeOnlyMetadata, {})),
-                    text: "I documenti di primo livello e i documenti correlati personalizzando l'operazione",
-                    operationType: 'multiRow',
+                    icon: _jsx(IconDcmtTypeOnlyMetadata, {}),
+                    name: "I documenti di primo livello e i documenti correlati personalizzando l'operazione",
                     disabled: false,
                     onClick: () => ShowAlert({ message: "TODO", mode: 'info', title: `${"TODO"}`, duration: 3000 })
                 },
             ]
         },
         {
-            icon: svgToString(_jsx(IconCopy, {})),
-            text: "Copia in una cartella",
-            operationType: 'multiRow',
+            icon: _jsx(IconCopy, {}),
+            name: "Copia in una cartella",
             disabled: false,
-            items: [
+            submenu: [
                 {
-                    icon: svgToString(_jsx(IconCopy, {})),
-                    text: "I documenti selezionati",
-                    operationType: 'multiRow',
+                    icon: _jsx(IconCopy, {}),
+                    name: "I documenti selezionati",
                     disabled: false,
                     onClick: () => ShowAlert({ message: "TODO", mode: 'info', title: `${"TODO"}`, duration: 3000 })
                 },
                 {
-                    icon: svgToString(_jsx(IconCopy, {})),
-                    text: "I documenti di primo livello e tutti i documenti correlati",
-                    operationType: 'multiRow',
+                    icon: _jsx(IconCopy, {}),
+                    name: "I documenti di primo livello e tutti i documenti correlati",
                     disabled: false,
                     onClick: () => ShowAlert({ message: "TODO", mode: 'info', title: `${"TODO"}`, duration: 3000 })
                 },
                 {
-                    icon: svgToString(_jsx(IconCopy, {})),
-                    text: "I documenti di primo livello e i documenti correlati personalizzando l'operazione",
-                    operationType: 'multiRow',
+                    icon: _jsx(IconCopy, {}),
+                    name: "I documenti di primo livello e i documenti correlati personalizzando l'operazione",
                     disabled: false,
                     onClick: () => ShowAlert({ message: "TODO", mode: 'info', title: `${"TODO"}`, duration: 3000 })
                 },
             ]
         }
     ];
-    const toolbar = _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '10px' }, children: [allowMultipleSelection && _jsx("p", { style: { color: TMColors.colorHeader, textAlign: 'center', padding: '1px 4px', borderRadius: '3px', display: 'flex' }, children: `${selectedItems.length} selezionati` }), allowNavigation && canPrev != undefined && _jsx(TMSaveFormButtonPrevious, { btnStyle: 'icon', iconColor: 'white', isModified: false, formMode: FormModes.ReadOnly, canPrev: canPrev, onPrev: onPrev }), allowNavigation && canNext != undefined && _jsx(TMSaveFormButtonNext, { btnStyle: 'icon', iconColor: 'white', isModified: false, formMode: FormModes.ReadOnly, canNext: canNext, onNext: onNext }), _jsx(IconMenuVertical, { id: `commands-detail-${id}`, color: 'white', cursor: 'pointer' }), _jsx(ContextMenu, { showEvent: 'click', dataSource: commandsMenuItems, target: `#commands-detail-${id}` })] });
+    const toolbar = _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '10px' }, children: [allowMultipleSelection && _jsx("p", { style: { color: TMColors.colorHeader, textAlign: 'center', padding: '1px 4px', borderRadius: '3px', display: 'flex' }, children: `${selectedItems.length} selezionati` }), allowNavigation && canPrev != undefined && _jsx(TMSaveFormButtonPrevious, { btnStyle: 'icon', iconColor: 'white', isModified: false, formMode: FormModes.ReadOnly, canPrev: canPrev, onPrev: onPrev }), allowNavigation && canNext != undefined && _jsx(TMSaveFormButtonNext, { btnStyle: 'icon', iconColor: 'white', isModified: false, formMode: FormModes.ReadOnly, canNext: canNext, onNext: onNext }), _jsx(TMContextMenu, { items: commandsMenuItems, trigger: 'left', children: _jsx(IconMenuVertical, { color: 'white', cursor: 'pointer' }) })] });
     const getTitle = () => isForMaster ? `${SDKUI_Localizator.DcmtsMaster} - ${dtdMaster?.nameLoc}` : SDKUI_Localizator.DcmtsDetail;
     const isMobile = deviceType === DeviceType.MOBILE;
     const tmTreeView = useMemo(() => _jsx(_Fragment, { children: !inputDcmts || inputDcmts.length === 0

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) => 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';
@@ -401,107 +402,116 @@ export const createTasksMenuItems = (taskDescriptor, showId, setShowId, showSear
     const isTaskFromAnotherUser = isTaskDescriptorDefined && areDifferentIDs(taskDescriptor.fromID, SDK_Globals.tmSession?.SessionDescr?.userID);
     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
+            disabled: false,
+            id: 'createContextualTask',
+            operationType: 'singleRow'
         },
         {
-            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
+            disabled: false,
+            operationType: 'singleRow'
         },
         {
-            text: SDKUI_Localizator.Update,
-            icon: 'edit',
+            name: SDKUI_Localizator.Update,
+            icon: _jsx("span", { className: "dx-icon-edit" }),
             onClick: openEditTaskForm,
-            operationType: 'singleRow',
-            disabled: fromDatagrid ? false : !isTaskDescriptorDefined
+            disabled: fromDatagrid ? false : !isTaskDescriptorDefined,
+            operationType: 'singleRow'
         },
         {
-            text: SDKUI_Localizator.Duplicate,
-            icon: 'copy',
+            name: SDKUI_Localizator.Duplicate,
+            icon: _jsx("span", { className: "dx-icon-copy" }),
             onClick: openDuplicateTaskForm,
-            operationType: 'singleRow',
-            disabled: fromDatagrid ? isTaskFromAnotherUser : !isTaskDescriptorDefined || isTaskFromAnotherUser
+            disabled: fromDatagrid ? isTaskFromAnotherUser : !isTaskDescriptorDefined || isTaskFromAnotherUser,
+            operationType: 'singleRow'
         },
         {
-            text: SDKUI_Localizator.Delete,
-            icon: 'trash',
+            name: SDKUI_Localizator.Delete,
+            icon: _jsx("span", { className: "dx-icon-trash" }),
             onClick: onDeleteCallback,
-            operationType: 'multiRow',
-            disabled: fromDatagrid ? isTaskFromAnotherUser : !isTaskDescriptorDefined || isTaskFromAnotherUser
+            disabled: fromDatagrid ? isTaskFromAnotherUser : !isTaskDescriptorDefined || isTaskFromAnotherUser,
+            operationType: 'multiRow'
         },
         {
-            icon: 'optionsgear',
-            text: SDKUI_Localizator.MarkAs,
+            name: SDKUI_Localizator.MarkAs,
+            icon: _jsx("span", { className: "dx-icon-optionsgear" }),
+            disabled: fromDatagrid ? false : !isTaskDescriptorDefined,
             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: [
+                { name: SDKUI_Localizator.NewFemale, icon: _jsx("span", { className: "dx-icon-product" }), onClick: ((rowIds) => markAsStatus(rowIds, Task_States.NotStarted)), operationType: 'multiRow' },
+                { name: SDKUI_Localizator.InProgress, icon: _jsx("span", { className: "dx-icon-refresh" }), onClick: ((rowIds) => markAsStatus(rowIds, Task_States.InProgress)), operationType: 'multiRow' },
+                { name: SDKUI_Localizator.Completed, icon: _jsx("span", { className: "dx-icon-check" }), onClick: ((rowIds) => markAsStatus(rowIds, Task_States.Completed)), operationType: 'multiRow' },
+                { name: SDKUI_Localizator.Pending, icon: _jsx("span", { className: "dx-icon-taskstop" }), onClick: ((rowIds) => markAsStatus(rowIds, Task_States.Waiting)), operationType: 'multiRow' },
+                { name: SDKUI_Localizator.Postponed, icon: _jsx("span", { className: "dx-icon-clock" }), onClick: ((rowIds) => markAsStatus(rowIds, Task_States.Deferred)), operationType: 'multiRow' }
             ]
         },
         {
-            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,
-            visible: fromWG
+            visible: fromWG,
+            id: 'wgContextFilter',
+            operationType: 'singleRow'
         },
         {
-            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,
-            visible: fromDossier
+            visible: fromDossier,
+            id: 'dossierContextFilter',
+            operationType: 'singleRow'
         },
         {
-            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
+            visible: fromDocument,
+            id: 'documentContextFilter',
+            operationType: 'singleRow'
         },
         {
-            icon: "event",
+            name: SDKUI_Localizator.GoToToday,
+            icon: _jsx("span", { className: "dx-icon-event" }),
             onClick: () => { if (handleGoToToday) {
                 handleGoToToday();
             } },
-            text: SDKUI_Localizator.GoToToday,
             disabled: false,
             beginGroup: true,
+            operationType: 'singleRow'
         },
         {
-            beginGroup: true,
-            icon: showSearch ? "eyeclose" : "eyeopen",
+            name: showSearch ? SDKUI_Localizator.HideSearch : SDKUI_Localizator.ShowSearch,
+            icon: _jsx("span", { className: showSearch ? "dx-icon-eyeclose" : "dx-icon-eyeopen" }),
             onClick: () => setShowSearch(prevShowSearch => !prevShowSearch),
-            text: showSearch ? SDKUI_Localizator.HideSearch : SDKUI_Localizator.ShowSearch,
-            disabled: false
+            disabled: false,
+            beginGroup: true,
+            operationType: 'singleRow'
         },
         {
-            icon: showId ? "eyeclose" : "eyeopen",
+            name: showId ? SDKUI_Localizator.ID_Hide : SDKUI_Localizator.ID_Show,
+            icon: _jsx("span", { className: showId ? "dx-icon-eyeclose" : "dx-icon-eyeopen" }),
             onClick: () => setShowId(prevShowId => !prevShowId),
-            text: showId ? SDKUI_Localizator.ID_Hide : SDKUI_Localizator.ID_Show,
-            disabled: false
+            disabled: false,
+            operationType: 'singleRow'
         },
         {
-            text: SDKUI_Localizator.Refresh,
-            icon: 'refresh',
+            name: SDKUI_Localizator.Refresh,
+            icon: _jsx("span", { className: "dx-icon-refresh" }),
             onClick: () => getAllTasks(),
             disabled: false,
+            operationType: 'singleRow'
         },
     ];
     // Apply filters
@@ -529,7 +539,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;
 };

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

@@ -5,7 +5,6 @@ import { TabPanel, Item } from 'devextreme-react/tab-panel';
 import { Priorities, ResultTypes, SDK_Globals, Task_States } from "@topconsultnpm/sdk-ts";
 import { calculateNumberOfDays, renderTaskIcons } from "./TMTasksUtilsView";
 import { getPriorityLocalizatorValue } from "../tasks/TMTasksUtils";
-import ContextMenu from 'devextreme-react/context-menu';
 import { calcResponsiveSizes, getExceptionMessage, SDKUI_Localizator, StyledTabItem, TMCountBadge } from "../../../helper";
 import { useDeviceType } from "../../base/TMDeviceProvider";
 import { FormModes } from "../../../ts";
@@ -17,6 +16,7 @@ import { TMResultManager } from "../../forms/TMResultDialog";
 import TMTasksCalendar from "./TMTasksCalendar";
 import TMTasksAgenda from "./TMTasksAgenda";
 import TMTaskForm from "./TMTaskForm";
+import { ContextMenu as TMContextMenu } from "../../NewComponents/ContextMenu";
 let abortController = new AbortController();
 const TMTasksView = (props) => {
     const { id, allTasks, getAllTasks, deleteTaskByIdsCallback, addTaskCallback, editTaskCallback, visualizedTasks, activeComponent, activeTabIndex, setActiveTabIndex, currentTask, setCurrentTask, assignedToMeCount, assignedByMeCount, allTasksFilteredCount, showId, setShowId, showSearch, setShowSearch, showContextualWG, setShowContextualWG, showContextualDossier, setShowContextualDossier, showContextualDocument, setShowContextualDocument, handleNavigateToWGs, handleNavigateToDossiers, taskContext, usersList, onOpenS4TViewerRequest, s4TViewerDialogComponent, afterTaskSaved, } = props;
@@ -519,13 +519,13 @@ const TMTasksView = (props) => {
         ];
     }, [showId]);
     const getFromOrToDatagridElement = (fromOrToDataSource, fromCell = false, toCell = false) => {
-        return _jsx(TMDataGrid, { dataSource: fromOrToDataSource, dataColumns: getDataColumns(fromCell, toCell), selection: { mode: 'multiple', showCheckBoxesMode: "always" }, focusedRowKey: focusedRowKey, selectedRowKeys: [...selectedRowKeys], onFocusedRowChanged: onFocusedRowChanged, onSelectionChanged: onSelectionChanged, onRowDblClick: onRowDblClick, onContextMenuPreparing: onContextMenuPreparing, showSearchPanel: showSearch, noDataText: SDKUI_Localizator.TasksEmpty, counterConfig: { show: true }, onHasFiltersChange: (active) => setHasFilters(active) });
+        return _jsx(TMDataGrid, { dataSource: fromOrToDataSource, dataColumns: getDataColumns(fromCell, toCell), selection: { mode: 'multiple', showCheckBoxesMode: "always" }, focusedRowKey: focusedRowKey, selectedRowKeys: [...selectedRowKeys], onFocusedRowChanged: onFocusedRowChanged, onSelectionChanged: onSelectionChanged, onRowDblClick: onRowDblClick, customContextMenuItems: menuItems, showSearchPanel: showSearch, noDataText: SDKUI_Localizator.TasksEmpty, counterConfig: { show: true }, onHasFiltersChange: (active) => setHasFilters(active) });
     };
     const getFromOrToAgendaElement = (fromOrToDataSource, fromCell = false, toCell = false) => {
-        return _jsxs("div", { style: { width: '100%', height: '100%', display: 'flex', flexDirection: 'column', overflow: "auto" }, children: [_jsx(ContextMenu, { dataSource: menuItems, target: `#tasks-agenda-wrapper-${id}` }), _jsx("div", { style: { width: "100%", height: "100%" }, children: _jsx(TMTasksAgenda, { id: id, showId: showId, showSearch: showSearch, visualizedTasks: fromOrToDataSource, fromCell: fromCell, toCell: toCell, currentAgendaDate: currentAgendaDate, setCurrentAgendaDate: setCurrentAgendaDate, openTaskForm: openTaskFormCallback, handleFocusedRowChange: handleFocusedRowChange }) })] });
+        return _jsx("div", { style: { width: '100%', height: '100%', display: 'flex', flexDirection: 'column', overflow: "auto" }, children: _jsxs("div", { style: { width: "100%", height: "100%" }, id: `agenda-container-${id}`, children: [_jsx(TMTasksAgenda, { id: id, showId: showId, showSearch: showSearch, visualizedTasks: fromOrToDataSource, fromCell: fromCell, toCell: toCell, currentAgendaDate: currentAgendaDate, setCurrentAgendaDate: setCurrentAgendaDate, openTaskForm: openTaskFormCallback, handleFocusedRowChange: handleFocusedRowChange }), _jsx(TMContextMenu, { items: menuItems, target: `#agenda-container-${id}` })] }) });
     };
     const getFromOrToCalendarElement = (fromOrToDataSource, fromCell = false, toCell = false) => {
-        return _jsxs("div", { style: { width: '100%', height: '100%', display: 'flex', flexDirection: 'column', overflow: "auto" }, children: [_jsx(ContextMenu, { dataSource: menuItems, target: `#tasks-calendar-wrapper-${id}` }), _jsx("div", { style: { width: "100%", height: "100%" }, children: _jsx(TMTasksCalendar, { id: id, visualizedTasks: fromOrToDataSource, showId: showId, fromCell: fromCell, toCell: toCell, showSearch: showSearch, currentCalendarDate: currentCalendarDate, setCurrentCalendarDate: setCurrentCalendarDate, openTaskForm: openTaskFormCallback, onDeleteCallback: onDeleteCallback, setCalendarStartDate: setCalendarStartDate, setCalendarEndDate: setCalendarEndDate, focusedRowKey: focusedRowKey, handleFocusedRowChange: handleFocusedRowChange }) })] });
+        return _jsx("div", { style: { width: '100%', height: '100%', display: 'flex', flexDirection: 'column', overflow: "auto" }, children: _jsx("div", { style: { width: "100%", height: "100%" }, children: _jsx(TMTasksCalendar, { id: id, visualizedTasks: fromOrToDataSource, showId: showId, fromCell: fromCell, toCell: toCell, showSearch: showSearch, currentCalendarDate: currentCalendarDate, setCurrentCalendarDate: setCurrentCalendarDate, openTaskForm: openTaskFormCallback, onDeleteCallback: onDeleteCallback, setCalendarStartDate: setCalendarStartDate, setCalendarEndDate: setCalendarEndDate, focusedRowKey: focusedRowKey, handleFocusedRowChange: handleFocusedRowChange }) }) });
     };
     return _jsxs("div", { style: { width: '100%', height: '100%' }, onContextMenu: (e) => e.preventDefault(), children: [_jsx(TMLayoutWaitingContainer, { direction: 'vertical', showWaitPanel: showWaitPanel, showWaitPanelPrimary: showPrimary, waitPanelTitle: waitPanelTitle, waitPanelTextPrimary: waitPanelTextPrimary, waitPanelValuePrimary: waitPanelValuePrimary, waitPanelMaxValuePrimary: waitPanelMaxValuePrimary, isCancelable: true, abortController: abortController, children: _jsxs(TabPanel, { width: "100%", height: "100%", animationEnabled: false, swipeEnabled: false, loop: false, showNavButtons: true, repaintChangesOnly: true, stylingMode: "primary", iconPosition: 'start', tabsPosition: 'top', selectedIndex: activeTabIndex, onSelectedIndexChange: onSelectedIndexChange, id: "task-centered-tab-title", children: [_jsx(Item, { title: SDKUI_Localizator.AssignedToMe, icon: "user", tabRender: (params) => {
                                 return _jsxs(StyledTabItem, { "$isSelected": activeTabIndex === AssignedTab.AssignedToMe, children: [_jsxs(TMTooltip, { content: SDKUI_Localizator.AssignedToMe, children: [_jsx("i", { className: `dx-icon-${params.icon}` }), "\u00A0", params.title, " ", (assignedToMeCount > 0) ? `(${assignedToMeCount})` : ''] }), newTaskCount > 0 && (_jsx(TMTooltip, { content: SDKUI_Localizator.NewAssignedActivitiesNumber + ": " + newTaskCount, children: _jsx(TMCountBadge, { children: newTaskCount }) }))] });

package/lib/components/grids/TMBlogsPost.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import { DossierEngine, LayoutModes, ObjectClasses, ResultTypes, SDK_Globals, TaskDescriptor, WorkingGroupEngine } from "@topconsultnpm/sdk-ts";
-import { ContextMenu } from "devextreme-react";
+import { ContextMenu as TMContextMenu } from "../NewComponents/ContextMenu";
 import { SDKUI_Localizator, Globalization, getExceptionMessage, TMConditionalWrapper, calcResponsiveSizes } from "../../helper";
 import TMToppyMessage from "../../helper/TMToppyMessage";
 import { useDcmtOperations } from "../../hooks/useDcmtOperations";
@@ -68,7 +68,8 @@ const TMBlogsPost = (props) => {
     const [showTaskForm, setShowTaskForm] = useState(false);
     // State to manage show selected file
     const [dcmtForm, setDcmtForm] = useState({ show: false, dcmt: undefined });
-    const [anchorEl, setAnchorEl] = useState(null);
+    const [menuVisible, setMenuVisible] = useState(false);
+    const [menuPosition, setMenuPosition] = useState({ x: 0, y: 0 });
     const [menuItems, setMenuItems] = useState([]);
     const [localShowWaitPanel, setLocalShowWaitPanel] = useState(false);
     const [localWaitPanelTitle, setLocalWaitPanelTitle] = useState('');
@@ -500,8 +501,8 @@ const TMBlogsPost = (props) => {
         const classId = targetItem ? targetItem.classID : undefined;
         if (contextMenuParams.isDownloadAttachmentEnabled && focusedAttachment !== undefined) {
             menuItems.push({
-                icon: "download",
-                text: 'Download',
+                icon: _jsx("span", { className: "dx-icon-download" }),
+                name: 'Download',
                 onClick: async () => {
                     await downloadDcmtsAsync([
                         { TID: focusedAttachment.TID, DID: focusedAttachment.DID, fileName: focusedAttachment.fileName }
@@ -511,26 +512,26 @@ const TMBlogsPost = (props) => {
         }
         if (contextMenuParams.isViewEditMetadata && focusedAttachment !== undefined) {
             menuItems.push({
-                icon: 'eyeopen',
-                text: SDKUI_Localizator.OpenForm,
+                icon: _jsx("span", { className: "dx-icon-eyeopen" }),
+                name: SDKUI_Localizator.OpenForm,
                 onClick: () => openDcmtForm(focusedAttachment),
             });
         }
         if (contextMenuParams.isCommentEnabled && showCommentFormCallback !== undefined) {
             menuItems.push({
-                icon: 'chat',
-                text: SDKUI_Localizator.Comment,
+                icon: _jsx("span", { className: "dx-icon-chat" }),
+                name: SDKUI_Localizator.Comment,
                 disabled: isGroupArchived ? true : false,
                 onClick: () => {
                     showCommentFormCallback(focusedAttachment);
                 },
-                beginGroup: true
+                beginGroup: menuItems.length > 0
             });
         }
         if (targetItem && contextMenuParams.isDeleteEnabled) {
             menuItems.push({
-                icon: "trash",
-                text: SDKUI_Localizator.Delete,
+                icon: _jsx("span", { className: "dx-icon-trash" }),
+                name: SDKUI_Localizator.Delete,
                 visible: contextMenuParams.isDeleteEnabled,
                 onClick: () => deleteOrUndeleteCommentCallback(targetItem, true),
                 disabled: isNotOwner || isDeleted || isGroupArchived,
@@ -538,24 +539,24 @@ const TMBlogsPost = (props) => {
         }
         if (targetItem && contextMenuParams.isRestoreEnabled) {
             menuItems.push({
-                icon: "undo",
-                text: SDKUI_Localizator.Restore,
+                icon: _jsx("span", { className: "dx-icon-undo" }),
+                name: SDKUI_Localizator.Restore,
                 onClick: () => deleteOrUndeleteCommentCallback(targetItem, false),
                 disabled: isNotOwner || (targetItem && (targetItem.isDel === undefined || targetItem.isDel === 0)),
             });
         }
         if (targetItem && contextMenuParams.isCopyToClipboardEnabled) {
             menuItems.push({
-                text: SDKUI_Localizator.CopyToClipboard,
-                icon: 'copy',
+                name: SDKUI_Localizator.CopyToClipboard,
+                icon: _jsx("span", { className: "dx-icon-copy" }),
                 disabled: false,
                 onClick: () => { copyInClipboard(targetItem); }
             });
         }
         if (contextMenuParams.isCreateContextualTask) {
             menuItems.push({
-                text: SDKUI_Localizator.CreateContextualTask,
-                icon: 'plus',
+                name: SDKUI_Localizator.CreateContextualTask,
+                icon: _jsx("span", { className: "dx-icon-plus" }),
                 onClick: () => openTaskFormCallback(targetItem),
                 disabled: isGroupArchived ? true : false,
                 beginGroup: true
@@ -563,15 +564,15 @@ const TMBlogsPost = (props) => {
         }
         if (targetItem && Boolean(classId && (classId === 'WG' || classId === 'DS'))) {
             menuItems.push({
-                icon: "eyeclose",
-                text: SDKUI_Localizator.Unfollow,
+                icon: _jsx("span", { className: "dx-icon-eyeclose" }),
+                name: SDKUI_Localizator.Unfollow,
                 onClick: () => (targetItem && classId) && unFollowCallback(targetItem, classId),
             });
         }
         if (contextMenuParams.isShowHideFilterEnabled) {
             menuItems.push({
-                icon: isHeaderHidden ? 'eyeopen' : 'eyeclose',
-                text: isHeaderHidden ? SDKUI_Localizator.ShowFilters : SDKUI_Localizator.HideFilters,
+                icon: _jsx("span", { className: isHeaderHidden ? "dx-icon-eyeopen" : "dx-icon-eyeclose" }),
+                name: isHeaderHidden ? SDKUI_Localizator.ShowFilters : SDKUI_Localizator.HideFilters,
                 onClick: toggleHeaderClick,
                 disabled: false,
                 beginGroup: true
@@ -579,23 +580,24 @@ const TMBlogsPost = (props) => {
         }
         if (contextMenuParams.isShowHideIDEnaled) {
             menuItems.push({
-                icon: localShowId ? 'eyeclose' : 'eyeopen',
+                icon: _jsx("span", { className: localShowId ? "dx-icon-eyeclose" : "dx-icon-eyeopen" }),
                 onClick: () => setLocalShowId(prevShowId => !prevShowId),
-                text: localShowId ? SDKUI_Localizator.ID_Hide : SDKUI_Localizator.ID_Show,
+                name: localShowId ? SDKUI_Localizator.ID_Hide : SDKUI_Localizator.ID_Show,
                 disabled: false,
             });
         }
         if (contextMenuParams.isRefreshEnabled && refreshCallback !== undefined) {
             menuItems.push({
-                icon: "refresh",
-                text: SDKUI_Localizator.Refresh,
+                icon: _jsx("span", { className: "dx-icon-refresh" }),
+                name: SDKUI_Localizator.Refresh,
                 onClick: refresh,
                 disabled: false,
             });
         }
         if (menuItems.length > 0) {
-            setAnchorEl(event.currentTarget);
+            setMenuPosition({ x: event.clientX, y: event.clientY });
             setMenuItems(menuItems);
+            setMenuVisible(true);
         }
     };
     const handlePostsToShowChange = (value) => {
@@ -606,7 +608,7 @@ const TMBlogsPost = (props) => {
         setSearchText(value);
     };
     const closeContextMenu = useCallback(() => {
-        setAnchorEl(null);
+        setMenuVisible(false);
     }, []);
     const handleNavigateToReference = (ref) => {
         switch (ref.objClass) {
@@ -630,7 +632,7 @@ const TMBlogsPost = (props) => {
     return _jsx("div", { ref: containerRef, style: { height: height, width: width }, 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: localShowWaitPanel, showWaitPanelPrimary: localShowPrimary, waitPanelTitle: localWaitPanelTitle, waitPanelTextPrimary: localWaitPanelTextPrimary, waitPanelValuePrimary: localWaitPanelValuePrimary, waitPanelMaxValuePrimary: localWaitPanelMaxValuePrimary, isCancelable: true, abortController: localAbortController, children: [_jsx(TMBlogHeader, { isVisible: currentHeader !== undefined && !isHeaderHidden, layoutMode: layoutMode, height: layoutMode === 'extended' ? "40px" : "70px", width: "100%", allPosts: posts, postsToShow: postsToShow, onPostsToShowChange: handlePostsToShowChange, categoryIdDataSource: categoryIdDataSource, appliedCategoryIdFilters: appliedCategoryIdFilters, setAppliedCategoryIdFilters: setAppliedCategoryIdFilters, searchText: searchText, onSearchChange: handleSearchChange }), _jsxs("div", { style: {
                             width: "100%",
                             height: currentHeader !== undefined && !isHeaderHidden ? `calc(100% - ${layoutMode === 'extended' ? "40px" : "70px"})` : "100%",
-                        }, children: [blogPosts.length === 0 && _jsx(TMToppyMessage, { message: searchText.length > 0 ? SDKUI_Localizator.NoMessagesFound : SDKUI_Localizator.NoMessages }), blogPosts.length > 0 && _jsxs("div", { tabIndex: 0, onKeyDown: handleKeyDown, onContextMenu: onContextMenu, style: {
+                        }, children: [blogPosts.length === 0 && _jsx(TMToppyMessage, { message: searchText.length > 0 ? SDKUI_Localizator.NoMessagesFound : SDKUI_Localizator.NoMessages }), blogPosts.length > 0 && _jsxs("div", { id: `${id}-blogs-container`, tabIndex: 0, onKeyDown: handleKeyDown, onContextMenu: onContextMenu, style: {
                                     height: '100%',
                                     width: '100%',
                                     outline: "none",
@@ -678,7 +680,11 @@ const TMBlogsPost = (props) => {
                                                             boxShadow: isFocused ? "0 4px 12px rgba(19, 85, 150, 0.6)" : "none",
                                                             cursor: 'pointer',
                                                         }, children: [_jsx(BlogPostTitle, { displayMode: displayMode, layoutMode: layoutMode, blogPost: blogPost, isSelected: isSelected, isOwnComment: isOwnComment, searchText: searchText, isSys: isSys, isHomeBlogPost: isHomeBlogPost, showId: localShowId, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers }), isNew && _jsx(NewBadge, { layoutMode: layoutMode }), _jsx("div", { style: { fontSize: '1rem', color: "#000", marginTop: "10px", overflow: "hidden" }, children: _jsx(TMHtmlContentDisplay, { markup: blogPost.description ?? '-', searchText: searchText, isSelected: isSelected }) }), showExtendedAttachments && blogPost.attachments && blogPost.attachments.length > 0 && (_jsx(TMBlogAttachments, { attachments: blogPost.attachments, layoutMode: layoutMode, isSelected: isSelected, searchText: searchText, dcmtTypeDescriptors: dcmtTypeDescriptors, treeFs: treeFs, draftLatestInfoMap: draftLatestInfoMap, archivedDocumentMap: archivedDocumentMap, handleAttachmentFocus: handleFocusedAttachment, openDcmtForm: openDcmtForm }))] }, `${id}-blogpost-${blogPost.id}`) })] }, "blog-post-wrapper-" + id + "-" + blogPost.id);
-                                    }), _jsx("div", { ref: bottomRef }), anchorEl && _jsx("div", { style: { position: 'fixed', zIndex: 9999 }, children: _jsx(ContextMenu, { dataSource: menuItems, target: anchorEl, onHiding: closeContextMenu }) })] }), (showTaskForm && handleNavigateToWGs && handleNavigateToDossiers && getAllTasks && deleteTaskByIdsCallback && addTaskCallback && editTaskCallback) && _jsx("div", { style: { height: "100%", width: "100%" }, children: _jsx(TMTaskForm, { id: -1, title: SDKUI_Localizator.ContextualTask, isModal: true, width: calcResponsiveSizes(deviceType, '700px', '700px', '95%'), height: calcResponsiveSizes(deviceType, '670px', '80%', '95%'), formMode: FormModes.Create, visualizedTasks: [], currentTask: currentTask, setCurrentTask: () => { }, selectedRowKeys: [], handleFocusedRowKeyChange: () => { }, onStatusChanged: () => { }, onSaved: onSavedTaskFormCallback, onClose: () => closeTaskFormCallback(), onCancel: () => closeTaskFormCallback(), usersList: participants, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers, isContextualCreate: true, taskContext: taskContext, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback }) }), (dcmtForm.dcmt && dcmtForm.dcmt.TID && dcmtForm.dcmt.DID) && _jsx(TMDcmtForm, { TID: Number(dcmtForm.dcmt.TID), DID: Number(dcmtForm.dcmt.DID), layoutMode: LayoutModes.Update, onClose: closeDcmtForm, isClosable: true, titleModal: SDKUI_Localizator.Attachment + ": " + dcmtForm.dcmt.fileName, isModal: true, widthModal: "95%", heightModal: "95%", allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers, onReferenceClick: handleNavigateToReference }), (showFloatingCommentButton && showCommentFormCallback && !(context?.engine === 'WorkingGroupEngine' && context?.object?.customData1 === 1)) && _jsx("button", { style: {
+                                    }), _jsx("div", { ref: bottomRef }), _jsx(TMContextMenu, { items: menuItems, target: `#${id}-blogs-container`, externalControl: {
+                                            visible: menuVisible,
+                                            position: menuPosition,
+                                            onClose: closeContextMenu,
+                                        } })] }), (showTaskForm && handleNavigateToWGs && handleNavigateToDossiers && getAllTasks && deleteTaskByIdsCallback && addTaskCallback && editTaskCallback) && _jsx("div", { style: { height: "100%", width: "100%" }, children: _jsx(TMTaskForm, { id: -1, title: SDKUI_Localizator.ContextualTask, isModal: true, width: calcResponsiveSizes(deviceType, '700px', '700px', '95%'), height: calcResponsiveSizes(deviceType, '670px', '80%', '95%'), formMode: FormModes.Create, visualizedTasks: [], currentTask: currentTask, setCurrentTask: () => { }, selectedRowKeys: [], handleFocusedRowKeyChange: () => { }, onStatusChanged: () => { }, onSaved: onSavedTaskFormCallback, onClose: () => closeTaskFormCallback(), onCancel: () => closeTaskFormCallback(), usersList: participants, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers, isContextualCreate: true, taskContext: taskContext, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback }) }), (dcmtForm.dcmt && dcmtForm.dcmt.TID && dcmtForm.dcmt.DID) && _jsx(TMDcmtForm, { TID: Number(dcmtForm.dcmt.TID), DID: Number(dcmtForm.dcmt.DID), layoutMode: LayoutModes.Update, onClose: closeDcmtForm, isClosable: true, titleModal: SDKUI_Localizator.Attachment + ": " + dcmtForm.dcmt.fileName, isModal: true, widthModal: "95%", heightModal: "95%", allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers, onReferenceClick: handleNavigateToReference }), (showFloatingCommentButton && showCommentFormCallback && !(context?.engine === 'WorkingGroupEngine' && context?.object?.customData1 === 1)) && _jsx("button", { style: {
                                     position: 'absolute',
                                     bottom: '18px',
                                     right: '20px',

package/package.json

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