@topconsultnpm/sdkui-react 6.20.0-dev1.13 → 6.20.0-dev1.130

package/lib/components/base/TMCustomButton.js

@@ -4,31 +4,68 @@ import TMModal from './TMModal';
 import styled from 'styled-components';
 import { SDKUI_Localizator, TMLayoutWaitingContainer } from '../..';
 import { getButtonAttributes, getSelectedItem } from '../../helper/dcmtsHelper';
+import { DeviceType, useDeviceType } from './TMDeviceProvider';
 const IframeContainer = styled.div `
   display: flex;
   height: 100%;
   flex-direction: column;
-  padding-left: 15px;
+  position: relative;
 `;
 const StyledIframe = styled.iframe `
   border: none;
   flex: 1;
 `;
+const LoadingOverlay = styled.div `
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(128, 128, 128, 0.3);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+
+  &::after {
+    content: '';
+    width: 40px;
+    height: 40px;
+    border: 4px solid rgba(255, 255, 255, 0.3);
+    border-top-color: #fff;
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+  }
+
+  @keyframes spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+`;
 const TMCustomButton = (props) => {
     const { button, isModal = true, formData, selectedItems, onClose } = props;
     const { appName: scriptUrl, arguments: args } = button;
+    const Device = useDeviceType();
     const iframeRef = useRef(null);
     const attributes = useMemo(() => getButtonAttributes(args, formData, selectedItems), [args, formData, selectedItems]);
     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(() => {
+        if (!scriptUrl)
+            return '';
+        const separator = scriptUrl.includes('?') ? '&' : '?';
+        return `${scriptUrl}${separator}t=${Date.now()}`;
+    }, [scriptUrl]);
     const targetOrigin = useMemo(() => {
         if (!scriptUrl)
             return '*';
@@ -41,26 +78,35 @@ const TMCustomButton = (props) => {
         }
     }, [scriptUrl]);
     const handleLoad = () => setLoading(false);
+    const isMobile = Device === DeviceType.MOBILE;
     const handleError = () => {
         setLoading(false);
         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);
@@ -82,8 +128,7 @@ const TMCustomButton = (props) => {
     useEffect(() => {
         if (loading || error)
             return;
-        //if(error) clearTimeout(timeoutIframe);
-        if (!RunOnce && selectedItemsCount > 0) {
+        if (!RunOnce && itemsToProcess.length > 0) {
             // esegui per ogni item selezionato
             const controller = new AbortController();
             controller.signal.addEventListener('abort', () => {
@@ -91,7 +136,7 @@ const TMCustomButton = (props) => {
                 onClose?.();
             });
             setAbortController(controller);
-            setWaitPanelMaxValue(selectedItemsCount);
+            setWaitPanelMaxValue(itemsToProcess.length);
             executeSequentially(controller);
         }
         else {
@@ -103,7 +148,6 @@ const TMCustomButton = (props) => {
                     onClose?.();
                 }, 2000);
             }
-            //clearTimeout(timeoutIframe);
         }
     }, [loading, error, RunOnce]);
     useEffect(() => {
@@ -112,7 +156,7 @@ const TMCustomButton = (props) => {
             onClose?.();
         }
     }, []);
-    const iframeContent = (_jsxs(IframeContainer, { style: !RunOnce ? { visibility: 'hidden' } : {}, children: [error && _jsx("div", { children: "Si \u00E8 verificato un errore nel caricamento del contenuto." }), !error && _jsx(StyledIframe, { ref: iframeRef, loading: 'lazy', onLoad: handleLoad, onError: handleError, src: scriptUrl })] }));
-    return isModal && RunOnce ? (_jsx(TMModal, { title: button.title, width: '60%', height: '70%', resizable: true, expandable: true, onClose: onClose, children: iframeContent })) : !RunOnce && (_jsxs(_Fragment, { children: [_jsx(TMLayoutWaitingContainer, { showWaitPanel: showWaitPanel, waitPanelTitle: SDKUI_Localizator.CustomButtonAction, showWaitPanelPrimary: true, waitPanelTextPrimary: waitPanelText, waitPanelValuePrimary: waitPanelValue, waitPanelMaxValuePrimary: waitPanelMaxValue, showWaitPanelSecondary: false, isCancelable: true, abortController: abortController, children: undefined }), iframeContent] }));
+    const iframeContent = (_jsxs(IframeContainer, { style: !RunOnce ? { visibility: 'hidden' } : {}, children: [loading && _jsx(LoadingOverlay, {}), error && _jsx("div", { children: "Si \u00E8 verificato un errore nel caricamento del contenuto." }), !error && _jsx(StyledIframe, { ref: iframeRef, loading: 'lazy', onLoad: handleLoad, onError: handleError, src: iframeUrl })] }));
+    return isModal && RunOnce ? (_jsx(TMModal, { title: button.title, width: isMobile ? '95%' : '60%', height: isMobile ? '95%' : '70%', resizable: isMobile ? false : true, expandable: isMobile ? false : true, onClose: onClose, children: iframeContent })) : !RunOnce && (_jsxs(_Fragment, { children: [_jsx(TMLayoutWaitingContainer, { showWaitPanel: showWaitPanel, waitPanelTitle: SDKUI_Localizator.CustomButtonAction, showWaitPanelPrimary: true, waitPanelTextPrimary: waitPanelText, waitPanelValuePrimary: waitPanelValue, waitPanelMaxValuePrimary: waitPanelMaxValue, showWaitPanelSecondary: false, isCancelable: true, abortController: abortController, children: undefined }), iframeContent] }));
 };
 export default TMCustomButton;

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;
@@ -31,16 +32,16 @@ export interface TMDataGridProps<T> extends IDataGridOptions {
     pageSize?: TMDataGridPageSize;
     /** Configures the search panel position in the toolbar */
     searchPanelToolbarPosition?: 'before' | 'default';
-    /** if visible, set focus on SearchPanel */
-    searchPanelFocusStarting?: boolean;
+    /** Trigger to set focus on SearchPanel (only if visible) - change the number to trigger focus */
+    searchPanelFocusTrigger?: number;
     /** Show the header filter */
     showHeaderFilter?: boolean;
     /** Show the filter panel */
     showFilterPanel?: boolean;
     /** Show the load panel */
     showLoadPanel?: boolean;
-    /** Show the column chooser */
-    showColumnChooser?: boolean;
+    /** Show the header column chooser in context menu */
+    showHeaderColumnChooser?: boolean;
     /** Show the search panel */
     showSearchPanel?: boolean;
     /** Show the group panel */
@@ -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

@@ -1,9 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
-import DataGrid, { Column, HeaderFilter, Selection, Scrolling, LoadPanel, SearchPanel, Pager, Sorting, Paging, FilterPanel, ColumnChooser, Grouping, GroupPanel, Summary, Editing, FilterRow, StateStoring, RowDragging, MasterDetail } from 'devextreme-react/data-grid';
+import DataGrid, { Column, HeaderFilter, Selection, Scrolling, LoadPanel, SearchPanel, Pager, Sorting, Paging, FilterPanel, ColumnChooser, Grouping, GroupPanel, Summary, Editing, FilterRow, StateStoring, RowDragging, MasterDetail, Position, ColumnChooserSearch, ColumnChooserSelection } from 'devextreme-react/data-grid';
 import DataSource from 'devextreme/data/data_source';
 import { IconAll, IconSelected, IconVisible, SDKUI_Globals, SDKUI_Localizator } from '../../helper';
 import TMCounterContainer, { CounterItemKey } from './TMCounterContainer';
+import TMContextMenu from '../NewComponents/ContextMenu/TMContextMenu';
+import { useLongPress } from '../NewComponents/ContextMenu/useLongPress';
 ;
 export var TMDataGridPageSize;
 (function (TMDataGridPageSize) {
@@ -16,9 +18,9 @@ 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, 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', searchPanelFocusTrigger = 0, 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, columnChooser, grouping, groupPanel, filterRow, headerFilter, editing, rowDragging, masterDetail, 
+    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
     disabled = false, autoNavigateToFocusedRow = true, columnResizingMode = 'widget', columnHidingEnabled = true, columnAutoWidth = true, allowColumnResizing = true, allowColumnReordering = true, showBorders = true, showRowLines = SDKUI_Globals.userSettings?.themeSettings.gridSettings.showRowLines === 1, showColumnLines = SDKUI_Globals.userSettings?.themeSettings.gridSettings.showColumnLines === 1, showColumnHeaders = true, rowAlternationEnabled = false, wordWrapEnabled = false, noDataText, 
     // styles
@@ -29,10 +31,84 @@ 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 search panel focus when trigger changes
+    useEffect(() => {
+        if (!searchPanelFocusTrigger || searchPanelFocusTrigger <= 0 || !showSearchPanel || !internalRef.current)
+            return;
+        setTimeout(() => {
+            const searchInput = internalRef.current?.instance().element().querySelector('.dx-datagrid-search-panel input');
+            if (searchInput) {
+                searchInput.focus();
+            }
+        }, 100);
+    }, [searchPanelFocusTrigger, showSearchPanel]);
+    // 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 (if any)
+            const target = e.target;
+            const rowElement = target.closest('.dx-data-row');
+            if (rowElement && internalRef.current) {
+                // Clicked on a row - focus that row
+                const rowIndex = Array.from(rowElement.parentElement?.children || []).indexOf(rowElement);
+                const rowKey = internalRef.current.instance().getKeyByRowIndex(rowIndex);
+                internalRef.current.instance().option('focusedRowKey', rowKey);
+                setCustomContextMenuRowKey(rowKey);
+            }
+            else {
+                setCustomContextMenuRowKey(focusedRowKey);
+            }
+            setCustomContextMenuVisible(true);
+            setCustomContextMenuPosition({ x: e.clientX, y: e.clientY });
+        };
+        gridContainer.addEventListener('contextmenu', handleContextMenu);
+        return () => {
+            gridContainer.removeEventListener('contextmenu', handleContextMenu);
+        };
+    }, [customContextMenuItems, focusedRowKey]);
+    // iOS-specific: Handle touch for focused row change and long-press for context menu
+    useLongPress({
+        containerRef: gridContainerRef,
+        targetSelector: '.dx-data-row',
+        enabled: !!customContextMenuItems,
+        onTouchStart: ({ rowElement }) => {
+            // Change focused row immediately on touch (fixes focus issue)
+            if (!internalRef.current)
+                return;
+            const rowIndex = Array.from(rowElement.parentElement?.children || []).indexOf(rowElement);
+            const rowKey = internalRef.current.instance().getKeyByRowIndex(rowIndex);
+            if (rowKey !== undefined && rowKey !== focusedRowKey) {
+                internalRef.current.instance().option('focusedRowKey', rowKey);
+            }
+        },
+        onLongPress: ({ clientX, clientY, target }) => {
+            if (!internalRef.current)
+                return;
+            const rowElement = target.closest('.dx-data-row');
+            if (!rowElement)
+                return;
+            const rowIndex = Array.from(rowElement.parentElement?.children || []).indexOf(rowElement);
+            const rowKey = internalRef.current.instance().getKeyByRowIndex(rowIndex);
+            // Show context menu
+            setCustomContextMenuVisible(true);
+            setCustomContextMenuPosition({ x: clientX, y: clientY });
+            setCustomContextMenuRowKey(rowKey);
+        },
+    });
     // Creating a ref to store the timestamp of the last selection change
     const lastSelectionChangeTime = useRef(Date.now());
     useEffect(() => {
@@ -101,6 +177,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,12 +210,68 @@ const TMDataGrid = React.forwardRef((props, ref) => {
             };
         });
     }, [focusedRowEnabled, focusedRowKey, selectedRowKeys]);
-    // Handle context menu preparation
+    // 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]);
+    // Gestisce la preparazione del menu contestuale della griglia (header e righe)
     const onContextMenuPreparingCallback = useCallback((e) => {
         if (e === undefined)
             return;
+        // MENU DELL'HEADER: Aggiunge l'opzione "Mostra/nascondi colonne" al menu contestuale dell'intestazione
+        if (e.target === 'header' && showHeaderColumnChooser) {
+            e.items = e.items || [];
+            e.items.push({
+                text: SDKUI_Localizator.ShowColumnSelection,
+                icon: 'columnchooser',
+                onItemClick: () => {
+                    internalRef.current?.instance().showColumnChooser();
+                }
+            });
+        }
+        // MENU PERSONALIZZATO: Se è configurato un menu custom, disabilita completamente il menu nativo di DevExtreme
+        // Il menu custom (TMContextMenu) viene gestito separatamente tramite event listener e stato locale
+        if (customContextMenuItems && e.target === 'content') {
+            e.items = undefined;
+            return;
+        }
+        // Chiama il callback esterno se fornito (permette personalizzazioni aggiuntive dal parent)
         if (onContextMenuPreparing)
             onContextMenuPreparing(e);
+        // MENU NATIVO DELLE RIGHE: Aggiorna lo stato (enabled/disabled) delle voci in base alla selezione
+        // Applica la logica per operazioni singleRow (1 riga) e multiRow (1+ righe)
         if (e.target === 'content') {
             e.items = e.items || [];
             if (e.items.length > 0) {
@@ -146,7 +280,7 @@ const TMDataGrid = React.forwardRef((props, ref) => {
                 e.items = [...updatedContextMenuItems];
             }
         }
-    }, [updateContextMenuItems, onContextMenuPreparing]);
+    }, [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)
@@ -171,10 +305,9 @@ const TMDataGrid = React.forwardRef((props, ref) => {
             return;
         // Update state with the current number of visible rows in the DataGrid
         setVisibleItemsCount(internalRef.current.instance()?.getVisibleRows()?.length ?? 0);
-        // Focusing SearchPanel
-        if (showSearchPanel && searchPanelFocusStarting) {
+        // Focusing SearchPanel on content ready
+        if (showSearchPanel && searchPanelFocusTrigger && searchPanelFocusTrigger > 0) {
             // Use a small delay to ensure the DOM is fully rendered before trying to focus
-            // This can prevent issues with the focus not being set correctly
             setTimeout(() => {
                 const searchInput = internalRef.current?.instance().element().querySelector('.dx-datagrid-search-panel input');
                 if (searchInput) {
@@ -182,7 +315,7 @@ const TMDataGrid = React.forwardRef((props, ref) => {
                 }
             }, 100);
         }
-    }, [onContentReady]);
+    }, [onContentReady, showSearchPanel, searchPanelFocusTrigger]);
     const onOptionChangedCallback = useCallback((e) => {
         // Assicurati che component esista
         const grid = e.component;
@@ -215,7 +348,7 @@ 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
@@ -223,7 +356,16 @@ const TMDataGrid = React.forwardRef((props, ref) => {
                     // 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 }), columnChooser && _jsx(ColumnChooser, { ...columnChooser }), 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',
+                        // Temporary: iOS-specific styles to prevent default long-press menu and text selection
+                        WebkitTouchCallout: 'none',
+                        WebkitUserSelect: '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, { target: ".dx-data-row", items: processCustomContextMenuItems(customContextMenuItems, customContextMenuRowKey), externalControl: {
+                    visible: customContextMenuVisible,
+                    position: customContextMenuPosition,
+                    onClose: () => setCustomContextMenuVisible(false)
+                } }))] });
 });
 export default TMDataGrid;
 const getRecordCount = (dataSource) => {

package/lib/components/base/TMDropDownMenu.js

@@ -1,9 +1,8 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useState, forwardRef, useRef, useImperativeHandle } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useRef, useImperativeHandle } from 'react';
 import styled from 'styled-components';
-import ContextMenu from 'devextreme-react/context-menu';
-import { FontSize, TMColors } from '../../utils/theme';
-import { genUniqueId } from '../../helper';
+import { ContextMenu as TMContextMenu } from '../NewComponents/ContextMenu';
+import { TMColors } from '../../utils/theme';
 const StyledContent = styled.div `
     cursor: pointer;
     border-radius: ${props => props.$borderRadius};
@@ -13,6 +12,8 @@ const StyledContent = styled.div `
     opacity: ${props => props.$disabled ? 0.4 : 1};
     pointer-events: ${props => props.$disabled ? 'none' : ''};
     user-select: none;
+    -webkit-touch-callout: none;
+  -webkit-user-select: none;
     display: flex;
     align-items: center;
 
@@ -22,24 +23,26 @@ const StyledContent = styled.div `
         border-bottom-color: ${TMColors.primary};
     }
 `;
-const StyledMenuItem = styled.div `
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 6px;
-    width: 100%;
-    font-size: ${FontSize.defaultFontSize};
-`;
 const TMDropDownMenu = forwardRef(({ content, items, disabled = false, color = TMColors.text_normal, backgroundColor = TMColors.default_background, borderRadius, onMenuShown }, ref) => {
-    const [id, setID] = useState('');
-    const dropDownMenuElementRef = useRef(null); // Ref all'elemento DOM div principale
-    useEffect(() => { setID(genUniqueId()); }, [content]);
+    const dropDownMenuElementRef = useRef(null);
     useImperativeHandle(ref, () => ({
         focus: () => {
             dropDownMenuElementRef.current?.focus();
         },
     }));
-    const renderItemTemplate = (itemData) => (_jsxs(StyledMenuItem, { children: [itemData.icon && _jsx("div", { style: { display: 'flex', alignItems: 'center' }, children: itemData.icon }), _jsx("span", { style: { flexGrow: 1 }, children: itemData.text }), itemData.items && _jsx("span", { className: "dx-icon-spinright dx-icon", style: { marginLeft: '10px' } })] }));
-    return (_jsxs(_Fragment, { children: [_jsx(StyledContent, { id: `idContainer${id}`, ref: dropDownMenuElementRef, tabIndex: disabled ? -1 : 0, "$disabled": disabled, "$color": color, "$backgroundColor": backgroundColor, "$borderRadius": borderRadius, children: content }), _jsx(ContextMenu, { target: `#idContainer${id}`, dataSource: items, showEvent: 'click', itemRender: renderItemTemplate, onShown: (e) => onMenuShown?.(), onHidden: (e) => dropDownMenuElementRef.current?.focus() })] }));
+    // Converter function: ITMDropDownMenuItem -> TMContextMenuItemProps
+    const convertToContextMenuItems = (dropDownItems) => {
+        if (!dropDownItems)
+            return [];
+        return dropDownItems.map(item => ({
+            name: item.text,
+            icon: item.icon,
+            disabled: item.disabled,
+            beginGroup: item.beginGroup,
+            onClick: item.onClick,
+            submenu: item.items ? convertToContextMenuItems(item.items) : undefined,
+        }));
+    };
+    return (_jsx(TMContextMenu, { items: convertToContextMenuItems(items), trigger: "left", children: _jsx(StyledContent, { ref: dropDownMenuElementRef, tabIndex: disabled ? -1 : 0, "$disabled": disabled, "$color": color, "$backgroundColor": backgroundColor, "$borderRadius": borderRadius, children: content }) }));
 });
 export default TMDropDownMenu;

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

@@ -1,4 +1,5 @@
-import { FileItem, TMFileManagerContextMenuItem } from "./TMFileManagerUtils";
+import { FileItem } from "./TMFileManagerUtils";
+import { TMContextMenuItemProps } from '../NewComponents/ContextMenu/types';
 interface TMFileManagerProps {
     /** The currently focused file */
     focusedFile: FileItem | undefined;
@@ -17,9 +18,9 @@ interface TMFileManagerProps {
     /** Represents the file system tree structure */
     treeFs: FileItem;
     /** Context menu items for folders */
-    folderContextMenuItems: Array<TMFileManagerContextMenuItem>;
+    folderContextMenuItems: Array<TMContextMenuItemProps>;
     /** Context menu items for files */
-    fileContextMenuItems: Array<TMFileManagerContextMenuItem>;
+    fileContextMenuItems: Array<TMContextMenuItemProps>;
     /** Optional: Callback to handle folder selection changes */
     handleSelectedFolder?: (folderItem: FileItem | undefined) => void;
     /** Optional: Callback for handling double-click events on a file */