@topconsultnpm/sdkui-react 6.20.0-dev1.76 → 6.20.0-dev1.78

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

@@ -48,6 +48,7 @@ import { useCheckInOutOperations } from '../../../hooks/useCheckInOutOperations'
 import TMDcmtCheckoutInfoForm from './TMDcmtCheckoutInfoForm';
 import { useDataListItem } from '../../../hooks/useDataListItem';
 import { useDataUserIdItem } from '../../../hooks/useDataUserIdItem';
+import { LoadIndicator } from 'devextreme-react';
 let abortControllerLocal = new AbortController();
 //#region Helper Methods
 export const getSearchResultCountersSingleCategory = (searchResults) => {
@@ -795,9 +796,6 @@ const TMSearchResult = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallback, a
                 }, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers }), (showSignSettingsForm && fromDTD) && _jsx(TMSignSettingsForm, { fromDTD: fromDTD, inputDcmts: allFieldSelectedDocs, onCloseSignSettingsForm: closeSignSettingsForm, onSavedAsyncCallback: handleSavedAsyncCallback }), (showHistory && fromDTD && getSelectedDcmtsOrFocused(selectedItems, focusedItem).length > 0) && _jsx(TMViewHistoryDcmt, { fromDTD: fromDTD, deviceType: deviceType, inputDcmt: getSelectedDcmtsOrFocused(selectedItems, focusedItem)[0], onClose: hideHistoryCallback, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers }), (commentFormState.show && getSelectedDcmtsOrFocused(selectedItems, focusedItem).length > 0) && _jsx(TMBlogCommentForm, { context: { engine: 'SearchEngine', object: { tid: getSelectedDcmtsOrFocused(selectedItems, focusedItem)[0].TID, did: getSelectedDcmtsOrFocused(selectedItems, focusedItem)[0].DID } }, onClose: hideCommentFormCallback, refreshCallback: triggerBlogRefresh, participants: [], showAttachmentsSection: true, allArchivedDocumentsFileItems: convertSearchResultDescriptorToFileItems(currentSearchResults ?? []), isCommentRequired: commentFormState.isRequired, removeAndEditAttachment: commentFormState.removeAndEditAttachment, selectedAttachmentDid: [Number(getSelectedDcmtsOrFocused(selectedItems, focusedItem)[0].DID)] })] }));
 };
 export default TMSearchResult;
-const renderDcmtIcon = (cellData, onDownloadDcmtsAsync, openInOffice) => {
-    return _jsx(TMDcmtIcon, { tid: cellData.data.TID, did: cellData.data.DID, fileExtension: cellData.data.FILEEXT, fileCount: cellData.data.FILECOUNT, isLexProt: cellData.data.IsLexProt, isMail: cellData.data.ISMAIL, isShared: cellData.data.ISSHARED, isSigned: cellData.data.ISSIGNED, downloadMode: 'openInNewWindow', onDownloadDcmtsAsync: onDownloadDcmtsAsync, openInOffice: openInOffice });
-};
 const TMSearchResultGrid = ({ openInOffice, fromDTD, allUsers, inputFocusedItem, showSearch, allowMultipleSelection = true, showExportForm = false, onCloseExportForm, onFocusedItemChanged, onDownloadDcmtsAsync, onVisibleItemChanged, inputSelectedItems = [], lastUpdateSearchTime, searchResult, floatingMenuItems, onSelectionChanged, onDblClick }) => {
     const [dataSource, setDataSource] = useState();
     const [columns, setColumns] = useState([]);
@@ -806,6 +804,7 @@ 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 [isDataGridReady, setIsDataGridReady] = useState(false);
     const { loadDataListsAsync, renderDataListCell, dataListsCache } = useDataListItem();
     const { loadUsersAsync, renderUserIdViewer, usersCache } = useDataUserIdItem();
     useEffect(() => {
@@ -882,6 +881,9 @@ const TMSearchResultGrid = ({ openInOffice, fromDTD, allUsers, inputFocusedItem,
             }
         }
     }, [inputSelectedItems, inputFocusedItem, dataSource]);
+    const cellRenderDcmtIcon = useCallback((cellData, onDownloadDcmtsAsync, openInOffice) => {
+        return _jsx(TMDcmtIcon, { tid: cellData.data.TID, did: cellData.data.DID, fileExtension: cellData.data.FILEEXT, fileCount: cellData.data.FILECOUNT, isLexProt: cellData.data.IsLexProt, isMail: cellData.data.ISMAIL, isShared: cellData.data.ISSHARED, isSigned: cellData.data.ISSIGNED, downloadMode: 'openInNewWindow', onDownloadDcmtsAsync: onDownloadDcmtsAsync, openInOffice: openInOffice });
+    }, []);
     const cellRender = useCallback((cellData, dataDomain, dataListID, dataListViewMode) => {
         if (!cellData || cellData.value === undefined)
             return null;
@@ -1040,6 +1042,7 @@ const TMSearchResultGrid = ({ openInOffice, fromDTD, allUsers, inputFocusedItem,
         const loadColumnsAndData = async () => {
             // Resetta l'elemento focalizzato quando si caricano nuovi dati
             setFocusedItem(undefined);
+            setIsDataGridReady(false);
             // Set per raccogliere gli ID univoci da precaricare
             const dataListIDs = new Set();
             const userIDs = new Set();
@@ -1076,6 +1079,7 @@ const TMSearchResultGrid = ({ openInOffice, fromDTD, allUsers, inputFocusedItem,
             // Converte i risultati di ricerca in un array semplice per la griglia
             let newDataSource = searchResultDescriptorToSimpleArray(searchResult);
             setDataSource(newDataSource);
+            setIsDataGridReady(true);
         };
         loadColumnsAndData();
     }, [searchResult, fromDTD, allUsers, loadDataListsAsync, loadUsersAsync, generateColumns]);
@@ -1126,10 +1130,6 @@ 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",
@@ -1137,7 +1137,7 @@ const TMSearchResultGrid = ({ openInOffice, fromDTD, allUsers, inputFocusedItem,
                 caption: '',
                 visible: true,
                 width: 50,
-                cellRender: (cellData) => renderDcmtIcon(cellData, onDownloadDcmtsAsync, openInOffice),
+                cellRender: (cellData) => cellRenderDcmtIcon(cellData, onDownloadDcmtsAsync, openInOffice),
                 allowResizing: false,
                 filterOperations: ['=', "anyof"],
                 allowHiding: false,
@@ -1154,7 +1154,7 @@ const TMSearchResultGrid = ({ openInOffice, fromDTD, allUsers, inputFocusedItem,
         setVisibleItems(visibleRows.map((row) => { return row.data; }));
     }, []);
     useEffect(() => { onVisibleItemChanged?.(visibleItems); }, [visibleItems]);
-    return _jsxs("div", { style: { width: "100%", height: "100%" }, children: [_jsx(TMDataGrid, { id: "tm-search-result", keyExpr: "rowIndex", dataColumns: dataColumns, dataSource: dataSource, repaintChangesOnly: true, selectedRowKeys: selectedRowKeys, focusedRowKey: Number(focusedItem?.rowIndex ?? 0), showSearchPanel: showSearch, showFilterPanel: true, sorting: { mode: "multiple" }, selection: { mode: allowMultipleSelection ? 'multiple' : 'single' }, pageSize: pageSize, onSelectionChanged: handleSelectionChange, onFocusedRowChanged: handleFocusedRowChange, onRowDblClick: onRowDblClick, onContentReady: onContentReady, showHeaderColumnChooser: true, onKeyDown: onKeyDown, customContextMenuItems: floatingMenuItems, counterConfig: { show: true } }), (showExportForm && searchResult && onCloseExportForm) && _jsx(TMDataGridExportForm, { dataColumns: dataColumns, dataSource: dataSource, selectedRowKeys: selectedRowKeys, onCloseExportForm: onCloseExportForm, searchResult: searchResult })] });
+    return _jsxs("div", { style: { width: "100%", height: "100%" }, children: [!isDataGridReady && (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', width: '100%', gap: '10px' }, children: [_jsx(LoadIndicator, { height: 60, width: 60 }), _jsx("div", { children: SDKUI_Localizator.Loading })] })), isDataGridReady && _jsx(TMDataGrid, { id: "tm-search-result", keyExpr: "rowIndex", dataColumns: dataColumns, dataSource: dataSource, repaintChangesOnly: true, selectedRowKeys: selectedRowKeys, focusedRowKey: Number(focusedItem?.rowIndex ?? 0), showSearchPanel: showSearch, showFilterPanel: true, sorting: { mode: "multiple" }, selection: { mode: allowMultipleSelection ? 'multiple' : 'single' }, pageSize: pageSize, onSelectionChanged: handleSelectionChange, onFocusedRowChanged: handleFocusedRowChange, onRowDblClick: onRowDblClick, onContentReady: onContentReady, showHeaderColumnChooser: true, onKeyDown: onKeyDown, customContextMenuItems: floatingMenuItems, counterConfig: { show: true } }), (showExportForm && searchResult && onCloseExportForm) && _jsx(TMDataGridExportForm, { dataColumns: dataColumns, dataSource: dataSource, selectedRowKeys: selectedRowKeys, onCloseExportForm: onCloseExportForm, searchResult: searchResult })] });
 };
 //#region TMSearchResultSelector
 const StyledItemTemplate = styled.div ` 

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;