@topconsultnpm/sdkui-react 6.20.0-dev1.30 → 6.20.0-dev1.31

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

@@ -2,7 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useState, useRef, useEffect } from 'react';
 import * as S from './styles';
 import { useIsMobile, useMenuPosition } from './hooks';
-const TMContextMenu = ({ items, trigger = 'right', children }) => {
+import { IconArrowLeft } from '../../../helper';
+const TMContextMenu = ({ items, trigger = 'right', children, externalControl }) => {
     const [menuState, setMenuState] = useState({
         visible: false,
         position: { x: 0, y: 0 },
@@ -16,14 +17,31 @@ const TMContextMenu = ({ items, trigger = 'right', children }) => {
     const submenuTimeoutRef = useRef(null);
     const { openLeft, openUp, isCalculated } = useMenuPosition(menuRef, menuState.position);
     const handleClose = () => {
-        setMenuState(prev => ({
-            ...prev,
-            visible: false,
-            submenuStack: [items],
-            parentNames: [],
-        }));
+        if (externalControl) {
+            externalControl.onClose();
+        }
+        else {
+            setMenuState(prev => ({
+                ...prev,
+                visible: false,
+                submenuStack: [items],
+                parentNames: [],
+            }));
+        }
         setHoveredSubmenus([]);
     };
+    // Sync with external control when provided
+    useEffect(() => {
+        if (externalControl) {
+            setMenuState(prev => ({
+                ...prev,
+                visible: externalControl.visible,
+                position: externalControl.position,
+                submenuStack: [items],
+                parentNames: [],
+            }));
+        }
+    }, [externalControl, items]);
     useEffect(() => {
         if (!menuState.visible)
             return;
@@ -178,10 +196,10 @@ const TMContextMenu = ({ items, trigger = 'right', children }) => {
     };
     const currentMenu = menuState.submenuStack.at(-1) || items;
     const currentParentName = menuState.parentNames.at(-1) || '';
-    return (_jsxs(_Fragment, { children: [_jsx("div", { ref: triggerRef, onContextMenu: handleContextMenu, onClick: handleClick, onKeyDown: (e) => {
+    return (_jsxs(_Fragment, { children: [!externalControl && children && (_jsx("div", { ref: triggerRef, onContextMenu: handleContextMenu, onClick: handleClick, onKeyDown: (e) => {
                     if (e.key === 'Enter' || e.key === ' ') {
                         handleClick(e);
                     }
-                }, role: "button", tabIndex: 0, style: { display: 'inline-block' }, children: children }), menuState.visible && (_jsxs(_Fragment, { children: [_jsx(S.Overlay, { onClick: handleClose }), _jsxs(S.MenuContainer, { ref: menuRef, "$x": menuState.position.x, "$y": menuState.position.y, "$openLeft": openLeft, "$openUp": openUp, "$isPositioned": isCalculated, children: [isMobile && menuState.parentNames.length > 0 && (_jsxs(S.MobileMenuHeader, { children: [_jsx(S.BackButton, { onClick: handleBack, "aria-label": "Go back", children: "\u2190" }), _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}`)))] }))] }));
+                }, role: "button", tabIndex: 0, style: { display: 'inline-block' }, children: children })), menuState.visible && (_jsxs(_Fragment, { children: [_jsx(S.Overlay, { onClick: handleClose }), _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}`)))] }))] }));
 };
 export default TMContextMenu;

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

@@ -4,6 +4,7 @@ export declare const MenuContainer: import("styled-components/dist/types").IStyl
     $openLeft: boolean;
     $openUp: boolean;
     $isPositioned: boolean;
+    $externalControl?: boolean;
 }>> & 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;

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

@@ -54,6 +54,16 @@ export const MenuContainer = styled.div `
   [data-theme='dark'] & *:not(svg):not(.right-icon-btn):not(.right-icon-btn *) {
     color: #e0e0e0 !important;
   }
+
+  ${props => props.$externalControl && `
+    @media (max-width: 768px) {
+      left: 100px !important;
+      right: 100px !important;
+      max-width: calc(100vw - 200px);
+      width: auto;
+      min-width: auto;
+    }
+  `}
 `;
 export const MenuItem = styled.div `
   display: flex;
@@ -123,8 +133,8 @@ export const MenuItem = styled.div `
   }
 
   @media (max-width: 768px) {
-    padding: 14px 16px;
-    font-size: 15px;
+    padding: 4px 10px;
+    font-size: 12px;
   }
 `;
 export const MenuItemContent = styled.div `
@@ -266,7 +276,7 @@ export const Submenu = styled.div `
 export const MobileMenuHeader = styled.div `
   display: flex;
   align-items: center;
-  padding: 12px 16px;
+  padding: 4px 8px;
   border-bottom: 1px solid rgba(0, 0, 0, 0.08);
   margin-bottom: 8px;
   gap: 12px;
@@ -282,33 +292,18 @@ export const BackButton = styled.button `
   display: flex;
   align-items: center;
   justify-content: center;
-  background: #0066cc;
-  color: white;
   border: none;
   border-radius: 8px;
   width: 32px;
   height: 32px;
   cursor: pointer;
-  font-size: 18px;
   transition: all 0.15s ease;
-
-  &:hover {
-    background: #0052a3;
-    transform: scale(1.05);
-  }
+  font-size: 16px;
+  transform: translateY(-2px);
 
   &:active {
     transform: scale(0.95);
   }
-
-  [data-theme='dark'] & {
-    background: #4db8ff;
-    color: #1a1a1a;
-
-    &:hover {
-      background: #66c2ff;
-    }
-  }
 `;
 export const HeaderTitle = styled.h3 `
   margin: 0;

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

@@ -9,11 +9,20 @@ export interface TMContextMenuItemProps {
     onRightIconClick?: () => void;
     beginGroup?: boolean;
     tooltip?: string;
+    operationType?: 'singleRow' | 'multiRow';
 }
 export interface TMContextMenuProps {
     items: TMContextMenuItemProps[];
     trigger?: 'right' | 'left';
     children?: React.ReactNode;
+    externalControl?: {
+        visible: boolean;
+        position: {
+            x: number;
+            y: number;
+        };
+        onClose: () => void;
+    };
 }
 export interface Position {
     x: number;

package/lib/components/NewComponents/FloatingMenuBar/TMFloatingMenuBar.js

@@ -6,8 +6,7 @@ import TMTooltip from '../../base/TMTooltip';
 import * as S from './styles';
 import { IconApply, IconMenuKebab, IconMenuVertical, IconPencil, IconPin, SDKUI_Globals } from '../../../helper';
 const IconDraggableDots = (props) => (_jsx("svg", { fontSize: 18, viewBox: "0 0 24 24", fill: "currentColor", height: "1em", width: "1em", ...props, children: _jsx("path", { d: "M9 3a2 2 0 11-4 0 2 2 0 014 0zm0 9a2 2 0 11-4 0 2 2 0 014 0zm0 9a2 2 0 11-4 0 2 2 0 014 0zm10-18a2 2 0 11-4 0 2 2 0 014 0zm0 9a2 2 0 11-4 0 2 2 0 014 0zm0 9a2 2 0 11-4 0 2 2 0 014 0z" }) }));
-const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], storageKey = 'floatingMenuBar-config', // Kept for backward compatibility but not used
-isConstrained = false, defaultPosition = { x: 100, y: 100 }, maxItems = 8, }) => {
+const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained = false, defaultPosition = { x: 100, y: 100 }, maxItems = 8, }) => {
     const loadConfig = () => {
         try {
             const settings = SDKUI_Globals.userSettings.searchSettings.floatingMenuBar;
@@ -17,7 +16,6 @@ isConstrained = false, defaultPosition = { x: 100, y: 100 }, maxItems = 8, }) =>
                     (settings.itemIds && settings.itemIds.length > 0));
             return {
                 orientation: settings.orientation || 'horizontal',
-                pinnedItemIds: new Set(settings.pinnedItemIds || []),
                 savedItemIds: settings.itemIds || [],
                 position: hasSavedPosition ? settings.position : defaultPosition,
             };
@@ -26,7 +24,6 @@ isConstrained = false, defaultPosition = { x: 100, y: 100 }, maxItems = 8, }) =>
             console.error('Failed to load FloatingMenuBar config:', error);
             return {
                 orientation: 'horizontal',
-                pinnedItemIds: new Set(),
                 savedItemIds: [],
                 position: defaultPosition,
             };
@@ -43,7 +40,6 @@ isConstrained = false, defaultPosition = { x: 100, y: 100 }, maxItems = 8, }) =>
     });
     const floatingRef = useRef(null);
     const dragOffset = useRef({ x: 0, y: 0 });
-    const [pinnedItemIds, setPinnedItemIds] = useState(initialConfig.pinnedItemIds);
     const [dragOverIndex, setDragOverIndex] = useState(null);
     // Use refs to track item IDs without causing re-renders
     const floatingBarItemIds = useRef(new Set());
@@ -60,13 +56,15 @@ isConstrained = false, defaultPosition = { x: 100, y: 100 }, maxItems = 8, }) =>
             const itemId = `${parentPath}${item.name}-${index}`;
             // Only add items that have onClick (final actions, not submenu parents)
             if (item.onClick && !item.submenu) {
+                // Check if item is currently in the floating bar
+                const isPinned = state.items.some(i => i.id === itemId || i.name === item.name);
                 result.push({
                     id: itemId,
                     name: item.name,
                     icon: item.icon || _jsx(IconPin, {}),
                     onClick: item.onClick,
                     disabled: item.disabled,
-                    isPinned: pinnedItemIds.has(itemId),
+                    isPinned: isPinned,
                     originalMenuItem: item,
                 });
             }
@@ -76,7 +74,7 @@ isConstrained = false, defaultPosition = { x: 100, y: 100 }, maxItems = 8, }) =>
             }
         });
         return result;
-    }, [pinnedItemIds]);
+    }, [state.items]);
     // Restore items on mount from savedItemIds
     useEffect(() => {
         if (contextMenuItems.length > 0) {
@@ -112,17 +110,6 @@ isConstrained = false, defaultPosition = { x: 100, y: 100 }, maxItems = 8, }) =>
                 return { ...s, items: [...s.items, item] };
             }
         });
-        // Update pinned IDs for context menu items
-        setPinnedItemIds(prev => {
-            const newSet = new Set(prev);
-            if (newSet.has(item.id)) {
-                newSet.delete(item.id);
-            }
-            else {
-                newSet.add(item.id);
-            }
-            return newSet;
-        });
     }, [maxItems]);
     // Get current item state (disabled and onClick) from contextMenuItems
     const getCurrentItemState = useCallback((itemName) => {
@@ -242,7 +229,6 @@ isConstrained = false, defaultPosition = { x: 100, y: 100 }, maxItems = 8, }) =>
             // Replace the entire object to trigger the Proxy
             SDKUI_Globals.userSettings.searchSettings.floatingMenuBar = {
                 orientation: state.orientation,
-                pinnedItemIds: Array.from(pinnedItemIds),
                 itemIds: state.items.map(item => item.id),
                 position: state.position,
             };
@@ -250,7 +236,7 @@ isConstrained = false, defaultPosition = { x: 100, y: 100 }, maxItems = 8, }) =>
         catch (error) {
             console.error('Failed to save FloatingMenuBar config:', error);
         }
-    }, [state.orientation, state.items, state.position, pinnedItemIds]);
+    }, [state.orientation, state.items, state.position]);
     const toggleConfigMode = () => {
         setState(s => ({ ...s, isConfigMode: !s.isConfigMode }));
     };
@@ -294,12 +280,6 @@ isConstrained = false, defaultPosition = { x: 100, y: 100 }, maxItems = 8, }) =>
             ...s,
             items: s.items.filter(item => item.id !== itemId),
         }));
-        // Also remove from pinned items if it was pinned
-        setPinnedItemIds(prev => {
-            const newSet = new Set(prev);
-            newSet.delete(itemId);
-            return newSet;
-        });
     };
     // Drag and drop for reordering
     const handleDragStart = (e, index) => {
@@ -373,6 +353,6 @@ isConstrained = false, defaultPosition = { x: 100, y: 100 }, maxItems = 8, }) =>
                                                 currentOnClick();
                                             }
                                         }, disabled: isDisabled, children: item.icon }) })), state.isConfigMode && (_jsx(S.RemoveButton, { onClick: () => removeItem(item.id), children: "\u00D7" }))] }, item.id));
-                    }), !state.isConfigMode && contextMenuItems.length > 0 && (_jsx(ContextMenu, { items: enhancedContextMenuItems(), trigger: "left", children: _jsx(S.ContextMenuButton, { children: _jsx(IconMenuVertical, {}) }) }, Array.from(pinnedItemIds).join(','))), _jsx(S.ConfigButton, { onClick: toggleConfigMode, "$isActive": state.isConfigMode, children: state.isConfigMode ? _jsx(IconApply, {}) : _jsx(IconPencil, {}) }), !state.isConfigMode && (_jsx(S.OrientationToggle, { "$orientation": state.orientation, onClick: toggleOrientation, children: _jsx(IconMenuKebab, {}) }))] })] }));
+                    }), !state.isConfigMode && contextMenuItems.length > 0 && (_jsx(ContextMenu, { items: enhancedContextMenuItems(), trigger: "left", children: _jsx(S.ContextMenuButton, { children: _jsx(IconMenuVertical, {}) }) }, state.items.map(i => i.id).join(','))), _jsx(S.ConfigButton, { onClick: toggleConfigMode, "$isActive": state.isConfigMode, children: state.isConfigMode ? _jsx(IconApply, {}) : _jsx(IconPencil, {}) }), !state.isConfigMode && (_jsx(S.OrientationToggle, { "$orientation": state.orientation, onClick: toggleOrientation, children: _jsx(IconMenuKebab, {}) }))] })] }));
 };
 export default TMFloatingMenuBar;

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

@@ -137,7 +137,6 @@ export const MenuButton = styled.button `
   svg {
     width: 18px;
     height: 18px;
-    transform: translateY(2px);
   }
 `;
 export const ConfigButton = styled.button `

package/lib/components/NewComponents/FloatingMenuBar/types.d.ts

@@ -11,7 +11,6 @@ export interface TMFloatingMenuItem {
 export interface TMFloatingMenuBarProps {
     containerRef: React.RefObject<HTMLElement | null>;
     contextMenuItems?: TMContextMenuItemProps[];
-    storageKey?: string;
     isConstrained?: boolean;
     defaultPosition?: Position;
     maxItems?: number;

package/lib/components/base/TMCustomButton.js

@@ -52,12 +52,12 @@ const TMCustomButton = (props) => {
     const RunOnce = button.mode === "RunOnce";
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(false);
-    const selectedItemsCount = selectedItems?.length || 0;
+    const itemsToProcess = useMemo(() => selectedItems && selectedItems.length > 0 ? selectedItems : [attributes], [selectedItems, attributes]);
     // Stati per il wait panel
-    const [showWaitPanel, setShowWaitPanel] = useState(selectedItemsCount > 0 && !RunOnce);
-    const [waitPanelText, setWaitPanelText] = useState(SDKUI_Localizator.CustomButtonActions.replaceParams(1, selectedItemsCount));
+    const [showWaitPanel, setShowWaitPanel] = useState(itemsToProcess.length > 0 && !RunOnce);
+    const [waitPanelText, setWaitPanelText] = useState(SDKUI_Localizator.CustomButtonActions.replaceParams(1, itemsToProcess.length));
     const [waitPanelValue, setWaitPanelValue] = useState(0);
-    const [waitPanelMaxValue, setWaitPanelMaxValue] = useState(selectedItemsCount);
+    const [waitPanelMaxValue, setWaitPanelMaxValue] = useState(itemsToProcess.length);
     const [abortController, setAbortController] = useState(undefined);
     // Aggiungi timestamp all'URL per evitare cache
     const iframeUrl = useMemo(() => {
@@ -84,21 +84,29 @@ const TMCustomButton = (props) => {
         setError(true);
     };
     const executeSequentially = async (controller) => {
-        if (!selectedItems)
+        if (!itemsToProcess)
             return;
-        for (const [index, item] of selectedItems.entries()) {
+        for (const [index, item] of itemsToProcess.entries()) {
             if (controller.signal.aborted)
                 break;
-            setWaitPanelText(SDKUI_Localizator.CustomButtonActions.replaceParams(index + 1, selectedItemsCount));
+            setWaitPanelText(SDKUI_Localizator.CustomButtonActions.replaceParams(index + 1, itemsToProcess.length));
             setWaitPanelValue(index);
             // Attendi che l'iframe sia pronto e invia il messaggio
             await new Promise((resolve) => {
                 const checkIframe = setInterval(() => {
                     if (iframeRef.current?.contentWindow) {
                         clearInterval(checkIframe);
-                        //devo convertire item in formData
-                        const processedItem = getSelectedItem(args, formData, item);
-                        postMessageIframe(processedItem);
+                        if (selectedItems && selectedItems.length > 0) {
+                            //devo convertire item in formData
+                            const processedItem = getSelectedItem(args, formData, item);
+                            postMessageIframe(processedItem);
+                        }
+                        else {
+                            postMessageIframe(item);
+                        }
+                        //imposta 100% se sono all'ultimo item
+                        if (index === itemsToProcess.length - 1)
+                            setWaitPanelValue(index + 1);
                         // Attendi prima di passare al prossimo
                         setTimeout(() => {
                             setWaitPanelValue(index + 1);
@@ -120,7 +128,7 @@ const TMCustomButton = (props) => {
     useEffect(() => {
         if (loading || error)
             return;
-        if (!RunOnce && selectedItemsCount > 0) {
+        if (!RunOnce && itemsToProcess.length > 0) {
             // esegui per ogni item selezionato
             const controller = new AbortController();
             controller.signal.addEventListener('abort', () => {
@@ -128,7 +136,7 @@ const TMCustomButton = (props) => {
                 onClose?.();
             });
             setAbortController(controller);
-            setWaitPanelMaxValue(selectedItemsCount);
+            setWaitPanelMaxValue(itemsToProcess.length);
             executeSequentially(controller);
         }
         else {

package/lib/components/base/TMDataGrid.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import { IColumnProps, IDataGridOptions, IMasterDetailProps } from 'devextreme-react/data-grid';
 import dxDataGrid from 'devextreme/ui/data_grid';
 import { ITMCounterContainerProps } from './TMCounterContainer';
+import { TMContextMenuItemProps } from '../NewComponents/ContextMenu/types';
 export interface TMDataGridContextMenuItem {
     text: string;
     icon: string;
@@ -51,6 +52,8 @@ export interface TMDataGridProps<T> extends IDataGridOptions {
     masterDetail?: IMasterDetailProps;
     /** On Has Filters Change */
     onHasFiltersChange?: (hasFilters: boolean) => void;
+    /** Custom context menu items - when provided, replaces DevExtreme's native context menu with TMContextMenu */
+    customContextMenuItems?: TMContextMenuItemProps[];
 }
 declare const TMDataGrid: React.ForwardRefExoticComponent<TMDataGridProps<unknown> & React.RefAttributes<dxDataGrid<any, any>>>;
 export default TMDataGrid;

package/lib/components/base/TMDataGrid.js

@@ -4,6 +4,7 @@ import DataGrid, { Column, HeaderFilter, Selection, Scrolling, LoadPanel, Search
 import DataSource from 'devextreme/data/data_source';
 import { IconAll, IconSelected, IconVisible, SDKUI_Globals, SDKUI_Localizator } from '../../helper';
 import TMCounterContainer, { CounterItemKey } from './TMCounterContainer';
+import TMContextMenu from '../NewComponents/ContextMenu/TMContextMenu';
 ;
 export var TMDataGridPageSize;
 (function (TMDataGridPageSize) {
@@ -16,7 +17,7 @@ const TMDataGrid = React.forwardRef((props, ref) => {
     // main properties
     keyExpr = 'id', dataSource, focusedRowEnabled = true, hoverStateEnabled = true, focusedRowKey, selectedRowKeys = [], 
     // custom options
-    dataColumns = [], pageSize = TMDataGridPageSize.Large, showHeaderFilter = true, showFilterPanel = true, showHeaderColumnChooser = false, showLoadPanel = true, showSearchPanel = true, searchPanelToolbarPosition = 'before', searchPanelFocusStarting = false, counterConfig = { show: false, items: new Map() }, onHasFiltersChange, 
+    dataColumns = [], pageSize = TMDataGridPageSize.Large, showHeaderFilter = true, showFilterPanel = true, showHeaderColumnChooser = false, showLoadPanel = true, showSearchPanel = true, searchPanelToolbarPosition = 'before', searchPanelFocusStarting = false, counterConfig = { show: false, items: new Map() }, onHasFiltersChange, customContextMenuItems, 
     // events and callbacks
     onSelectionChanged, onFocusedRowChanged, onRowDblClick, onRowClick, onCellClick, onCellDblClick, onOptionChanged, onContentReady, onContextMenuPreparing, onInitialized, onEditorPreparing, onCellPrepared, onRowPrepared, onRowUpdating, onRowExpanded, onRowCollapsed, onRowUpdated, onSaved, onEditCanceled, onEditingStart, onEditingChange, customizeColumns, onKeyDown, scrolling = { mode: 'standard', useNative: SDKUI_Globals.userSettings?.themeSettings.gridSettings.useNativeScrollbar === 1 }, paging = { enabled: true, pageSize: pageSize }, pager = { visible: true, showInfo: true, showNavigationButtons: true }, selection = { mode: 'multiple', showCheckBoxesMode: "always", selectAllMode: "allPages" }, sorting, summary, stateStoring, grouping, groupPanel, filterRow, headerFilter, editing, rowDragging, masterDetail, 
     // other properties
@@ -29,10 +30,42 @@ const TMDataGrid = React.forwardRef((props, ref) => {
     const [totalRecordCount, setTotalRecordCount] = useState(0);
     const [visibleItemsCount, setVisibleItemsCount] = useState(0);
     const [hasFilters, setHasFilters] = useState(false);
+    // Custom context menu states
+    const [customContextMenuVisible, setCustomContextMenuVisible] = useState(false);
+    const [customContextMenuPosition, setCustomContextMenuPosition] = useState({ x: 0, y: 0 });
+    const [customContextMenuRowKey, setCustomContextMenuRowKey] = useState(undefined);
+    const gridContainerRef = useRef(null);
     useEffect(() => {
         const count = getRecordCount(dataSource);
         setTotalRecordCount(count);
     }, [dataSource]);
+    // Handle custom context menu (only when customContextMenuItems is provided)
+    useEffect(() => {
+        if (!customContextMenuItems || !gridContainerRef.current)
+            return;
+        const gridContainer = gridContainerRef.current;
+        const handleContextMenu = (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            // Get the clicked row
+            const target = e.target;
+            const rowElement = target.closest('.dx-data-row');
+            if (rowElement && internalRef.current) {
+                const rowIndex = Array.from(rowElement.parentElement?.children || []).indexOf(rowElement);
+                const rowKey = internalRef.current.instance().getKeyByRowIndex(rowIndex);
+                // Change focused row
+                internalRef.current.instance().option('focusedRowKey', rowKey);
+                // Show custom context menu
+                setCustomContextMenuVisible(true);
+                setCustomContextMenuPosition({ x: e.clientX, y: e.clientY });
+                setCustomContextMenuRowKey(rowKey);
+            }
+        };
+        gridContainer.addEventListener('contextmenu', handleContextMenu);
+        return () => {
+            gridContainer.removeEventListener('contextmenu', handleContextMenu);
+        };
+    }, [customContextMenuItems]);
     // Creating a ref to store the timestamp of the last selection change
     const lastSelectionChangeTime = useRef(Date.now());
     useEffect(() => {
@@ -101,6 +134,8 @@ const TMDataGrid = React.forwardRef((props, ref) => {
             }
             return {
                 ...item,
+                // Ensure icon is not null/undefined to prevent DevExtreme errors
+                icon: item.icon || '',
                 disabled: disabled || disabledCalculation, // An item is disabled if it's explicitly set to `true` or if the calculation above determines so
                 // Define the behavior when the menu item is clicked
                 onClick: () => {
@@ -132,10 +167,51 @@ const TMDataGrid = React.forwardRef((props, ref) => {
             };
         });
     }, [focusedRowEnabled, focusedRowKey, selectedRowKeys]);
+    // Process custom context menu items (for TMContextMenuItemProps)
+    const processCustomContextMenuItems = useCallback((items, rowID) => {
+        return items.map(item => {
+            let disabled = item.disabled ?? false;
+            let disabledCalculation = false;
+            const id = focusedRowEnabled ? focusedRowKey : rowID;
+            if (item.operationType === 'singleRow') {
+                disabledCalculation = selectedRowKeys.length > 1 || id === undefined;
+            }
+            if (item.operationType === 'multiRow') {
+                disabledCalculation = selectedRowKeys.length === 0 && id === undefined;
+            }
+            const originalOnClick = item.onClick;
+            return {
+                ...item,
+                disabled: disabled || disabledCalculation,
+                onClick: originalOnClick ? () => {
+                    if (item.operationType === 'singleRow' && id !== undefined) {
+                        originalOnClick(id);
+                    }
+                    else if (item.operationType === 'multiRow' && id !== undefined) {
+                        if (selectedRowKeys.length > 0) {
+                            originalOnClick(selectedRowKeys);
+                        }
+                        else {
+                            originalOnClick([id]);
+                        }
+                    }
+                    else {
+                        originalOnClick();
+                    }
+                } : undefined,
+                submenu: item.submenu ? processCustomContextMenuItems(item.submenu, id) : undefined,
+            };
+        });
+    }, [focusedRowEnabled, focusedRowKey, selectedRowKeys]);
     // Handle context menu preparation
     const onContextMenuPreparingCallback = useCallback((e) => {
         if (e === undefined)
             return;
+        // If custom context menu is enabled, completely disable DevExtreme's native context menu
+        if (customContextMenuItems && e.target === 'content') {
+            e.items = undefined;
+            return;
+        }
         if (onContextMenuPreparing)
             onContextMenuPreparing(e);
         if (e.target === 'content') {
@@ -157,7 +233,7 @@ const TMDataGrid = React.forwardRef((props, ref) => {
                 }
             });
         }
-    }, [updateContextMenuItems, onContextMenuPreparing, showHeaderColumnChooser]);
+    }, [updateContextMenuItems, onContextMenuPreparing, showHeaderColumnChooser, customContextMenuItems]);
     // Handle toolbar preparation, especially for the search panel
     const onToolbarPreparingCallback = useCallback((e) => {
         if (e === undefined || e.toolbarOptions === undefined || e.toolbarOptions.items === undefined)
@@ -226,15 +302,19 @@ const TMDataGrid = React.forwardRef((props, ref) => {
         // Propaga l'evento originale
         onOptionChanged?.(e);
     }, [onOptionChanged, onHasFiltersChange]);
-    return _jsxs("div", { style: { width: "100%", height: "100%" }, children: [_jsx("div", { style: { width: "100%", height: counterConfig.show ? "calc(100% - 25px)" : "100%" }, children: _jsxs(DataGrid, { ref: internalRef, id: id, className: `tm-datagrid ${hasFilters ? 'has-filters' : ''}`, 
+    return _jsxs("div", { style: { width: "100%", height: "100%" }, children: [_jsx("div", { ref: gridContainerRef, style: { width: "100%", height: counterConfig.show ? "calc(100% - 25px)" : "100%" }, children: _jsxs(DataGrid, { ref: internalRef, id: id, className: `tm-datagrid ${hasFilters ? 'has-filters' : ''}`, 
                     // main properties
                     keyExpr: keyExpr, dataSource: dataSource, selectedRowKeys: selectedRowKeys, focusedRowEnabled: focusedRowEnabled, hoverStateEnabled: hoverStateEnabled, 
                     // events and callbacks
-                    onSelectionChanged: onSelectionChangedCallback, onRowDblClick: onRowDblClickCallback, onRowPrepared: onRowPrepared, onContextMenuPreparing: onContextMenuPreparingCallback, onToolbarPreparing: onToolbarPreparingCallback, onFocusedRowChanged: onFocusedRowChanged, onRowClick: onRowClick, onCellClick: onCellClick, onCellDblClick: onCellDblClick, onOptionChanged: onOptionChangedCallback, onContentReady: onContentReadyCallback, onInitialized: onInitialized, customizeColumns: customizeColumns, onEditorPreparing: onEditorPreparing, onCellPrepared: onCellPrepared, onRowUpdating: onRowUpdating, onRowExpanded: onRowExpanded, onRowCollapsed: onRowCollapsed, onRowUpdated: onRowUpdated, onSaved: onSaved, onEditCanceled: onEditCanceled, onEditingStart: onEditingStart, onEditingChange: onEditingChange, onKeyDown: onKeyDown, 
+                    onSelectionChanged: onSelectionChangedCallback, onRowDblClick: onRowDblClickCallback, onRowPrepared: onRowPrepared, onContextMenuPreparing: customContextMenuItems ? undefined : onContextMenuPreparingCallback, onToolbarPreparing: onToolbarPreparingCallback, onFocusedRowChanged: onFocusedRowChanged, onRowClick: onRowClick, onCellClick: onCellClick, onCellDblClick: onCellDblClick, onOptionChanged: onOptionChangedCallback, onContentReady: onContentReadyCallback, onInitialized: onInitialized, customizeColumns: customizeColumns, onEditorPreparing: onEditorPreparing, onCellPrepared: onCellPrepared, onRowUpdating: onRowUpdating, onRowExpanded: onRowExpanded, onRowCollapsed: onRowCollapsed, onRowUpdated: onRowUpdated, onSaved: onSaved, onEditCanceled: onEditCanceled, onEditingStart: onEditingStart, onEditingChange: onEditingChange, onKeyDown: onKeyDown, 
                     // other properties
                     disabled: disabled, autoNavigateToFocusedRow: autoNavigateToFocusedRow, focusedRowKey: focusedRowKey, columnHidingEnabled: columnHidingEnabled, columnResizingMode: columnResizingMode, columnAutoWidth: columnAutoWidth, allowColumnResizing: allowColumnResizing, allowColumnReordering: allowColumnReordering, showBorders: showBorders, showRowLines: showRowLines, showColumnLines: showColumnLines, showColumnHeaders: showColumnHeaders, rowAlternationEnabled: rowAlternationEnabled, wordWrapEnabled: wordWrapEnabled, noDataText: noDataText, 
                     // styles
-                    width: width, height: height, style: { userSelect: 'none' }, children: [dataColumns.map((column, index) => (_jsx(Column, { ...column }, column.caption + index.toString()))), sorting && _jsx(Sorting, { ...sorting }), selection && _jsx(Selection, { ...selection }), scrolling && _jsx(Scrolling, { ...scrolling }), summary && _jsx(Summary, { ...summary }), showHeaderFilter && _jsx(HeaderFilter, { visible: true, ...headerFilter }), rowDragging && _jsx(RowDragging, { ...rowDragging }), filterRow && _jsx(FilterRow, { ...filterRow }), showFilterPanel && _jsx(FilterPanel, { visible: true }), showHeaderColumnChooser && _jsxs(ColumnChooser, { height: "400px", enabled: !showHeaderColumnChooser, mode: "select", children: [_jsx(Position, { my: "center", at: "center", of: window }), _jsx(ColumnChooserSearch, { enabled: true }), _jsx(ColumnChooserSelection, { allowSelectAll: false, selectByClick: true, recursive: true })] }), stateStoring && _jsx(StateStoring, { ...stateStoring }), groupPanel && _jsx(GroupPanel, { ...groupPanel }), _jsx(Grouping, { contextMenuEnabled: true, ...grouping }), _jsx(LoadPanel, { enabled: showLoadPanel }), _jsx(SearchPanel, { visible: showSearchPanel, searchVisibleColumnsOnly: true, highlightSearchText: true }), editing && _jsx(Editing, { ...editing }), paging && _jsx(Paging, { ...paging }), pager && _jsx(Pager, { ...pager, visible: totalRecordCount > pageSize }), masterDetail && _jsx(MasterDetail, { ...masterDetail })] }) }), counterConfig.show && _jsx("div", { style: { width: "100%", height: "25px", display: "flex", alignItems: "center", gap: "15px", backgroundColor: "#e0e0e0" }, children: _jsx(TMCounterContainer, { items: counterValues, bgColorContainer: counterConfig.bgColorContainer, bgColorItem: counterConfig.bgColorItem, hoverColorItem: counterConfig.hoverColorItem, textColorItem: counterConfig.textColorItem }) })] });
+                    width: width, height: height, style: { userSelect: 'none' }, children: [dataColumns.map((column, index) => (_jsx(Column, { ...column }, column.caption + index.toString()))), sorting && _jsx(Sorting, { ...sorting }), selection && _jsx(Selection, { ...selection }), scrolling && _jsx(Scrolling, { ...scrolling }), summary && _jsx(Summary, { ...summary }), showHeaderFilter && _jsx(HeaderFilter, { visible: true, ...headerFilter }), rowDragging && _jsx(RowDragging, { ...rowDragging }), filterRow && _jsx(FilterRow, { ...filterRow }), showFilterPanel && _jsx(FilterPanel, { visible: true }), showHeaderColumnChooser && _jsxs(ColumnChooser, { height: "400px", enabled: !showHeaderColumnChooser, mode: "select", children: [_jsx(Position, { my: "center", at: "center", of: window }), _jsx(ColumnChooserSearch, { enabled: true }), _jsx(ColumnChooserSelection, { allowSelectAll: false, selectByClick: true, recursive: true })] }), stateStoring && _jsx(StateStoring, { ...stateStoring }), groupPanel && _jsx(GroupPanel, { ...groupPanel }), _jsx(Grouping, { contextMenuEnabled: true, ...grouping }), _jsx(LoadPanel, { enabled: showLoadPanel }), _jsx(SearchPanel, { visible: showSearchPanel, searchVisibleColumnsOnly: true, highlightSearchText: true }), editing && _jsx(Editing, { ...editing }), paging && _jsx(Paging, { ...paging }), pager && _jsx(Pager, { ...pager, visible: totalRecordCount > pageSize }), masterDetail && _jsx(MasterDetail, { ...masterDetail })] }) }), counterConfig.show && _jsx("div", { style: { width: "100%", height: "25px", display: "flex", alignItems: "center", gap: "15px", backgroundColor: "#e0e0e0" }, children: _jsx(TMCounterContainer, { items: counterValues, bgColorContainer: counterConfig.bgColorContainer, bgColorItem: counterConfig.bgColorItem, hoverColorItem: counterConfig.hoverColorItem, textColorItem: counterConfig.textColorItem }) }), customContextMenuItems && (_jsx(TMContextMenu, { items: processCustomContextMenuItems(customContextMenuItems, customContextMenuRowKey), externalControl: {
+                    visible: customContextMenuVisible,
+                    position: customContextMenuPosition,
+                    onClose: () => setCustomContextMenuVisible(false)
+                } }))] });
 });
 export default TMDataGrid;
 const getRecordCount = (dataSource) => {