@topconsultnpm/sdkui-react 6.20.0-dev1.11 → 6.20.0-dev1.111

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};
@@ -22,24 +21,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 */

package/lib/components/base/TMFileManager.js

@@ -1,13 +1,14 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { extractTextsFromDirectory, findFileItems, setFolderTreeViewItems } from "./TMFileManagerUtils";
 import { DeviceType, useDeviceType } from "./TMDeviceProvider";
-import { formatBytes, Globalization, IconDashboard, IconFolder, IconHide, IconList, IconMenuVertical, IconRefresh, IconShow, SDKUI_Globals, SDKUI_Localizator, svgToString, TMCommandsContextMenu, TMConditionalWrapper } from "../../helper";
+import { formatBytes, Globalization, IconDashboard, IconFolder, IconHide, IconList, IconMenuVertical, IconRefresh, IconShow, SDKUI_Globals, SDKUI_Localizator, TMCommandsContextMenu, TMConditionalWrapper } from "../../helper";
+import TMContextMenu from '../NewComponents/ContextMenu/TMContextMenu';
 import TMTooltip from "./TMTooltip";
 import { TMColors } from "../../utils/theme";
 import TMPanel from "./TMPanel";
 import { TMSplitterLayout } from "./TMLayout";
-import { ContextMenu, TreeView } from "devextreme-react";
+import { TreeView } from "devextreme-react";
 import Toolbar, { Item as ToolbarItem } from 'devextreme-react/toolbar';
 import TMButton from "./TMButton";
 import { TMSearchBar } from "../sidebar/TMHeader";
@@ -29,12 +30,12 @@ const TMFileManager = (props) => {
     const [viewMode, setViewMode] = useState(initialViewMode ?? 'details');
     // State to store transformed directory data for file manager
     const [treeViewData, setTreeViewData] = useState([]);
-    // State to store the anchor element for the tree view context men
-    const [treeViewAnchor, setTreeViewAnchor] = useState(null);
+    // State to store the tree view context menu control
+    const [treeViewContextMenuControl, setTreeViewContextMenuControl] = useState({ visible: false, position: { x: 0, y: 0 } });
     // State to store the filtered file items after search or filtering
     const [filteredFileItems, setFilteredFileItems] = useState([]);
-    // State to store the anchor element for draft thumbnails view
-    const [draftThumbViewAnchor, setDraftThumbViewAnchor] = useState(null);
+    // State to store the thumbnails view context menu control
+    const [thumbViewContextMenuControl, setThumbViewContextMenuControl] = useState({ visible: false, position: { x: 0, y: 0 } });
     // State to store the search text entered by the user
     const [searchText, setSearchText] = useState('');
     // State to control the collapse/expand of the left panel
@@ -98,21 +99,21 @@ const TMFileManager = (props) => {
     const onBackCallback = useCallback(() => {
         setOpenDraftList(false);
     }, []);
-    const toolbar = useMemo(() => _jsxs(_Fragment, { children: [_jsx(IconMenuVertical, { id: "TMPanel-FileManager-Commands-Header", color: 'white', cursor: 'pointer' }), _jsx(TMCommandsContextMenu, { target: '#TMPanel-FileManager-Commands-Header', menuItems: [
-                    {
-                        icon: isLeftPanelCollapsed ? "eyeclose" : "eyeopen",
-                        onClick: () => setIsLeftPanelCollapsed(prev => !prev),
-                        text: isLeftPanelCollapsed ? SDKUI_Localizator.ShowLeftPanel : SDKUI_Localizator.HideLeftPanel,
-                    },
-                    {
-                        icon: svgToString(_jsx(IconRefresh, {})),
-                        onClick: async () => await refreshCallback(),
-                        text: SDKUI_Localizator.Refresh,
-                    },
-                ], showEvent: "click" })] }), [isLeftPanelCollapsed]);
+    const toolbar = useMemo(() => _jsx(TMCommandsContextMenu, { target: '#TMPanel-FileManager-Commands-Header', menuItems: [
+            {
+                icon: isLeftPanelCollapsed ? _jsx(IconShow, {}) : _jsx(IconHide, {}),
+                onClick: () => setIsLeftPanelCollapsed(prev => !prev),
+                text: isLeftPanelCollapsed ? SDKUI_Localizator.ShowLeftPanel : SDKUI_Localizator.HideLeftPanel,
+            },
+            {
+                icon: _jsx(IconRefresh, {}),
+                onClick: async () => await refreshCallback(),
+                text: SDKUI_Localizator.Refresh,
+            },
+        ], showEvent: "click", children: _jsx(IconMenuVertical, { id: "TMPanel-FileManager-Commands-Header", color: 'white', cursor: 'pointer' }) }), [isLeftPanelCollapsed]);
     // Handle closing the context menu
     const closeTreeViewContextMenu = useCallback(() => {
-        setTreeViewAnchor(null);
+        setTreeViewContextMenuControl(prev => ({ ...prev, visible: false }));
     }, []);
     const handleTreeViewItemClick = useCallback((e) => {
         if (!e)
@@ -161,7 +162,10 @@ const TMFileManager = (props) => {
         if (event === undefined)
             return;
         event.preventDefault();
-        setTreeViewAnchor(event.currentTarget);
+        setTreeViewContextMenuControl({
+            visible: true,
+            position: { x: event.clientX, y: event.clientY }
+        });
         handleFocusedFolder?.(undefined);
     }, []);
     const onItemTreeViewContextMenu = useCallback((contextMenuEvent) => {
@@ -198,11 +202,15 @@ const TMFileManager = (props) => {
     const handleDragLeave = (e) => {
         setIsDragging(false);
     };
-    return _jsx(TMPanel, { title: SDKUI_Localizator.Drafts, totalItems: dcmtsFound ?? 0, showHeader: showPanel, onBack: (isMobile && openDraftList) ? onBackCallback : undefined, onClose: onClosePanel, allowMaximize: !isMobile ? allowMaximize : false, onMaximize: !isMobile ? onMaximizePanel : undefined, onHeaderDoubleClick: !isMobile ? onMaximizePanel : undefined, toolbar: toolbar, children: _jsx("div", { style: { flexDirection: "column", height: "100%", width: "100%", }, children: _jsxs(TMConditionalWrapper, { condition: !isMobile, wrapper: children => _jsx("div", { style: { display: "flex", flexGrow: 1, height: "100%" }, children: _jsx(TMSplitterLayout, { direction: 'horizontal', showSeparator: true, separatorColor: 'transparent', separatorActiveColor: 'transparent', min: ['0', '0'], start: [isLeftPanelCollapsed ? '0%' : "32%", isLeftPanelCollapsed ? '100%' : "68%"], children: children }, "TMWGs-panels-treeView") }), children: [_jsxs("div", { style: {
+    return _jsx(TMPanel, { title: SDKUI_Localizator.Drafts, totalItems: dcmtsFound ?? 0, showHeader: showPanel, onBack: (isMobile && openDraftList) ? onBackCallback : undefined, onClose: onClosePanel, allowMaximize: !isMobile ? allowMaximize : false, onMaximize: !isMobile ? onMaximizePanel : undefined, onHeaderDoubleClick: !isMobile ? onMaximizePanel : undefined, toolbar: toolbar, children: _jsx("div", { style: { flexDirection: "column", height: "100%", width: "100%", }, children: _jsxs(TMConditionalWrapper, { condition: !isMobile, wrapper: children => _jsx("div", { style: { display: "flex", flexGrow: 1, height: "100%" }, children: _jsx(TMSplitterLayout, { direction: 'horizontal', showSeparator: true, separatorColor: 'transparent', separatorActiveColor: 'transparent', min: ['0', '0'], start: [isLeftPanelCollapsed ? '0%' : "32%", isLeftPanelCollapsed ? '100%' : "68%"], children: children }, "TMWGs-panels-treeView") }), children: [_jsxs("div", { id: "file-manager-tree-view-container", style: {
                             height: "100%",
                             width: "100%",
                             ...(isMobile && { display: openDraftList ? 'none' : 'block', transition: "opacity 0.3s ease-in-out" }),
-                        }, onContextMenu: onBackgroundTreeViewContextMenu, children: [_jsx(TreeView, { height: "100%", width: "100%", useNativeScrolling: SDKUI_Globals.userSettings?.themeSettings.gridSettings.useNativeScrollbar === 1, dataSource: treeViewData, displayExpr: "text", itemRender: renderTreeViewItem, onItemClick: handleTreeViewItemClick, onItemContextMenu: onItemTreeViewContextMenu }), treeViewAnchor && _jsx(ContextMenu, { id: "treeViewContextMenuDesktop", target: treeViewAnchor, dataSource: folderContextMenuItems, onHiding: closeTreeViewContextMenu })] }), _jsxs("div", { style: {
+                        }, onContextMenu: onBackgroundTreeViewContextMenu, children: [_jsx(TreeView, { height: "100%", width: "100%", useNativeScrolling: SDKUI_Globals.userSettings?.themeSettings.gridSettings.useNativeScrollbar === 1, dataSource: treeViewData, displayExpr: "text", itemRender: renderTreeViewItem, onItemClick: handleTreeViewItemClick, onItemContextMenu: onItemTreeViewContextMenu }), _jsx(TMContextMenu, { items: folderContextMenuItems, target: "#file-manager-tree-view-container", externalControl: {
+                                    visible: treeViewContextMenuControl.visible,
+                                    position: treeViewContextMenuControl.position,
+                                    onClose: closeTreeViewContextMenu
+                                } })] }), _jsxs("div", { style: {
                             backgroundColor: "#fff",
                             width: "100%",
                             height: "100%",
@@ -228,6 +236,6 @@ const TMFileManager = (props) => {
                                             pointerEvents: "none",
                                             backdropFilter: "blur(3px)",
                                             textShadow: "0 2px 4px rgba(0,0,0,0.5)"
-                                        }, children: SDKUI_Localizator.DropFileToShare }), viewMode === 'thumbnails' && _jsx(TMFileManagerThumbnailsView, { items: filteredFileItems ?? [], allUsers: allUsers, focusedFile: focusedFile, handleFocusedFile: handleFocusedFile, selectedFiles: selectedFiles, handleSelectedFiles: handleSelectedFiles, fileContextMenuItems: fileContextMenuItems, searchText: searchText, userID: userID, draftThumbViewAnchor: draftThumbViewAnchor, setDraftThumbViewAnchor: setDraftThumbViewAnchor, onDoubleClickHandler: onDoubleClickHandler }), viewMode === 'details' && _jsx(TMFileManagerDataGridView, { items: filteredFileItems ?? [], allUsers: allUsers, focusedFile: focusedFile, handleFocusedFile: handleFocusedFile, selectedFiles: selectedFiles, handleSelectedFiles: handleSelectedFiles, fileContextMenuItems: fileContextMenuItems, searchText: searchText, userID: userID, onDoubleClickHandler: onDoubleClickHandler })] })] })] }) }) });
+                                        }, children: SDKUI_Localizator.DropFileToShare }), viewMode === 'thumbnails' && _jsx(TMFileManagerThumbnailsView, { items: filteredFileItems ?? [], allUsers: allUsers, focusedFile: focusedFile, handleFocusedFile: handleFocusedFile, selectedFiles: selectedFiles, handleSelectedFiles: handleSelectedFiles, fileContextMenuItems: fileContextMenuItems, searchText: searchText, userID: userID, thumbViewContextMenuControl: thumbViewContextMenuControl, setThumbViewContextMenuControl: setThumbViewContextMenuControl, onDoubleClickHandler: onDoubleClickHandler }), viewMode === 'details' && _jsx(TMFileManagerDataGridView, { items: filteredFileItems ?? [], allUsers: allUsers, focusedFile: focusedFile, handleFocusedFile: handleFocusedFile, selectedFiles: selectedFiles, handleSelectedFiles: handleSelectedFiles, fileContextMenuItems: fileContextMenuItems, searchText: searchText, userID: userID, onDoubleClickHandler: onDoubleClickHandler })] })] })] }) }) });
 };
 export default TMFileManager;