@topconsultnpm/sdkui-react 6.20.0-dev1.75 → 6.20.0-dev1.77

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

@@ -19,7 +19,9 @@ const TMContextMenu = ({ items, trigger = 'right', children, target, externalCon
     const submenuTimeoutRef = useRef(null);
     const longPressTimeoutRef = useRef(null);
     const touchStartPos = useRef(null);
-    const { openLeft, openUp, isCalculated } = useMenuPosition(menuRef, menuState.position);
+    // Get current menu to pass items count to positioning hook
+    const currentMenu = menuState.submenuStack.at(-1) || items;
+    const { openLeft, openUp, isCalculated, needsScroll, maxHeight } = useMenuPosition(menuRef, menuState.position, currentMenu.length);
     const handleClose = () => {
         if (externalControl) {
             externalControl.onClose();
@@ -232,20 +234,26 @@ const TMContextMenu = ({ items, trigger = 'right', children, target, externalCon
         };
         document.addEventListener('mousedown', handleClickOutside);
         document.addEventListener('touchstart', handleClickOutside);
+        document.addEventListener('contextmenu', handleClickOutside); // Close on right-click outside
         return () => {
             document.removeEventListener('mousedown', handleClickOutside);
             document.removeEventListener('touchstart', handleClickOutside);
+            document.removeEventListener('contextmenu', handleClickOutside);
         };
     }, [menuState.visible]);
     const handleContextMenu = (e) => {
         if (trigger === 'right') {
             e.preventDefault();
-            setMenuState({
-                visible: true,
-                position: { x: e.clientX, y: e.clientY },
-                submenuStack: [items],
-                parentNames: [],
-            });
+            e.stopPropagation(); // Prevent event from bubbling to close other menus prematurely
+            // Small delay to ensure other menus receive the contextmenu event and close first
+            setTimeout(() => {
+                setMenuState({
+                    visible: true,
+                    position: { x: e.clientX, y: e.clientY },
+                    submenuStack: [items],
+                    parentNames: [],
+                });
+            }, 0);
         }
     };
     const handleClick = (e) => {
@@ -343,13 +351,17 @@ const TMContextMenu = ({ items, trigger = 'right', children, target, externalCon
             submenuTimeoutRef.current = null;
         }
         const rect = event.currentTarget.getBoundingClientRect();
-        // Calculate if submenu should open upward based on available space
-        // Estimate submenu height: ~35px per item (accounting for smaller padding) + container padding
+        // Calculate submenu height dynamically
         const estimatedSubmenuHeight = (item.submenu.length * 35) + 8;
         const spaceBelow = window.innerHeight - rect.top;
         const spaceAbove = rect.bottom;
-        // Open upward only if there's not enough space below AND there's more space above
+        const padding = 8;
+        // Determine if submenu should open upward
         const shouldOpenUp = spaceBelow < estimatedSubmenuHeight && spaceAbove > spaceBelow;
+        // Calculate if submenu needs scroll and max-height
+        const availableSpace = shouldOpenUp ? spaceAbove : spaceBelow;
+        const needsScroll = estimatedSubmenuHeight > availableSpace - padding;
+        const maxHeight = needsScroll ? availableSpace - padding : undefined;
         // Remove all submenus at this depth and deeper
         setHoveredSubmenus(prev => {
             const filtered = prev.filter(sub => sub.depth < depth);
@@ -362,6 +374,8 @@ const TMContextMenu = ({ items, trigger = 'right', children, target, externalCon
                     parentRect: rect,
                     depth: depth,
                     openUp: shouldOpenUp,
+                    needsScroll,
+                    maxHeight,
                 }
             ];
         });
@@ -413,7 +427,6 @@ const TMContextMenu = ({ items, trigger = 'right', children, target, externalCon
             return (_jsxs(S.MenuItem, { "$disabled": item.disabled, "$hasSubmenu": !!item.submenu && item.submenu.length > 0, "$beginGroup": item.beginGroup, onMouseDown: handleClick, onMouseEnter: (e) => !isMobile && handleMouseEnter(item, e, depth + 1), onMouseLeave: () => !isMobile && handleMouseLeave(depth + 1), title: item.tooltip, children: [_jsxs(S.MenuItemContent, { children: [item.icon && _jsx(S.IconWrapper, { children: item.icon }), _jsx(S.MenuItemName, { children: item.name })] }), item.rightIcon && item.onRightIconClick && (_jsx(S.RightIconButton, { onClick: handleRightIconClick, onMouseDown: (e) => e.stopPropagation(), "aria-label": `Action for ${item.name}`, children: item.rightIcon })), item.submenu && item.submenu.length > 0 && (_jsx(S.SubmenuIndicator, { "$isMobile": isMobile, children: isMobile ? '›' : '▸' }))] }, itemKey));
         });
     };
-    const currentMenu = menuState.submenuStack.at(-1) || items;
     const currentParentName = menuState.parentNames.at(-1) || '';
     return (_jsxs(_Fragment, { children: [!externalControl && children && (_jsx("div", { ref: triggerRef, onContextMenu: handleContextMenu, onClick: handleClick, onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd, onTouchCancel: handleTouchEnd, onKeyDown: (e) => {
                     if (e.key === 'Enter' || e.key === ' ') {
@@ -423,6 +436,6 @@ const TMContextMenu = ({ items, trigger = 'right', children, target, externalCon
                     display: 'inline-block',
                     WebkitTouchCallout: isIOS ? 'none' : undefined,
                     WebkitUserSelect: isIOS ? 'none' : undefined,
-                }, children: children })), menuState.visible && createPortal(_jsxs(_Fragment, { children: [_jsxs(S.MenuContainer, { ref: menuRef, "$x": menuState.position.x, "$y": menuState.position.y, "$openLeft": openLeft, "$openUp": openUp, "$isPositioned": isCalculated, "$externalControl": !!externalControl, children: [isMobile && menuState.parentNames.length > 0 && (_jsxs(S.MobileMenuHeader, { children: [_jsx(S.BackButton, { onClick: handleBack, "aria-label": "Go back", children: _jsx(IconArrowLeft, {}) }), _jsx(S.HeaderTitle, { children: currentParentName })] })), renderMenuItems(currentMenu, 0)] }), !isMobile && hoveredSubmenus.map((submenu, idx) => (_jsx(S.Submenu, { "$parentRect": submenu.parentRect, "$openUp": submenu.openUp, "data-submenu": "true", onMouseEnter: handleSubmenuMouseEnter, onMouseLeave: () => handleMouseLeave(submenu.depth), children: renderMenuItems(submenu.items, submenu.depth) }, `submenu-${submenu.depth}-${idx}`)))] }), document.body)] }));
+                }, children: children })), menuState.visible && createPortal(_jsxs(_Fragment, { children: [_jsxs(S.MenuContainer, { ref: menuRef, "$x": menuState.position.x, "$y": menuState.position.y, "$openLeft": openLeft, "$openUp": openUp, "$isPositioned": isCalculated, "$externalControl": !!externalControl, "$needsScroll": needsScroll, "$maxHeight": maxHeight, children: [isMobile && menuState.parentNames.length > 0 && (_jsxs(S.MobileMenuHeader, { children: [_jsx(S.BackButton, { onClick: handleBack, "aria-label": "Go back", children: _jsx(IconArrowLeft, {}) }), _jsx(S.HeaderTitle, { children: currentParentName })] })), renderMenuItems(currentMenu, 0)] }), !isMobile && hoveredSubmenus.map((submenu, idx) => (_jsx(S.Submenu, { "$parentRect": submenu.parentRect, "$openUp": submenu.openUp, "data-submenu": "true", onMouseEnter: handleSubmenuMouseEnter, onMouseLeave: () => handleMouseLeave(submenu.depth), children: renderMenuItems(submenu.items, submenu.depth) }, `submenu-${submenu.depth}-${idx}`)))] }), document.body)] }));
 };
 export default TMContextMenu;

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

@@ -5,10 +5,12 @@ interface Position {
     x: number;
     y: number;
 }
-export declare const useMenuPosition: (menuRef: React.RefObject<HTMLDivElement | null>, position: Position) => {
+export declare const useMenuPosition: (menuRef: React.RefObject<HTMLDivElement | null>, position: Position, itemsCount?: number) => {
     isCalculated: boolean;
     openLeft: boolean;
     openUp: boolean;
+    needsScroll: boolean;
+    maxHeight: number | undefined;
 };
 export declare const getContextMenuTarget: <T extends {
     id: string;

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

@@ -38,8 +38,8 @@ export const useClickOutside = (callback) => {
     }, [callback]);
     return ref;
 };
-export const useMenuPosition = (menuRef, position) => {
-    const [adjustedPosition, setAdjustedPosition] = useState({ openLeft: false, openUp: false });
+export const useMenuPosition = (menuRef, position, itemsCount) => {
+    const [adjustedPosition, setAdjustedPosition] = useState({ openLeft: false, openUp: false, needsScroll: false, maxHeight: undefined });
     const [isCalculated, setIsCalculated] = useState(false);
     useLayoutEffect(() => {
         if (!menuRef.current) {
@@ -49,14 +49,52 @@ export const useMenuPosition = (menuRef, position) => {
         const menuRect = menuRef.current.getBoundingClientRect();
         const viewportWidth = window.innerWidth;
         const viewportHeight = window.innerHeight;
+        const isMobile = viewportWidth <= 768;
         const spaceRight = viewportWidth - position.x;
         const spaceBottom = viewportHeight - position.y;
+        const spaceAbove = position.y;
+        const padding = 8; // Minimal padding from viewport edges - be more aggressive about using available space
+        // Use scrollHeight to get natural content height, not constrained height
+        const menuHeight = menuRef.current.scrollHeight;
+        // Mobile: Always calculate max-height based on position to prevent overflow
+        if (isMobile) {
+            const maxHeightFromBottom = spaceBottom - padding;
+            const maxHeightFromTop = spaceAbove - padding;
+            const mobileMaxHeight = Math.max(maxHeightFromBottom, maxHeightFromTop);
+            setAdjustedPosition({
+                openLeft: spaceRight < menuRect.width + 20,
+                openUp: maxHeightFromTop > maxHeightFromBottom && menuHeight > maxHeightFromBottom,
+                needsScroll: menuHeight > mobileMaxHeight,
+                maxHeight: mobileMaxHeight,
+            });
+            setIsCalculated(true);
+            return;
+        }
+        // Desktop: Check if menu is too tall to fit in either direction
+        const fitsBelow = menuHeight + padding <= spaceBottom;
+        const fitsAbove = menuHeight + padding <= spaceAbove;
+        const needsScroll = !fitsBelow && !fitsAbove;
+        // Calculate max height when scrolling is needed
+        let maxHeight = undefined;
+        let shouldOpenUp = false;
+        if (needsScroll) {
+            // When scrolling is needed, open in the direction with MORE space
+            const availableSpace = Math.max(spaceBottom, spaceAbove);
+            maxHeight = availableSpace - padding;
+            shouldOpenUp = spaceAbove > spaceBottom; // Open upward if more space above
+        }
+        else {
+            // Normal behavior: open up only if it fits above but not below
+            shouldOpenUp = !fitsBelow && fitsAbove;
+        }
         setAdjustedPosition({
             openLeft: spaceRight < menuRect.width + 20,
-            openUp: spaceBottom < menuRect.height + 20,
+            openUp: shouldOpenUp,
+            needsScroll,
+            maxHeight,
         });
         setIsCalculated(true);
-    }, [position, menuRef]);
+    }, [position, menuRef, itemsCount]); // Added itemsCount to recalculate when menu content changes
     return { ...adjustedPosition, isCalculated };
 };
 export const getContextMenuTarget = (event, focusedItem, selectedItem, dataSource, idPrefix, isMobile) => {

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

@@ -5,6 +5,8 @@ export declare const MenuContainer: import("styled-components/dist/types").IStyl
     $openUp: boolean;
     $isPositioned: boolean;
     $externalControl?: boolean;
+    $needsScroll?: boolean;
+    $maxHeight?: number;
 }>> & string;
 export declare const MenuItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $disabled?: boolean;
@@ -23,6 +25,8 @@ export declare const SubmenuIndicator: import("styled-components/dist/types").IS
 export declare const Submenu: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $parentRect: DOMRect;
     $openUp?: boolean;
+    $needsScroll?: boolean;
+    $maxHeight?: number;
 }>> & string;
 export declare const MobileMenuHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const BackButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;

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

@@ -38,6 +38,35 @@ export const MenuContainer = styled.div `
   border: 1px solid rgba(0, 0, 0, 0.06);
   opacity: ${props => props.$isPositioned ? 1 : 0};
   transition: opacity 0.05s ease-in;
+  
+  /* Add scrolling when menu is too tall to fit in either direction */
+  ${props => props.$needsScroll && props.$maxHeight && `
+    max-height: ${props.$maxHeight}px;
+    overflow-y: auto;
+    overflow-x: hidden;
+    
+    /* Smooth scrolling */
+    scroll-behavior: smooth;
+    
+    /* Custom scrollbar styling */
+    &::-webkit-scrollbar {
+      width: 8px;
+    }
+    
+    &::-webkit-scrollbar-track {
+      background: rgba(0, 0, 0, 0.05);
+      border-radius: 4px;
+    }
+    
+    &::-webkit-scrollbar-thumb {
+      background: rgba(0, 0, 0, 0.2);
+      border-radius: 4px;
+    }
+    
+    &::-webkit-scrollbar-thumb:hover {
+      background: rgba(0, 0, 0, 0.3);
+    }
+  `}
 
   /* Reset color inheritance from parent with !important to override panel header styles */
   & *:not(svg):not(.right-icon-btn):not(.right-icon-btn *) {
@@ -57,9 +86,9 @@ export const MenuContainer = styled.div `
 
   ${props => props.$externalControl && `
     @media (max-width: 768px) {
-      left: 100px !important;
-      right: 100px !important;
-      max-width: calc(100vw - 200px);
+      left: 75px !important;
+      right: 75px !important;
+      max-width: calc(100vw - 150px);
       width: auto;
       min-width: auto;
     }
@@ -74,7 +103,7 @@ export const MenuItem = styled.div `
   transition: all 0.15s ease;
   position: relative;
   user-select: none;
-  font-size: 13px;
+  font-size: var(--base-font-size, 13px);
   color: ${props => props.$disabled ? '#999' : '#1a1a1a'};
   font-weight: 500;
   ${props => props.$beginGroup && `
@@ -134,7 +163,7 @@ export const MenuItem = styled.div `
 
   @media (max-width: 768px) {
     padding: 4px 10px;
-    font-size: 12px;
+    font-size: calc(var(--base-font-size, 13px) * 0.92);
   }
 `;
 export const MenuItemContent = styled.div `
@@ -147,7 +176,7 @@ export const IconWrapper = styled.span `
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 14px;
+  font-size: calc(var(--base-font-size, 13px) * 1.08);
   width: 18px;
   height: 18px;
 `;
@@ -170,7 +199,7 @@ export const RightIconButton = styled.button.attrs({
   padding: 4px 8px;
   margin-left: 8px;
   border-radius: 6px;
-  font-size: 14px;
+  font-size: calc(var(--base-font-size, 13px) * 1.08);
   opacity: 0 !important;
   transition: opacity 0.15s ease, background 0.15s ease, transform 0.15s ease;
 
@@ -192,7 +221,7 @@ export const RightIconButton = styled.button.attrs({
 export const SubmenuIndicator = styled.span `
   display: flex;
   align-items: center;
-  font-size: 12px;
+  font-size: calc(var(--base-font-size, 13px) * 0.92);
   margin-left: 8px;
   opacity: 0.6;
   transition: transform 0.15s ease;
@@ -272,6 +301,69 @@ export const Submenu = styled.div `
   [data-theme='dark'] & *:not(svg):not(.right-icon-btn):not(.right-icon-btn *) {
     color: #e0e0e0 !important;
   }
+  
+  /* Dynamic scroll handling when submenu is too tall */
+  ${props => props.$needsScroll && props.$maxHeight ? `
+    max-height: ${props.$maxHeight}px;
+    overflow-y: auto;
+    overflow-x: hidden;
+    
+    /* Custom scrollbar styling for submenus */
+    &::-webkit-scrollbar {
+      width: 8px;
+    }
+    
+    &::-webkit-scrollbar-track {
+      background: rgba(0, 0, 0, 0.05);
+      border-radius: 4px;
+    }
+    
+    &::-webkit-scrollbar-thumb {
+      background: rgba(0, 0, 0, 0.2);
+      border-radius: 4px;
+    }
+    
+    &::-webkit-scrollbar-thumb:hover {
+      background: rgba(0, 0, 0, 0.3);
+    }
+  ` : `
+    /* Fallback max-height for submenus that fit */
+    max-height: calc(100vh - 40px);
+    overflow-y: auto;
+    overflow-x: hidden;
+    
+    &::-webkit-scrollbar {
+      width: 8px;
+    }
+    
+    &::-webkit-scrollbar-track {
+      background: rgba(0, 0, 0, 0.05);
+      border-radius: 4px;
+    }
+    
+    &::-webkit-scrollbar-thumb {
+      background: rgba(0, 0, 0, 0.2);
+      border-radius: 4px;
+    }
+    
+    &::-webkit-scrollbar-thumb:hover {
+      background: rgba(0, 0, 0, 0.3);
+    }
+  `}
+  
+  [data-theme='dark'] & {
+    &::-webkit-scrollbar-track {
+      background: rgba(255, 255, 255, 0.05);
+    }
+    
+    &::-webkit-scrollbar-thumb {
+      background: rgba(255, 255, 255, 0.2);
+    }
+    
+    &::-webkit-scrollbar-thumb:hover {
+      background: rgba(255, 255, 255, 0.3);
+    }
+  }
 `;
 export const MobileMenuHeader = styled.div `
   display: flex;
@@ -307,7 +399,7 @@ export const BackButton = styled.button `
 `;
 export const HeaderTitle = styled.h3 `
   margin: 0;
-  font-size: 16px;
+  font-size: calc(var(--base-font-size, 13px) * 1.23);
   font-weight: 600;
   color: #1a1a1a;
   flex: 1;

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

@@ -806,8 +806,8 @@ const TMSearchResultGrid = ({ openInOffice, fromDTD, allUsers, inputFocusedItem,
     const [focusedItem, setFocusedItem] = useState();
     const [visibleItems, setVisibleItems] = useState([]);
     const [pageSize, setPageSize] = useState(SDKUI_Globals.userSettings.searchSettings?.pageSize ?? TMDataGridPageSize.Large);
-    const { loadDataListsAsync, renderDataListCell } = useDataListItem();
-    const { loadUsersAsync, renderUserIdViewer } = useDataUserIdItem();
+    const { loadDataListsAsync, renderDataListCell, dataListsCache } = useDataListItem();
+    const { loadUsersAsync, renderUserIdViewer, usersCache } = useDataUserIdItem();
     useEffect(() => {
         if (deepCompare(inputFocusedItem, focusedItem))
             return;
@@ -959,28 +959,104 @@ const TMSearchResultGrid = ({ openInOffice, fromDTD, allUsers, inputFocusedItem,
             return { type: 'currency', currency: "JPY" };
         return undefined;
     }, []);
+    /**
+     * Genera la configurazione delle colonne della griglia con i relativi headerFilter.
+     * Per le colonne di tipo DataList e UserID, crea headerFilter con valori leggibili (nomi/descrizioni)
+     * invece delle chiavi numeriche, migliorando l'esperienza utente durante il filtraggio.
+     */
+    const generateColumns = useCallback(() => {
+        // Verifica che esistano colonne da processare
+        if (!searchResult?.dtdResult?.columns)
+            return [];
+        // Genera chiavi univoche per ogni colonna basate sul TID del risultato
+        const uniqueKeys = generateUniqueColumnKeys(searchResult?.dtdResult?.columns, searchResult?.fromTID);
+        const cols = [];
+        // Itera su ogni colonna del risultato di ricerca
+        searchResult.dtdResult.columns.map((col, index) => {
+            // Determina se la colonna è visibile (non nascosta)
+            const isVisible = col.extendedProperties?.["Visibility"] != "Hidden";
+            // Estrae il dominio dati della colonna (es. DataList, UserID, None)
+            const dataDomain = MetadataDataDomains[(col.extendedProperties?.["DataDomain"] ?? "None")];
+            // Estrae l'ID della DataList associata (se presente)
+            const dataListID = Number(col.extendedProperties?.["DataListID"]);
+            // Estrae la modalità di visualizzazione della DataList
+            const dataListViewMode = DataListViewModes[(col.extendedProperties?.["DataListViewMode"] ?? "None")];
+            // Inizializza la configurazione del filtro header
+            let headerFilterConfig = undefined;
+            // Configurazione headerFilter per colonne DataList
+            if (dataDomain === MetadataDataDomains.DataList && dataListID) {
+                // Recupera gli elementi della DataList dalla cache
+                const dataListItems = dataListsCache.current.get(dataListID);
+                if (dataListItems && dataListItems.length > 0) {
+                    // Crea il datasource per l'headerFilter mostrando il nome (text) ma filtrando per valore (value)
+                    headerFilterConfig = {
+                        dataSource: dataListItems
+                            .filter(item => item.name != null && item.value != null)
+                            .map(item => ({
+                            text: item.name,
+                            value: item.value
+                        }))
+                    };
+                }
+            }
+            // Configurazione headerFilter per colonne UserID
+            if (dataDomain === MetadataDataDomains.UserID) {
+                // Recupera tutti gli utenti dalla cache
+                const users = Array.from(usersCache.current.values());
+                if (users.length > 0) {
+                    // Crea il datasource per l'headerFilter mostrando nome utente completo (dominio\nome)
+                    headerFilterConfig = {
+                        dataSource: users
+                            .filter(user => user.name != null && user.id != null)
+                            .map(user => ({
+                            text: user.domain ? `${user.domain}\\${user.name}` : user.name,
+                            value: user.id
+                        }))
+                    };
+                }
+            }
+            // Aggiunge la configurazione della colonna all'array
+            cols.push({
+                dataField: uniqueKeys[index],
+                dataType: dataType(col),
+                visible: isVisible,
+                cellRender: (cellData) => cellRender(cellData, dataDomain, dataListID, dataListViewMode),
+                headerFilter: headerFilterConfig,
+                caption: col.caption,
+                format: getDisplayFormat(col),
+            });
+        });
+        return cols;
+    }, [searchResult, dataType, cellRender, getDisplayFormat, dataListsCache, usersCache]);
+    /**
+     * Effect che carica i dati necessari e genera le colonne della griglia.
+     * Esegue il caricamento delle cache (DataList e UserID) in parallelo prima di generare le colonne,
+     * garantendo che gli headerFilter abbiano tutti i dati disponibili.
+     */
     useEffect(() => {
+        // Verifica che siano disponibili il tipo documento e i risultati di ricerca
         if (fromDTD === undefined || searchResult === undefined)
             return;
         const loadColumnsAndData = async () => {
-            setFocusedItem(undefined); // resetta sempre prima
-            let cols = [];
-            // Generate unique keys for all columns
-            const uniqueKeys = generateUniqueColumnKeys(searchResult?.dtdResult?.columns, searchResult?.fromTID);
+            // Resetta l'elemento focalizzato quando si caricano nuovi dati
+            setFocusedItem(undefined);
+            // Set per raccogliere gli ID univoci da precaricare
             const dataListIDs = new Set();
             const userIDs = new Set();
+            // Itera sulle colonne per identificare quali DataList devono essere caricate
             searchResult?.dtdResult?.columns?.forEach((col) => {
                 const dataDomain = MetadataDataDomains[(col.extendedProperties?.["DataDomain"] ?? "None")];
                 const dataListID = Number(col.extendedProperties?.["DataListID"]);
+                // Se la colonna è di tipo DataList, aggiunge l'ID al set per il caricamento
                 if (dataDomain === MetadataDataDomains.DataList && dataListID) {
                     dataListIDs.add(dataListID);
                 }
             });
-            await loadDataListsAsync(dataListIDs);
-            // Carica gli UserID dalle righe
+            // Itera sulle righe per identificare quali UserID devono essere caricati
             searchResult?.dtdResult?.rows?.forEach((row) => {
                 searchResult?.dtdResult?.columns?.forEach((col, colIndex) => {
                     const dataDomain = MetadataDataDomains[(col.extendedProperties?.["DataDomain"] ?? "None")];
+                    // Se la colonna è di tipo UserID, estrae l'ID dalla riga e lo aggiunge al set
                     if (dataDomain === MetadataDataDomains.UserID) {
                         const userId = Number(row[colIndex]);
                         if (userId && userId > 0) {
@@ -989,28 +1065,20 @@ const TMSearchResultGrid = ({ openInOffice, fromDTD, allUsers, inputFocusedItem,
                     }
                 });
             });
-            await loadUsersAsync(userIDs);
-            searchResult?.dtdResult?.columns?.map((col, index) => {
-                const isVisible = col.extendedProperties?.["Visibility"] != "Hidden";
-                const dataDomain = MetadataDataDomains[(col.extendedProperties?.["DataDomain"] ?? "None")];
-                const dataListID = Number(col.extendedProperties?.["DataListID"]);
-                const dataListViewMode = DataListViewModes[(col.extendedProperties?.["DataListViewMode"] ?? "None")];
-                cols.push({
-                    dataField: uniqueKeys[index],
-                    dataType: dataType(col),
-                    visible: isVisible,
-                    cellRender: (cellData) => cellRender(cellData, dataDomain, dataListID, dataListViewMode),
-                    caption: col.caption,
-                    format: getDisplayFormat(col),
-                });
-            });
+            // Carica in parallelo le cache di DataList e UserID per ottimizzare le prestazioni
+            await Promise.all([
+                loadDataListsAsync(dataListIDs),
+                loadUsersAsync(userIDs)
+            ]);
+            // Genera colonne con cache popolate per garantire headerFilter completi
+            const cols = generateColumns();
             setColumns(cols);
+            // Converte i risultati di ricerca in un array semplice per la griglia
             let newDataSource = searchResultDescriptorToSimpleArray(searchResult);
             setDataSource(newDataSource);
-            // setFocusedItem(newDataSource && newDataSource.length > 0 ? newDataSource[0] : undefined);
         };
         loadColumnsAndData();
-    }, [searchResult, fromDTD, allUsers, loadDataListsAsync]);
+    }, [searchResult, fromDTD, allUsers, loadDataListsAsync, loadUsersAsync, generateColumns]);
     useEffect(() => {
         let newDataSource = searchResultDescriptorToSimpleArray(searchResult);
         setDataSource(newDataSource);
@@ -1058,6 +1126,10 @@ const TMSearchResultGrid = ({ openInOffice, fromDTD, allUsers, inputFocusedItem,
         onDblClick();
     }, [onDblClick]);
     const dataColumns = useMemo(() => {
+        // Aspetta che le colonne siano completamente caricate
+        if (!columns || columns.length === 0) {
+            return [];
+        }
         return [
             {
                 dataType: "object",

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 { TMContextMenuItemProps } from '../../NewComponents/ContextMenu';
+import { TMDataGridContextMenuItem } from '../../base/TMDataGrid';
 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) => TMContextMenuItemProps[];
+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 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,4 +1,3 @@
-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';
@@ -402,116 +401,107 @@ export const createTasksMenuItems = (taskDescriptor, showId, setShowId, showSear
     const isTaskFromAnotherUser = isTaskDescriptorDefined && areDifferentIDs(taskDescriptor.fromID, SDK_Globals.tmSession?.SessionDescr?.userID);
     const menuItems = [
         {
-            name: SDKUI_Localizator.CreateContextualTask,
-            icon: _jsx("span", { className: "dx-icon-plus" }),
-            onClick: () => { openTaskForm(FormModes.Create, undefined, true); },
-            disabled: false,
             id: 'createContextualTask',
-            operationType: 'singleRow'
+            text: SDKUI_Localizator.CreateContextualTask,
+            icon: 'plus',
+            onClick: () => { openTaskForm(FormModes.Create, undefined, true); },
+            disabled: false
         },
         {
-            name: SDKUI_Localizator.Create,
-            icon: _jsx("span", { className: "dx-icon-plus" }),
+            text: SDKUI_Localizator.Create,
+            icon: 'plus',
             onClick: () => { openTaskForm(FormModes.Create, undefined, false); },
-            disabled: false,
-            operationType: 'singleRow'
+            disabled: false
         },
         {
-            name: SDKUI_Localizator.Update,
-            icon: _jsx("span", { className: "dx-icon-edit" }),
+            text: SDKUI_Localizator.Update,
+            icon: 'edit',
             onClick: openEditTaskForm,
-            disabled: fromDatagrid ? false : !isTaskDescriptorDefined,
-            operationType: 'singleRow'
+            operationType: 'singleRow',
+            disabled: fromDatagrid ? false : !isTaskDescriptorDefined
         },
         {
-            name: SDKUI_Localizator.Duplicate,
-            icon: _jsx("span", { className: "dx-icon-copy" }),
+            text: SDKUI_Localizator.Duplicate,
+            icon: 'copy',
             onClick: openDuplicateTaskForm,
-            disabled: fromDatagrid ? isTaskFromAnotherUser : !isTaskDescriptorDefined || isTaskFromAnotherUser,
-            operationType: 'singleRow'
+            operationType: 'singleRow',
+            disabled: fromDatagrid ? isTaskFromAnotherUser : !isTaskDescriptorDefined || isTaskFromAnotherUser
         },
         {
-            name: SDKUI_Localizator.Delete,
-            icon: _jsx("span", { className: "dx-icon-trash" }),
+            text: SDKUI_Localizator.Delete,
+            icon: 'trash',
             onClick: onDeleteCallback,
-            disabled: fromDatagrid ? isTaskFromAnotherUser : !isTaskDescriptorDefined || isTaskFromAnotherUser,
-            operationType: 'multiRow'
+            operationType: 'multiRow',
+            disabled: fromDatagrid ? isTaskFromAnotherUser : !isTaskDescriptorDefined || isTaskFromAnotherUser
         },
         {
-            name: SDKUI_Localizator.MarkAs,
-            icon: _jsx("span", { className: "dx-icon-optionsgear" }),
-            disabled: fromDatagrid ? false : !isTaskDescriptorDefined,
+            icon: 'optionsgear',
+            text: SDKUI_Localizator.MarkAs,
             id: "markAs",
             operationType: 'multiRow',
-            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' }
+            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) }
             ]
         },
         {
-            name: showContextualWG ? SDKUI_Localizator.RemoveContextualFilter : SDKUI_Localizator.ApplyContextualFilter,
-            icon: _jsx("span", { className: "dx-icon-filter" }),
+            id: 'wgContextFilter',
+            text: showContextualWG ? SDKUI_Localizator.RemoveContextualFilter : SDKUI_Localizator.ApplyContextualFilter,
+            icon: 'filter',
             onClick: () => { setShowContextualWG(prev => !prev); },
             disabled: false,
             beginGroup: true,
-            visible: fromWG,
-            id: 'wgContextFilter',
-            operationType: 'singleRow'
+            visible: fromWG
         },
         {
-            name: showContextualDossier ? SDKUI_Localizator.RemoveContextualFilter : SDKUI_Localizator.ApplyContextualFilter,
-            icon: _jsx("span", { className: "dx-icon-filter" }),
+            id: 'dossierContextFilter',
+            text: showContextualDossier ? SDKUI_Localizator.RemoveContextualFilter : SDKUI_Localizator.ApplyContextualFilter,
+            icon: 'filter',
             onClick: () => { setShowContextualDossier(prev => !prev); },
             disabled: false,
             beginGroup: !fromWG && !fromDocument,
-            visible: fromDossier,
-            id: 'dossierContextFilter',
-            operationType: 'singleRow'
+            visible: fromDossier
         },
         {
-            name: showContextualDocument ? SDKUI_Localizator.RemoveContextualFilter : SDKUI_Localizator.ApplyContextualFilter,
-            icon: _jsx("span", { className: "dx-icon-filter" }),
+            id: 'documentContextFilter',
+            text: showContextualDocument ? SDKUI_Localizator.RemoveContextualFilter : SDKUI_Localizator.ApplyContextualFilter,
+            icon: 'filter',
             onClick: () => { setShowContextualDocument(prev => !prev); },
             disabled: false,
             beginGroup: !fromDossier && !fromWG,
-            visible: fromDocument,
-            id: 'documentContextFilter',
-            operationType: 'singleRow'
+            visible: fromDocument
         },
         {
-            name: SDKUI_Localizator.GoToToday,
-            icon: _jsx("span", { className: "dx-icon-event" }),
+            icon: "event",
             onClick: () => { if (handleGoToToday) {
                 handleGoToToday();
             } },
+            text: SDKUI_Localizator.GoToToday,
             disabled: false,
             beginGroup: true,
-            operationType: 'singleRow'
         },
         {
-            name: showSearch ? SDKUI_Localizator.HideSearch : SDKUI_Localizator.ShowSearch,
-            icon: _jsx("span", { className: showSearch ? "dx-icon-eyeclose" : "dx-icon-eyeopen" }),
-            onClick: () => setShowSearch(prevShowSearch => !prevShowSearch),
-            disabled: false,
             beginGroup: true,
-            operationType: 'multiRow'
+            icon: showSearch ? "eyeclose" : "eyeopen",
+            onClick: () => setShowSearch(prevShowSearch => !prevShowSearch),
+            text: showSearch ? SDKUI_Localizator.HideSearch : SDKUI_Localizator.ShowSearch,
+            disabled: false
         },
         {
-            name: showId ? SDKUI_Localizator.ID_Hide : SDKUI_Localizator.ID_Show,
-            icon: _jsx("span", { className: showId ? "dx-icon-eyeclose" : "dx-icon-eyeopen" }),
+            icon: showId ? "eyeclose" : "eyeopen",
             onClick: () => setShowId(prevShowId => !prevShowId),
-            disabled: false,
-            operationType: 'multiRow'
+            text: showId ? SDKUI_Localizator.ID_Hide : SDKUI_Localizator.ID_Show,
+            disabled: false
         },
         {
-            name: SDKUI_Localizator.Refresh,
-            icon: _jsx("span", { className: "dx-icon-refresh" }),
+            text: SDKUI_Localizator.Refresh,
+            icon: 'refresh',
             onClick: () => getAllTasks(),
             disabled: false,
-            operationType: 'multiRow'
         },
     ];
     // Apply filters
@@ -539,7 +529,7 @@ export const createTasksMenuItems = (taskDescriptor, showId, setShowId, showSear
             item.visible === undefined);
     }
     if (showGoToToday === false) {
-        filteredMenuItems = filteredMenuItems.filter(item => item.name !== SDKUI_Localizator.GoToToday);
+        filteredMenuItems = filteredMenuItems.filter(item => item.text !== SDKUI_Localizator.GoToToday);
     }
     return filteredMenuItems;
 };

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

@@ -5,6 +5,7 @@ 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";
@@ -16,7 +17,6 @@ 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, customContextMenuItems: menuItems, 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, onContextMenuPreparing: onContextMenuPreparing, showSearchPanel: showSearch, noDataText: SDKUI_Localizator.TasksEmpty, counterConfig: { show: true }, onHasFiltersChange: (active) => setHasFilters(active) });
     };
     const getFromOrToAgendaElement = (fromOrToDataSource, fromCell = false, toCell = false) => {
-        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}` })] }) });
+        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 }) })] });
     };
     const getFromOrToCalendarElement = (fromOrToDataSource, fromCell = false, toCell = false) => {
-        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%', 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 _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/query/TMQueryEditor.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { QueryDescriptor, ValidationItem } from '@topconsultnpm/sdk-ts';
 import { ITMApplyFormProps, FormModes } from '../../ts';
+import type { TMContextMenuItemProps } from '../NewComponents/ContextMenu/types';
 export declare const StyledRowItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const StyledItemWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $borderRadius?: string;
@@ -54,5 +55,5 @@ export interface ITMQdDropDownMenuProps {
     backgroundColor?: string;
     disabled?: boolean;
     borderRadius?: string;
-    items?: any[];
+    items?: TMContextMenuItemProps[];
 }

package/lib/components/query/TMQueryEditor.js

@@ -3,7 +3,7 @@ import { useCallback, useEffect, useState } from 'react';
 import { SDK_Localizator, AccessLevels, OnJoinItem, JoinTypes, PlatformObjectValidator, MetadataDataDomains, DcmtTypeListCacheService, JoinItem, MetadataDataTypes, OrderByItem, QueryFunctions, QueryOperators, ResultTypes, SelectItem, SDK_Globals, UserListCacheService, WhereItem, SearchEngine, SelectItemVisibilities, DataListCacheService, QueryValidatorOptions, TMPropertyNames, AppModules, LayoutModes } from '@topconsultnpm/sdk-ts';
 import styled from 'styled-components';
 import Accordion, { Item } from 'devextreme-react/accordion';
-import { SDKUI_Localizator, IconSearch, IconCount, getQueryCountAsync, calcIsModified, IconClear, IconAddCircleOutline, IconDotsVerticalCircleOutline, IconHide, IconShow, IconDraggabledots, genUniqueId, LocalizeQueryOperators, LocalizeQueryFunctions, LocalizeQueryJoinTypes, IconArchiveDoc, IconArrowRight, svgToString, SDKUI_Globals } from '../../helper';
+import { SDKUI_Localizator, IconSearch, IconCount, getQueryCountAsync, calcIsModified, IconClear, IconAddCircleOutline, IconDotsVerticalCircleOutline, IconHide, IconShow, IconDraggabledots, genUniqueId, LocalizeQueryOperators, LocalizeQueryFunctions, LocalizeQueryJoinTypes, IconArchiveDoc, IconArrowRight, SDKUI_Globals } from '../../helper';
 import { displayMetadataValue, getDcmtTypesByQdAsync, getTIDsByQd, IsParametricQuery, prepareQdForSearchAsync } from '../../helper/queryHelper';
 import { useOutsideClick } from '../../hooks/useOutsideClick';
 import { FormModes, SearchResultContext } from '../../ts';
@@ -27,7 +27,7 @@ import { useApplyForm } from '../../hooks/useForm';
 import ShowAlert from '../base/TMAlert';
 import { TMDynDataListItemChooserForm } from '../choosers/TMDynDataListItemChooser';
 import TMMetadataEditor from '../editors/TMMetadataEditor';
-import { ContextMenu } from 'devextreme-react';
+import { ContextMenu } from '../NewComponents/ContextMenu';
 import { useQueryParametersDialog } from '../../hooks/useQueryParametersDialog';
 import TMSearchResult from '../features/search/TMSearchResult';
 export const StyledRowItem = styled.div ` display: flex; flex-direction: row; align-items: center; justify-content: flex-start; margin-bottom: 5px; gap: 3px; `;
@@ -244,11 +244,11 @@ const TMQueryEditor = ({ formMode, inputData, onQDChanged, isExpertMode, showDis
     };
     const getJoinTypesMenuItems = (index) => {
         let items = [
-            { text: LocalizeQueryJoinTypes(JoinTypes.InnerJoin), onClick: () => onChange_JoinItem_JoinType(JoinTypes.InnerJoin, index) },
-            { text: LocalizeQueryJoinTypes(JoinTypes.LeftOuterJoin), onClick: () => onChange_JoinItem_JoinType(JoinTypes.LeftOuterJoin, index) },
-            { text: LocalizeQueryJoinTypes(JoinTypes.RightOuterJoin), onClick: () => onChange_JoinItem_JoinType(JoinTypes.RightOuterJoin, index) },
-            { text: LocalizeQueryJoinTypes(JoinTypes.FullOuterJoin), onClick: () => onChange_JoinItem_JoinType(JoinTypes.FullOuterJoin, index) },
-            { text: LocalizeQueryJoinTypes(JoinTypes.CrossJoin), onClick: () => onChange_JoinItem_JoinType(JoinTypes.CrossJoin, index) }
+            { name: LocalizeQueryJoinTypes(JoinTypes.InnerJoin), onClick: () => onChange_JoinItem_JoinType(JoinTypes.InnerJoin, index) },
+            { name: LocalizeQueryJoinTypes(JoinTypes.LeftOuterJoin), onClick: () => onChange_JoinItem_JoinType(JoinTypes.LeftOuterJoin, index) },
+            { name: LocalizeQueryJoinTypes(JoinTypes.RightOuterJoin), onClick: () => onChange_JoinItem_JoinType(JoinTypes.RightOuterJoin, index) },
+            { name: LocalizeQueryJoinTypes(JoinTypes.FullOuterJoin), onClick: () => onChange_JoinItem_JoinType(JoinTypes.FullOuterJoin, index) },
+            { name: LocalizeQueryJoinTypes(JoinTypes.CrossJoin), onClick: () => onChange_JoinItem_JoinType(JoinTypes.CrossJoin, index) }
         ];
         return items;
     };
@@ -335,24 +335,24 @@ const TMQueryEditor = ({ formMode, inputData, onQDChanged, isExpertMode, showDis
     };
     const getQueryFunctionsMenuItems = (si, index) => {
         let items = [];
-        items.push({ text: LocalizeQueryFunctions(QueryFunctions.None), onClick: () => onChange_SelectItem_QueryFunction(QueryFunctions.None, index) });
-        items.push({ text: LocalizeQueryFunctions(QueryFunctions.Count), onClick: () => onChange_SelectItem_QueryFunction(QueryFunctions.Count, index) });
-        items.push({ text: LocalizeQueryFunctions(QueryFunctions.Min), onClick: () => onChange_SelectItem_QueryFunction(QueryFunctions.Min, index) });
-        items.push({ text: LocalizeQueryFunctions(QueryFunctions.Max), onClick: () => onChange_SelectItem_QueryFunction(QueryFunctions.Max, index) });
+        items.push({ name: LocalizeQueryFunctions(QueryFunctions.None), onClick: () => onChange_SelectItem_QueryFunction(QueryFunctions.None, index) });
+        items.push({ name: LocalizeQueryFunctions(QueryFunctions.Count), onClick: () => onChange_SelectItem_QueryFunction(QueryFunctions.Count, index) });
+        items.push({ name: LocalizeQueryFunctions(QueryFunctions.Min), onClick: () => onChange_SelectItem_QueryFunction(QueryFunctions.Min, index) });
+        items.push({ name: LocalizeQueryFunctions(QueryFunctions.Max), onClick: () => onChange_SelectItem_QueryFunction(QueryFunctions.Max, index) });
         let dataType = getMetadataDataType(si.tid, si.mid);
         if (dataType == MetadataDataTypes.Number)
-            items.push({ text: LocalizeQueryFunctions(QueryFunctions.Sum), onClick: () => onChange_SelectItem_QueryFunction(QueryFunctions.Sum, index) });
+            items.push({ name: LocalizeQueryFunctions(QueryFunctions.Sum), onClick: () => onChange_SelectItem_QueryFunction(QueryFunctions.Sum, index) });
         return items;
     };
     const getSelectMenuItems = (index) => {
         let items = [];
-        items.push({ text: SDKUI_Localizator.AddAbove, onClick: () => onAdd_SelectItem(index) });
-        items.push({ text: SDKUI_Localizator.AddBelow, onClick: () => onAdd_SelectItem(index + 1) });
+        items.push({ name: SDKUI_Localizator.AddAbove, onClick: () => onAdd_SelectItem(index) });
+        items.push({ name: SDKUI_Localizator.AddBelow, onClick: () => onAdd_SelectItem(index + 1) });
         for (const tid_alias of qdTIDs) {
-            items.push({ text: `${SDKUI_Localizator.AddAlls} ${dcmtTypesList.length > 1 ? `(${getDisplayAlias(getDcmtTypeName(tid_alias.tid), tid_alias.alias)})` : ""}`, onClick: () => onAddAll_SelectItem(tid_alias) });
+            items.push({ name: `${SDKUI_Localizator.AddAlls} ${dcmtTypesList.length > 1 ? `(${getDisplayAlias(getDcmtTypeName(tid_alias.tid), tid_alias.alias)})` : ""}`, onClick: () => onAddAll_SelectItem(tid_alias) });
         }
-        items.push({ text: SDKUI_Localizator.Remove, onClick: () => onRemove_SelectItem(index) });
-        items.push({ text: SDKUI_Localizator.RemoveAll, onClick: () => setFormData({ ...formData, select: undefined }) });
+        items.push({ name: SDKUI_Localizator.Remove, onClick: () => onRemove_SelectItem(index) });
+        items.push({ name: SDKUI_Localizator.RemoveAll, onClick: () => setFormData({ ...formData, select: undefined }) });
         return items;
     };
     // #endregion
@@ -441,59 +441,59 @@ const TMQueryEditor = ({ formMode, inputData, onQDChanged, isExpertMode, showDis
     const onRemove_WhereItem = (index) => { setFormData({ ...formData, where: formData?.where?.filter((o, i) => i !== index) }); };
     const getQueryOperatorsMenuItems = (wi, index) => {
         let items = [];
-        items.push({ text: LocalizeQueryOperators(QueryOperators.Equal), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.Equal, index) });
-        items.push({ text: LocalizeQueryOperators(QueryOperators.NotEqual), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.NotEqual, index) });
-        items.push({ text: LocalizeQueryOperators(QueryOperators.IsNull), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.IsNull, index) });
-        items.push({ text: LocalizeQueryOperators(QueryOperators.IsNotNull), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.IsNotNull, index) });
-        items.push({ text: LocalizeQueryOperators(QueryOperators.In), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.In, index) });
-        items.push({ text: LocalizeQueryOperators(QueryOperators.NotIn), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.NotIn, index) });
+        items.push({ name: LocalizeQueryOperators(QueryOperators.Equal), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.Equal, index) });
+        items.push({ name: LocalizeQueryOperators(QueryOperators.NotEqual), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.NotEqual, index) });
+        items.push({ name: LocalizeQueryOperators(QueryOperators.IsNull), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.IsNull, index) });
+        items.push({ name: LocalizeQueryOperators(QueryOperators.IsNotNull), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.IsNotNull, index) });
+        items.push({ name: LocalizeQueryOperators(QueryOperators.In), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.In, index) });
+        items.push({ name: LocalizeQueryOperators(QueryOperators.NotIn), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.NotIn, index) });
         let mdDataType = getMetadataDataType(wi.tid, wi.mid);
         if (mdDataType != MetadataDataTypes.Varchar) {
-            items.push({ text: LocalizeQueryOperators(QueryOperators.Greater), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.Greater, index) });
-            items.push({ text: LocalizeQueryOperators(QueryOperators.GreaterOrEqual), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.GreaterOrEqual, index) });
-            items.push({ text: LocalizeQueryOperators(QueryOperators.Less), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.Less, index) });
-            items.push({ text: LocalizeQueryOperators(QueryOperators.LessOrEqual), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.LessOrEqual, index) });
-            items.push({ text: LocalizeQueryOperators(QueryOperators.BetweenExclusive), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.BetweenExclusive, index) });
-            items.push({ text: LocalizeQueryOperators(QueryOperators.BetweenInclusive), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.BetweenInclusive, index) });
-            items.push({ text: LocalizeQueryOperators(QueryOperators.OutsideExclusive), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.OutsideExclusive, index) });
-            items.push({ text: LocalizeQueryOperators(QueryOperators.OutsideInclusive), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.OutsideInclusive, index) });
+            items.push({ name: LocalizeQueryOperators(QueryOperators.Greater), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.Greater, index) });
+            items.push({ name: LocalizeQueryOperators(QueryOperators.GreaterOrEqual), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.GreaterOrEqual, index) });
+            items.push({ name: LocalizeQueryOperators(QueryOperators.Less), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.Less, index) });
+            items.push({ name: LocalizeQueryOperators(QueryOperators.LessOrEqual), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.LessOrEqual, index) });
+            items.push({ name: LocalizeQueryOperators(QueryOperators.BetweenExclusive), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.BetweenExclusive, index) });
+            items.push({ name: LocalizeQueryOperators(QueryOperators.BetweenInclusive), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.BetweenInclusive, index) });
+            items.push({ name: LocalizeQueryOperators(QueryOperators.OutsideExclusive), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.OutsideExclusive, index) });
+            items.push({ name: LocalizeQueryOperators(QueryOperators.OutsideInclusive), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.OutsideInclusive, index) });
         }
         else {
-            items.push({ text: LocalizeQueryOperators(QueryOperators.Contain), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.Contain, index) });
-            items.push({ text: LocalizeQueryOperators(QueryOperators.NotContain), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.NotContain, index) });
-            items.push({ text: LocalizeQueryOperators(QueryOperators.BeginWith), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.BeginWith, index) });
-            items.push({ text: LocalizeQueryOperators(QueryOperators.NotBeginWith), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.NotBeginWith, index) });
-            items.push({ text: LocalizeQueryOperators(QueryOperators.EndWith), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.EndWith, index) });
-            items.push({ text: LocalizeQueryOperators(QueryOperators.NotEndWith), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.NotEndWith, index) });
-            items.push({ text: LocalizeQueryOperators(QueryOperators.Like), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.Like, index) });
-            items.push({ text: LocalizeQueryOperators(QueryOperators.NotLike), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.NotLike, index) });
+            items.push({ name: LocalizeQueryOperators(QueryOperators.Contain), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.Contain, index) });
+            items.push({ name: LocalizeQueryOperators(QueryOperators.NotContain), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.NotContain, index) });
+            items.push({ name: LocalizeQueryOperators(QueryOperators.BeginWith), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.BeginWith, index) });
+            items.push({ name: LocalizeQueryOperators(QueryOperators.NotBeginWith), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.NotBeginWith, index) });
+            items.push({ name: LocalizeQueryOperators(QueryOperators.EndWith), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.EndWith, index) });
+            items.push({ name: LocalizeQueryOperators(QueryOperators.NotEndWith), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.NotEndWith, index) });
+            items.push({ name: LocalizeQueryOperators(QueryOperators.Like), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.Like, index) });
+            items.push({ name: LocalizeQueryOperators(QueryOperators.NotLike), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.NotLike, index) });
         }
-        items.push({ text: LocalizeQueryOperators(QueryOperators.Custom), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.Custom, index) });
+        items.push({ name: LocalizeQueryOperators(QueryOperators.Custom), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.Custom, index) });
         if (mdDataType == MetadataDataTypes.DateTime) {
             items.push({
-                text: "Operatori speciali", items: [
-                    { text: LocalizeQueryOperators(QueryOperators.Yesterday), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.Yesterday, index) },
-                    { text: LocalizeQueryOperators(QueryOperators.Today), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.Today, index) },
-                    { text: LocalizeQueryOperators(QueryOperators.Tomorrow), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.Tomorrow, index) },
-                    { text: LocalizeQueryOperators(QueryOperators.PreviousWeek), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.PreviousWeek, index) },
-                    { text: LocalizeQueryOperators(QueryOperators.ThisWeek), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.ThisWeek, index) },
-                    { text: LocalizeQueryOperators(QueryOperators.NextWeek), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.NextWeek, index) },
-                    { text: LocalizeQueryOperators(QueryOperators.PreviousMonth), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.PreviousMonth, index) },
-                    { text: LocalizeQueryOperators(QueryOperators.ThisMonth), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.ThisMonth, index) },
-                    { text: LocalizeQueryOperators(QueryOperators.NextMonth), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.NextMonth, index) },
-                    { text: LocalizeQueryOperators(QueryOperators.PreviousYear), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.PreviousYear, index) },
-                    { text: LocalizeQueryOperators(QueryOperators.ThisYear), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.ThisYear, index) },
-                    { text: LocalizeQueryOperators(QueryOperators.NextYear), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.NextYear, index) },
-                    { text: LocalizeQueryOperators(QueryOperators.LastXHours), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.LastXHours, index) },
-                    { text: LocalizeQueryOperators(QueryOperators.NextXHours), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.NextXHours, index) },
-                    { text: LocalizeQueryOperators(QueryOperators.LastXDays), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.LastXDays, index) },
-                    { text: LocalizeQueryOperators(QueryOperators.NextXDays), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.NextXDays, index) },
-                    { text: LocalizeQueryOperators(QueryOperators.LastXWeeks), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.LastXWeeks, index) },
-                    { text: LocalizeQueryOperators(QueryOperators.NextXWeeks), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.NextXWeeks, index) },
-                    { text: LocalizeQueryOperators(QueryOperators.LastXMonths), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.LastXMonths, index) },
-                    { text: LocalizeQueryOperators(QueryOperators.NextXMonths), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.NextXMonths, index) },
-                    { text: LocalizeQueryOperators(QueryOperators.LastXYears), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.LastXYears, index) },
-                    { text: LocalizeQueryOperators(QueryOperators.NextXYears), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.NextXYears, index) }
+                name: "Operatori speciali", submenu: [
+                    { name: LocalizeQueryOperators(QueryOperators.Yesterday), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.Yesterday, index) },
+                    { name: LocalizeQueryOperators(QueryOperators.Today), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.Today, index) },
+                    { name: LocalizeQueryOperators(QueryOperators.Tomorrow), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.Tomorrow, index) },
+                    { name: LocalizeQueryOperators(QueryOperators.PreviousWeek), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.PreviousWeek, index) },
+                    { name: LocalizeQueryOperators(QueryOperators.ThisWeek), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.ThisWeek, index) },
+                    { name: LocalizeQueryOperators(QueryOperators.NextWeek), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.NextWeek, index) },
+                    { name: LocalizeQueryOperators(QueryOperators.PreviousMonth), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.PreviousMonth, index) },
+                    { name: LocalizeQueryOperators(QueryOperators.ThisMonth), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.ThisMonth, index) },
+                    { name: LocalizeQueryOperators(QueryOperators.NextMonth), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.NextMonth, index) },
+                    { name: LocalizeQueryOperators(QueryOperators.PreviousYear), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.PreviousYear, index) },
+                    { name: LocalizeQueryOperators(QueryOperators.ThisYear), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.ThisYear, index) },
+                    { name: LocalizeQueryOperators(QueryOperators.NextYear), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.NextYear, index) },
+                    { name: LocalizeQueryOperators(QueryOperators.LastXHours), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.LastXHours, index) },
+                    { name: LocalizeQueryOperators(QueryOperators.NextXHours), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.NextXHours, index) },
+                    { name: LocalizeQueryOperators(QueryOperators.LastXDays), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.LastXDays, index) },
+                    { name: LocalizeQueryOperators(QueryOperators.NextXDays), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.NextXDays, index) },
+                    { name: LocalizeQueryOperators(QueryOperators.LastXWeeks), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.LastXWeeks, index) },
+                    { name: LocalizeQueryOperators(QueryOperators.NextXWeeks), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.NextXWeeks, index) },
+                    { name: LocalizeQueryOperators(QueryOperators.LastXMonths), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.LastXMonths, index) },
+                    { name: LocalizeQueryOperators(QueryOperators.NextXMonths), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.NextXMonths, index) },
+                    { name: LocalizeQueryOperators(QueryOperators.LastXYears), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.LastXYears, index) },
+                    { name: LocalizeQueryOperators(QueryOperators.NextXYears), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.NextXYears, index) }
                 ]
             });
         }
@@ -713,23 +713,23 @@ const TMQueryEditor = ({ formMode, inputData, onQDChanged, isExpertMode, showDis
                                 }
                             }
                         }, children: [(!isReadOnly || fromCount > 0) && _jsx(Item, { title: SDKUI_Localizator.Source, titleRender: (tabItemProps) => renderAccordionTitle(tabItemProps, fromCount, validationItems.filter((o) => [TMPropertyNames.fromTid, TMPropertyNames.join].includes(o.PropertyName))), children: _jsx(StyledAccordionItemContainer, { style: { maxHeight: fromCount > 0 ? '330px' : '100%' }, children: _jsxs(StyledAccordionItemContent, { "$disabled": isReadOnly, style: { height: '100%' }, children: [_jsxs(StyledRowItem, { children: [!isReadOnly && _jsx(TMButton, { btnStyle: 'icon', padding: '3px 0px', icon: _jsx(IconClear, { color: TMColors.button_icon }), caption: SDKUI_Localizator.Remove, onClick: () => { let qd = SearchEngine.NewQueryDescriptor(); setFormData({ ...qd }); } }), !isReadOnly && _jsx(TMButton, { btnStyle: 'icon', padding: '3px 0px', elementStyle: { opacity: !formData?.from?.tid ? 0.4 : 1 }, disabled: !formData?.from?.tid, icon: _jsx(IconAddCircleOutline, { color: TMColors.button_icon }), caption: SDKUI_Localizator.AddBelow, onClick: onAdd_JoinItem }), _jsx("div", { style: { pointerEvents: 'all' }, children: _jsx(TMQdDropDownMenu, { content: _jsx(IconDotsVerticalCircleOutline, { color: TMColors.button_icon }), items: [
-                                                                { icon: svgToString(showId ? _jsx(IconHide, { color: TMColors.button_icon }) : _jsx(IconShow, { color: TMColors.button_icon })), text: showId ? SDKUI_Localizator.ID_Hide : SDKUI_Localizator.ID_Show, onClick: () => setShowId(!showId) },
-                                                                { icon: svgToString(showCompleteMetadataName ? _jsx(IconHide, { color: TMColors.primary }) : _jsx(IconShow, { color: TMColors.primary })), text: showCompleteMetadataName ? SDKUI_Localizator.Hide_CompleteName : SDKUI_Localizator.Show_CompleteName, onClick: () => setShowCompleteMetadataName(!showCompleteMetadataName) }
+                                                                { icon: showId ? _jsx(IconHide, { color: TMColors.button_icon }) : _jsx(IconShow, { color: TMColors.button_icon }), name: showId ? SDKUI_Localizator.ID_Hide : SDKUI_Localizator.ID_Show, onClick: () => setShowId(!showId) },
+                                                                { icon: showCompleteMetadataName ? _jsx(IconHide, { color: TMColors.primary }) : _jsx(IconShow, { color: TMColors.primary }), name: showCompleteMetadataName ? SDKUI_Localizator.Hide_CompleteName : SDKUI_Localizator.Show_CompleteName, onClick: () => setShowCompleteMetadataName(!showCompleteMetadataName) }
                                                             ] }) }), _jsx(TMDcmtTypeChooser, { disabled: isReadOnly, showEditButton: false, placeHolder: `<${SDKUI_Localizator.DcmtTypeSelect} ...>`, borderRadius: borderRadius, ShowOnlySAP: ShowOnlySAP, openEditorOnSummaryClick: true, showBorder: false, showId: showId, backgroundColor: getColorIndex({ tid: formData.from?.tid, alias: undefined }), values: [formData.from?.tid], validationItems: validationItems.filter((o) => o.PropertyName === TMPropertyNames.fromTid), onValueChanged: (tids) => { let qd = SearchEngine.NewQueryDescriptor(); qd.from.tid = tids[0]; setFormData({ ...qd }); onFromTIDChanged?.(tids[0]); } })] }), formData?.join?.map((ji, index) => {
                                                 return (_jsxs("div", { style: { width: 'max-content', padding: isReadOnly ? '0px 20px' : 0 }, children: [_jsxs(StyledRowItem, { onDragEnd: dragEnd, onDragOver: dragOver, onDrop: (e) => dropJoin(e, ji), children: [!isReadOnly && _jsx(StyledDraggableDiv, { draggable: true, onDragStart: (e) => dragStart(e, ji), children: _jsx(IconDraggabledots, { fontSize: 15, color: TMColors.button_icon }) }), !isReadOnly && _jsx(TMButton, { btnStyle: 'icon', padding: '3px 0px', icon: _jsx(IconClear, { color: TMColors.button_icon }), caption: SDKUI_Localizator.Remove, onClick: () => onRemove_JoinItem(index) }), !isReadOnly && _jsx(TMButton, { btnStyle: 'icon', padding: '3px 0px', icon: _jsx(IconAddCircleOutline, { color: TMColors.button_icon }), caption: SDKUI_Localizator.AddBelow, onClick: () => onAdd_JoinItem(index + 1) }), !isReadOnly && _jsx(TMQdDropDownMenu, { content: _jsx(TMTooltip, { content: SDK_Localizator.toCaseWord(SDKUI_Localizator.OneMore), children: _jsx(IconDotsVerticalCircleOutline, { color: TMColors.button_icon }) }), items: [
-                                                                        { text: SDKUI_Localizator.AddAbove, onClick: () => onAdd_JoinItem(index) },
-                                                                        { text: SDKUI_Localizator.AddBelow, onClick: () => onAdd_JoinItem(index + 1) },
-                                                                        { text: SDKUI_Localizator.AddDefinition, onClick: () => onAdd_OnJoinItem(index, 0) },
-                                                                        { text: SDKUI_Localizator.Remove, onClick: () => onRemove_JoinItem(index) },
-                                                                        { text: SDKUI_Localizator.RemoveAll, onClick: () => setFormData({ ...formData, join: undefined }) }
+                                                                        { name: SDKUI_Localizator.AddAbove, onClick: () => onAdd_JoinItem(index) },
+                                                                        { name: SDKUI_Localizator.AddBelow, onClick: () => onAdd_JoinItem(index + 1) },
+                                                                        { name: SDKUI_Localizator.AddDefinition, onClick: () => onAdd_OnJoinItem(index, 0) },
+                                                                        { name: SDKUI_Localizator.Remove, onClick: () => onRemove_JoinItem(index) },
+                                                                        { name: SDKUI_Localizator.RemoveAll, onClick: () => setFormData({ ...formData, join: undefined }) }
                                                                     ] }), _jsx(TMQdDropDownMenu, { backgroundColor: colorOperator, color: 'green', borderRadius: borderRadius, content: _jsx(StyledItemWrapper, { children: LocalizeQueryJoinTypes(ji.joinType) }), items: getJoinTypesMenuItems(index) }), _jsx(TMDcmtTypeChooser, { disabled: isReadOnly, showEditButton: false, placeHolder: `<${SDKUI_Localizator.DcmtTypeSelect} ...>`, borderRadius: borderRadius, ShowOnlySAP: ShowOnlySAP, openEditorOnSummaryClick: true, showBorder: false, showId: showId, backgroundColor: getColorIndex({ tid: ji.tid, alias: ji.alias }), values: ji.tid ? [ji.tid] : [], onValueChanged: (newValues) => onChange_JoinItem_TID(newValues[0], index) }), ji.alias &&
                                                                     _jsx(StyledItemWrapper, { style: { fontStyle: 'italic', color: TMColors.primary }, children: `AS ${getDisplayAlias(getDcmtTypeName(ji.tid), ji.alias)}` })] }), ji.on?.map((onItem, indexOn) => {
                                                             return (_jsxs(StyledRowItem, { style: { marginLeft: '40px' }, children: [!isReadOnly && _jsx(TMButton, { btnStyle: 'icon', padding: '3px 0px', icon: _jsx(IconClear, { color: TMColors.button_icon }), caption: SDKUI_Localizator.Remove, onClick: () => onRemove_OnJoinItem(index, indexOn) }), !isReadOnly && _jsx(TMButton, { btnStyle: 'icon', padding: '3px 0px', icon: _jsx(IconAddCircleOutline, { color: TMColors.button_icon }), caption: SDKUI_Localizator.AddBelow, onClick: () => onAdd_OnJoinItem(index, indexOn + 1) }), !isReadOnly && _jsx(TMQdDropDownMenu, { content: _jsx(TMTooltip, { content: SDK_Localizator.toCaseWord(SDKUI_Localizator.OneMore), children: _jsx(IconDotsVerticalCircleOutline, { color: TMColors.button_icon }) }), items: [
-                                                                            { text: SDKUI_Localizator.AddAbove, onClick: () => onAdd_OnJoinItem(index, indexOn) },
-                                                                            { text: SDKUI_Localizator.AddBelow, onClick: () => onAdd_OnJoinItem(index, indexOn + 1) },
-                                                                            { text: SDKUI_Localizator.Remove, onClick: () => onRemove_OnJoinItem(index, indexOn) },
+                                                                            { name: SDKUI_Localizator.AddAbove, onClick: () => onAdd_OnJoinItem(index, indexOn) },
+                                                                            { name: SDKUI_Localizator.AddBelow, onClick: () => onAdd_OnJoinItem(index, indexOn + 1) },
+                                                                            { name: SDKUI_Localizator.Remove, onClick: () => onRemove_OnJoinItem(index, indexOn) },
                                                                             {
-                                                                                text: SDKUI_Localizator.RemoveAll, onClick: () => {
+                                                                                name: SDKUI_Localizator.RemoveAll, onClick: () => {
                                                                                     if (!formData.join)
                                                                                         return;
                                                                                     const joinCopy = formData?.join?.map((ji) => { return { ...ji }; }) ?? [];
@@ -742,36 +742,36 @@ const TMQueryEditor = ({ formMode, inputData, onQDChanged, isExpertMode, showDis
                                             }), _jsx(TMVilViewer, { vil: validationItems.filter((o) => o.PropertyName === TMPropertyNames.join) })] }) }) }), canShowSelect && _jsx(Item, { title: SDK_Localizator.QuerySelect, titleRender: (tabItemProps) => renderAccordionTitle(tabItemProps, selectCount, validationItems.filter((o) => o.PropertyName == TMPropertyNames.select)), children: _jsx(StyledAccordionItemContainer, { children: _jsxs(StyledAccordionItemContent, { "$disabled": isReadOnly, children: [_jsx(TMVilViewer, { vil: validationItems.filter((o) => o.PropertyName === TMPropertyNames.select) }), (!formData?.select || formData?.select.length <= 0) && !isReadOnly &&
                                                 _jsxs(StyledRowItem, { children: [_jsx(TMButton, { btnStyle: 'normal', disabled: !formData?.from?.tid, caption: SDKUI_Localizator.Add, onClick: onAdd_SelectItem }), dcmtTypesList.length == 1
                                                             ? _jsx(TMButton, { btnStyle: 'normal', disabled: !formData?.from?.tid, caption: SDKUI_Localizator.AddAlls, onClick: () => { onAddAll_SelectItem(qdTIDs[0]); } })
-                                                            : _jsx(TMQdDropDownMenu, { backgroundColor: 'white', borderRadius: '3px', content: _jsx(TMButton, { btnStyle: 'normal', disabled: !formData?.from?.tid, caption: SDKUI_Localizator.AddAlls }), items: qdTIDs.map((tid_alias) => ({ text: `${getDisplayAlias(getDcmtTypeName(tid_alias.tid), tid_alias.alias)}`, onClick: () => { onAddAll_SelectItem(tid_alias); } })) })] }), formData?.select?.map((si, index) => {
+                                                            : _jsx(TMQdDropDownMenu, { backgroundColor: 'white', borderRadius: '3px', content: _jsx(TMButton, { btnStyle: 'normal', disabled: !formData?.from?.tid, caption: SDKUI_Localizator.AddAlls }), items: qdTIDs.map((tid_alias) => ({ name: `${getDisplayAlias(getDcmtTypeName(tid_alias.tid), tid_alias.alias)}`, onClick: () => { onAddAll_SelectItem(tid_alias); } })) })] }), formData?.select?.map((si, index) => {
                                                 return (_jsxs(StyledRowItem, { onDragEnd: dragEnd, onDragOver: dragOver, onDrop: (e) => dropSelect(e, si), children: [!isReadOnly && _jsx(StyledDraggableDiv, { draggable: true, onDragStart: (e) => dragStart(e, si), children: _jsx(IconDraggabledots, { fontSize: 15, color: TMColors.button_icon }) }), !isReadOnly && _jsx(TMButton, { btnStyle: 'icon', padding: '3px 0px', icon: _jsx(IconClear, { color: TMColors.button_icon }), caption: SDKUI_Localizator.Remove, onClick: () => onRemove_SelectItem(index) }), !isReadOnly && _jsx(TMButton, { btnStyle: 'icon', padding: '3px 0px', icon: _jsx(IconAddCircleOutline, { color: TMColors.button_icon }), caption: SDKUI_Localizator.AddBelow, onClick: () => onAdd_SelectItem(index + 1) }), !isReadOnly && _jsx(TMQdDropDownMenu, { content: _jsx(TMTooltip, { content: SDK_Localizator.toCaseWord(SDKUI_Localizator.OneMore), children: _jsx(IconDotsVerticalCircleOutline, { color: TMColors.button_icon }) }), items: getSelectMenuItems(index) }), (!isReadOnly || (si.function && si.function != QueryFunctions.None)) && _jsx(TMQdDropDownMenu, { backgroundColor: colorOperator, color: 'green', borderRadius: borderRadius, content: _jsx(StyledItemWrapper, { children: si.function === QueryFunctions.None ? "..." : LocalizeQueryFunctions(si.function) }), items: getQueryFunctionsMenuItems(si, index) }), _jsx(TMMetadataChooser, { disabled: isReadOnly, filterMetadata: (o => o.perm?.canView === AccessLevels.Yes || o.perm?.canUpdate === AccessLevels.Yes), showEditButton: false, getColorIndex: getColorIndex, showCompleteMetadataName: showCompleteMetadataName, openEditorOnSummaryClick: true, showBorder: false, borderRadius: borderRadius, showId: showId, backgroundColor: getColorIndex({ tid: si.tid, alias: si.alias }), qd: formData, values: [{ tid: si.tid, mid: si.mid, aliasTID: si.alias }], onValueChanged: (values) => { values.length > 0 && onChange_SelectItem_MID(values[0], index); } }), (!isReadOnly || si.as) && _jsx(TMQdEditableItem, { value: si.as, backgroundColor: colorValue, placeHolder: `<${SDKUI_Localizator.Query_EnterAlias}...>`, width: '100%', onValueChanged: (value) => { onChange_SelectItem_As(value, index); } })] }, `${si.tid}_${si.mid}_${index}`));
                                             })] }) }) }), fromCount > 0 && (!isReadOnly || whereCount > 0) && _jsx(Item, { title: SDK_Localizator.QueryWhere, titleRender: (tabItemProps) => renderAccordionTitle(tabItemProps, whereCount, validationItems.filter((o) => o.PropertyName == TMPropertyNames.where)), children: _jsx(StyledAccordionItemContainer, { children: _jsxs(StyledAccordionItemContent, { "$disabled": isReadOnly, children: [_jsx(TMVilViewer, { vil: validationItems.filter((o) => o.PropertyName === TMPropertyNames.where) }), (!formData?.where || formData?.where.length <= 0) && !isReadOnly &&
                                                 _jsx(StyledRowItem, { children: _jsx(TMButton, { btnStyle: 'normal', disabled: !formData?.from?.tid, caption: SDKUI_Localizator.Add, onClick: onAdd_WhereItem }) }), formData?.where?.map((wi, index) => {
                                                 return (_jsxs(StyledRowItem, { onDragEnd: dragEnd, onDragOver: dragOver, onDrop: (e) => dropWhere(e, wi), children: [!isReadOnly && _jsx(StyledDraggableDiv, { draggable: true, onDragStart: (e) => dragStart(e, wi), children: _jsx(IconDraggabledots, { fontSize: 15, color: TMColors.button_icon }) }), !isReadOnly && _jsx(TMButton, { btnStyle: 'icon', padding: '3px 0px', icon: _jsx(IconClear, { color: TMColors.button_icon }), caption: SDKUI_Localizator.Remove, onClick: () => onRemove_WhereItem(index) }), !isReadOnly && _jsx(TMButton, { btnStyle: 'icon', padding: '3px 0px', icon: _jsx(IconAddCircleOutline, { color: TMColors.button_icon }), caption: SDKUI_Localizator.AddBelow, onClick: () => onAdd_WhereItem(index + 1) }), !isReadOnly && _jsx(TMQdDropDownMenu, { content: _jsx(TMTooltip, { content: SDK_Localizator.toCaseWord(SDKUI_Localizator.OneMore), children: _jsx(IconDotsVerticalCircleOutline, { color: TMColors.button_icon }) }), items: [
-                                                                { text: SDKUI_Localizator.AddAbove, onClick: () => onAdd_WhereItem(index) },
-                                                                { text: SDKUI_Localizator.AddBelow, onClick: () => onAdd_WhereItem(index + 1) },
-                                                                { text: SDKUI_Localizator.Remove, onClick: () => onRemove_WhereItem(index) },
-                                                                { text: SDKUI_Localizator.RemoveAll, onClick: () => setFormData({ ...formData, where: undefined }) },
+                                                                { name: SDKUI_Localizator.AddAbove, onClick: () => onAdd_WhereItem(index) },
+                                                                { name: SDKUI_Localizator.AddBelow, onClick: () => onAdd_WhereItem(index + 1) },
+                                                                { name: SDKUI_Localizator.Remove, onClick: () => onRemove_WhereItem(index) },
+                                                                { name: SDKUI_Localizator.RemoveAll, onClick: () => setFormData({ ...formData, where: undefined }) },
                                                                 {
-                                                                    text: "Imposta parametro", items: [
-                                                                        { text: "{@UserName}", onClick: () => onChange_WhereItem_Values("{@UserName}", undefined, index) },
-                                                                        { text: "{@UserID}", onClick: () => onChange_WhereItem_Values("{@UserID}", undefined, index) },
-                                                                        { text: "{@QueryParam...N}", onClick: () => onChange_WhereItem_Values(calcQueryParamN(), undefined, index) }
+                                                                    name: "Imposta parametro", submenu: [
+                                                                        { name: "{@UserName}", onClick: () => onChange_WhereItem_Values("{@UserName}", undefined, index) },
+                                                                        { name: "{@UserID}", onClick: () => onChange_WhereItem_Values("{@UserID}", undefined, index) },
+                                                                        { name: "{@QueryParam...N}", onClick: () => onChange_WhereItem_Values(calcQueryParamN(), undefined, index) }
                                                                     ]
                                                                 },
                                                             ] }), _jsx(TMQdDropDownMenu, { disabled: index == 0, color: 'green', content: _jsx("div", { style: { fontSize: '1rem' }, children: wi.or ? 'OR' : 'AND' }), items: [
-                                                                { text: 'AND', onClick: () => onChange_WhereItem_Or(false, index) },
-                                                                { text: 'OR', onClick: () => onChange_WhereItem_Or(true, index) }
+                                                                { name: 'AND', onClick: () => onChange_WhereItem_Or(false, index) },
+                                                                { name: 'OR', onClick: () => onChange_WhereItem_Or(true, index) }
                                                             ] }), _jsx(TMQdEditableItem, { value: wi.leftBrackets, allowedPattern: /\(/g, backgroundColor: colorBrackets, onValueChanged: (value) => { onChange_WhereItem_Brackets(value, true, index); } }), _jsx(TMMetadataChooser, { disabled: isReadOnly, filterMetadata: (o => o.perm?.canSearch === AccessLevels.Yes), showEditButton: false, getColorIndex: getColorIndex, showCompleteMetadataName: showCompleteMetadataName, openEditorOnSummaryClick: true, showBorder: false, borderRadius: borderRadius, showId: showId, backgroundColor: getColorIndex({ tid: wi.tid, alias: wi.alias }), qd: formData, values: [{ tid: wi.tid, mid: wi.mid, aliasTID: wi.alias }], onValueChanged: (values) => { values.length > 0 && onChange_WhereItem_Metadato(values[0], index); } }), _jsx(TMQdDropDownMenu, { backgroundColor: colorOperator, color: 'green', borderRadius: borderRadius, content: _jsx(StyledDivHorizontal, { children: _jsx(StyledItemWrapper, { children: LocalizeQueryOperators(wi.operator) }) }), items: getQueryOperatorsMenuItems(wi, index) }), _jsx(TMQdWhereItemValue, { whereItem: wi, index: index, onValueChanged: (values) => { onChange_WhereItem_Values(values[0], values[1], index); } }), _jsx(TMQdEditableItem, { value: wi.rightBrackets, allowedPattern: /\)/g, backgroundColor: colorBrackets, onValueChanged: (value) => { onChange_WhereItem_Brackets(value, false, index); } })] }, `${wi.tid}_${wi.mid}_${index}`));
                                             })] }) }) }), fromCount > 0 && (!isReadOnly || orderByCount > 0) && _jsx(Item, { title: SDK_Localizator.QueryOrderBy, titleRender: (tabItemProps) => renderAccordionTitle(tabItemProps, orderByCount, validationItems.filter((o) => o.PropertyName == TMPropertyNames.orderBy)), children: _jsx(StyledAccordionItemContainer, { children: _jsxs(StyledAccordionItemContent, { "$disabled": isReadOnly, children: [(!formData?.orderBy || formData?.orderBy.length <= 0) && !isReadOnly &&
                                                 _jsx(StyledRowItem, { children: _jsx(TMButton, { btnStyle: 'normal', disabled: !formData?.from?.tid, caption: SDKUI_Localizator.Add, onClick: onAdd_OrderByItem }) }), formData?.orderBy?.map((oi, index) => {
                                                 return (_jsxs(StyledRowItem, { onDragEnd: dragEnd, onDragOver: dragOver, onDrop: (e) => dropOrderBy(e, oi), children: [!isReadOnly && _jsx(StyledDraggableDiv, { draggable: true, onDragStart: (e) => dragStart(e, oi), children: _jsx(IconDraggabledots, { fontSize: 15, color: TMColors.button_icon }) }), !isReadOnly && _jsx(TMButton, { btnStyle: 'icon', padding: '3px 0px', icon: _jsx(IconClear, { color: TMColors.button_icon }), caption: SDKUI_Localizator.Remove, onClick: () => onRemove_OrderByItem(index) }), !isReadOnly && _jsx(TMButton, { btnStyle: 'icon', padding: '3px 0px', icon: _jsx(IconAddCircleOutline, { color: TMColors.button_icon }), caption: SDKUI_Localizator.AddBelow, onClick: () => onAdd_OrderByItem(index + 1) }), !isReadOnly && _jsx(TMQdDropDownMenu, { content: _jsx(TMTooltip, { content: SDK_Localizator.toCaseWord(SDKUI_Localizator.OneMore), children: _jsx(IconDotsVerticalCircleOutline, { color: TMColors.button_icon }) }), items: [
-                                                                { text: SDKUI_Localizator.AddAbove, onClick: () => onAdd_OrderByItem(index) },
-                                                                { text: SDKUI_Localizator.AddBelow, onClick: () => onAdd_OrderByItem(index + 1) },
-                                                                { text: SDKUI_Localizator.Remove, onClick: () => onRemove_OrderByItem(index) },
-                                                                { text: SDKUI_Localizator.RemoveAll, onClick: () => setFormData({ ...formData, orderBy: undefined }) },
+                                                                { name: SDKUI_Localizator.AddAbove, onClick: () => onAdd_OrderByItem(index) },
+                                                                { name: SDKUI_Localizator.AddBelow, onClick: () => onAdd_OrderByItem(index + 1) },
+                                                                { name: SDKUI_Localizator.Remove, onClick: () => onRemove_OrderByItem(index) },
+                                                                { name: SDKUI_Localizator.RemoveAll, onClick: () => setFormData({ ...formData, orderBy: undefined }) },
                                                             ] }), _jsx(TMMetadataChooser, { disabled: isReadOnly, filterMetadata: (o => o.perm?.canView === AccessLevels.Yes || o.perm?.canUpdate === AccessLevels.Yes), showEditButton: false, getColorIndex: getColorIndex, showCompleteMetadataName: showCompleteMetadataName, openEditorOnSummaryClick: true, showBorder: false, showId: showId, borderRadius: borderRadius, backgroundColor: getColorIndex({ tid: oi.tid, alias: oi.alias }), qd: formData, values: [{ tid: oi.tid, mid: oi.mid, aliasTID: oi.alias }], onValueChanged: (values) => onChange_OrderByItem_MID(values[0], index) }), _jsx(TMQdDropDownMenu, { backgroundColor: colorOperator, borderRadius: borderRadius, content: _jsx(StyledItemWrapper, { children: oi.asc ? 'ASC' : 'DESC' }), items: [
-                                                                { text: 'ASC', onClick: () => onChange_OrderByItem_Asc(true, oi, index) },
-                                                                { text: 'DESC', onClick: () => onChange_OrderByItem_Asc(false, oi, index) }
+                                                                { name: 'ASC', onClick: () => onChange_OrderByItem_Asc(true, oi, index) },
+                                                                { name: 'DESC', onClick: () => onChange_OrderByItem_Asc(false, oi, index) }
                                                             ] })] }, `${oi.tid}_${oi.mid}_${index}`));
                                             })] }) }) }), fromCount > 0 && _jsx(Item, { title: SDKUI_Localizator.Options, titleRender: (tabItemProps) => renderAccordionTitle(tabItemProps, undefined, []), children: _jsx(StyledAccordionItemContainer, { children: _jsxs(StyledAccordionItemContent, { "$disabled": isReadOnly, children: [showDistinct && _jsx(TMCheckBox, { label: SDK_Localizator.QueryDistinct, value: formData.isDistinct, onValueChanged: () => { setFormData({ ...formData, isDistinct: !formData.isDistinct }); } }), _jsx(TMTextBox, { type: 'number', width: '200px', label: SDKUI_Localizator.MaxDcmtsToBeReturned, validationItems: validationItems.filter((o) => o.PropertyName == TMPropertyNames.maxDcmtsToBeReturned), value: formData.maxDcmtsToBeReturned, onBlur: (newValue) => setFormData({ ...formData, maxDcmtsToBeReturned: Number(newValue) }) })] }) }) })] }), _jsx(ConfirmQueryParamsDialog, {})] }), showResultSearch && _jsxs(StyledModalContainer, { children: [" ", renderResultSearchForm, " "] })] }));
 };
@@ -997,5 +997,5 @@ const StyledContent = styled.div `
 const TMQdDropDownMenu = ({ content, items, disabled = false, color = TMColors.text_normal, backgroundColor = TMColors.default_background, borderRadius }) => {
     const [id, setID] = useState('');
     useEffect(() => { setID(genUniqueId()); }, [content]);
-    return (_jsxs(_Fragment, { children: [_jsx(StyledContent, { id: `idContainer${id}`, tabIndex: disabled ? -1 : 0, "$disabled": disabled, "$color": color, "$backgroundColor": backgroundColor, "$borderRadius": borderRadius, children: content }), _jsx(ContextMenu, { target: `#idContainer${id}`, dataSource: items, showEvent: 'click' })] }));
+    return (_jsx(ContextMenu, { target: `#idContainer${id}`, items: items || [], trigger: "left", children: _jsx(StyledContent, { id: `idContainer${id}`, tabIndex: disabled ? -1 : 0, "$disabled": disabled, "$color": color, "$backgroundColor": backgroundColor, "$borderRadius": borderRadius, children: content }) }));
 };

package/package.json

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