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

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;

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

@@ -1,5 +1,6 @@
-import { FileItem, TMFileManagerContextMenuItem } from "./TMFileManagerUtils";
+import { FileItem } from "./TMFileManagerUtils";
 import { UserDescriptor } from "@topconsultnpm/sdk-ts";
+import { TMContextMenuItemProps } from "../NewComponents/ContextMenu/types";
 interface TMFileManagerDataGridViewProps {
     items: Array<FileItem>;
     allUsers: Array<UserDescriptor>;
@@ -7,7 +8,7 @@ interface TMFileManagerDataGridViewProps {
     handleFocusedFile: (fileItem: FileItem | undefined) => void;
     selectedFiles: Array<FileItem>;
     handleSelectedFiles: (fileItems: Array<FileItem>) => void;
-    fileContextMenuItems: Array<TMFileManagerContextMenuItem>;
+    fileContextMenuItems: Array<TMContextMenuItemProps>;
     searchText: string;
     userID?: number;
     onDoubleClickHandler?: (fileItem: FileItem | undefined) => void;

package/lib/components/base/TMFileManagerDataGridView.js

@@ -48,16 +48,6 @@ const TMFileManagerDataGridView = (props) => {
         if (onDoubleClickHandler)
             onDoubleClickHandler(e.data);
     }, [onDoubleClickHandler]);
-    const onContextMenuPreparing = (e) => {
-        if (e === undefined)
-            return;
-        if (e.target === 'content') {
-            if (handleFocusedFile && e.row)
-                handleFocusedFile(e.row.data);
-            e.items = e.items || [];
-            e.items = fileContextMenuItems ? [...fileContextMenuItems] : [];
-        }
-    };
     const cellDefaultRender = useCallback((cellData) => {
         const value = cellData.value ?? '';
         return renderHighlightedText(value.toString(), searchText, false);
@@ -96,6 +86,6 @@ const TMFileManagerDataGridView = (props) => {
             { dataField: "creationTime", caption: SDKUI_Localizator.CreationTime, dataType: 'datetime', format: 'dd/MM/yyyy HH:mm', cellRender: cellDatetimeRender },
         ];
     }, [searchText]);
-    return _jsx(TMDataGrid, { dataSource: items ?? [], dataColumns: dataColumns, focusedRowKey: focusedRowKey, selectedRowKeys: selectedRowKeys, onFocusedRowChanged: onFocusedRowChanged, onSelectionChanged: onSelectionChanged, onCellDblClick: onCellDblClick, onContextMenuPreparing: onContextMenuPreparing, showSearchPanel: false, noDataText: SDKUI_Localizator.FolderIsEmpty }, items.length);
+    return _jsx(TMDataGrid, { dataSource: items ?? [], dataColumns: dataColumns, focusedRowKey: focusedRowKey, selectedRowKeys: selectedRowKeys, onFocusedRowChanged: onFocusedRowChanged, onSelectionChanged: onSelectionChanged, onCellDblClick: onCellDblClick, customContextMenuItems: fileContextMenuItems, showSearchPanel: false, noDataText: SDKUI_Localizator.FolderIsEmpty }, items.length);
 };
 export default TMFileManagerDataGridView;

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

@@ -10,7 +10,13 @@ export interface TMFileManagerThumbnailItemsProps {
     selectedFiles: Array<FileItem>;
     handleSelectedFiles: (fileItems: Array<FileItem>) => void;
     searchText: string;
-    setDraftThumbViewAnchor: React.Dispatch<React.SetStateAction<HTMLElement | null>>;
+    setThumbViewContextMenuControl: React.Dispatch<React.SetStateAction<{
+        visible: boolean;
+        position: {
+            x: number;
+            y: number;
+        };
+    }>>;
     onDoubleClick?: (file: FileItem) => void;
     userID?: number;
 }

package/lib/components/base/TMFileManagerThumbnailItems.js

@@ -6,7 +6,7 @@ import TMTooltip from './TMTooltip';
 import TMDcmtIcon from '../features/documents/TMDcmtIcon';
 const TMFileManagerThumbnailItems = (props) => {
     // Destructuring props for cleaner usage
-    const { items, allUsers, paginatedItems, selectedFiles, searchText, userID, onDoubleClick, handleSelectedFiles, handleFocusedFile, setDraftThumbViewAnchor } = props;
+    const { items, allUsers, paginatedItems, selectedFiles, searchText, userID, onDoubleClick, handleSelectedFiles, handleFocusedFile, setThumbViewContextMenuControl } = props;
     // Ref for the scrollable container
     const containerRef = useRef(null);
     // Stores index of the last selected item for shift selection
@@ -109,7 +109,10 @@ const TMFileManagerThumbnailItems = (props) => {
     // Right-click to open context menu and set focus
     const onContextMenu = useCallback((e, item) => {
         e.preventDefault();
-        setDraftThumbViewAnchor(e.currentTarget);
+        setThumbViewContextMenuControl({
+            visible: true,
+            position: { x: e.clientX, y: e.clientY }
+        });
         handleFocusedFile(item);
     }, []);
     const findCheckOutUserName = useCallback((item) => {

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

@@ -1,6 +1,7 @@
 import React from "react";
-import { FileItem, TMFileManagerContextMenuItem } from "./TMFileManagerUtils";
+import { FileItem } from "./TMFileManagerUtils";
 import { UserDescriptor } from "@topconsultnpm/sdk-ts";
+import { TMContextMenuItemProps } from '../NewComponents/ContextMenu/types';
 interface TMFileManagerThumbnailsViewProps {
     items: Array<FileItem>;
     allUsers: Array<UserDescriptor>;
@@ -8,12 +9,24 @@ interface TMFileManagerThumbnailsViewProps {
     handleFocusedFile: (fileItem: FileItem | undefined) => void;
     selectedFiles: Array<FileItem>;
     handleSelectedFiles: (fileItems: Array<FileItem>) => void;
-    fileContextMenuItems: Array<TMFileManagerContextMenuItem>;
+    fileContextMenuItems: Array<TMContextMenuItemProps>;
     searchText: string;
     userID?: number;
     onDoubleClickHandler?: (fileItem: FileItem | undefined) => void;
-    draftThumbViewAnchor: HTMLElement | null;
-    setDraftThumbViewAnchor: React.Dispatch<React.SetStateAction<HTMLElement | null>>;
+    thumbViewContextMenuControl: {
+        visible: boolean;
+        position: {
+            x: number;
+            y: number;
+        };
+    };
+    setThumbViewContextMenuControl: React.Dispatch<React.SetStateAction<{
+        visible: boolean;
+        position: {
+            x: number;
+            y: number;
+        };
+    }>>;
 }
 declare const TMFileManagerThumbnailsView: (props: TMFileManagerThumbnailsViewProps) => import("react/jsx-runtime").JSX.Element;
 export default TMFileManagerThumbnailsView;

package/lib/components/base/TMFileManagerThumbnailsView.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useState } from "react";
 import { TMFileManagerPageSize } from "./TMFileManagerUtils";
-import { ContextMenu, Pagination, ScrollView } from "devextreme-react";
+import { Pagination, ScrollView } from "devextreme-react";
+import TMContextMenu from '../NewComponents/ContextMenu/TMContextMenu';
 import TMFileManagerThumbnailItems from "./TMFileManagerThumbnailItems";
 import { SDKUI_Localizator } from "../../helper";
 const TMFileManagerThumbnailsView = (props) => {
-    const { items, allUsers, focusedFile, handleFocusedFile, selectedFiles = [], handleSelectedFiles, fileContextMenuItems, searchText, userID, onDoubleClickHandler, draftThumbViewAnchor, setDraftThumbViewAnchor } = props;
+    const { items, allUsers, focusedFile, handleFocusedFile, selectedFiles = [], handleSelectedFiles, fileContextMenuItems, searchText, userID, onDoubleClickHandler, thumbViewContextMenuControl, setThumbViewContextMenuControl } = props;
     const PAGE_SIZES = [TMFileManagerPageSize.Small, TMFileManagerPageSize.Medium, TMFileManagerPageSize.Large];
     const initPageSize = TMFileManagerPageSize.Small;
     const showPagination = (items?.length ?? 0) > initPageSize;
@@ -26,7 +27,7 @@ const TMFileManagerThumbnailsView = (props) => {
     }, []);
     // Handle closing the context menu
     const closeViewContextMenu = useCallback(() => {
-        setDraftThumbViewAnchor(null);
+        setThumbViewContextMenuControl(prev => ({ ...prev, visible: false }));
     }, []);
     const onBackgroundContextMenu = (event) => {
         if (event === undefined)
@@ -34,13 +35,24 @@ const TMFileManagerThumbnailsView = (props) => {
         if (event.target.closest('.tm-file-manager-thumbnail-items'))
             return;
         event.preventDefault();
-        setDraftThumbViewAnchor(event.currentTarget);
+        setThumbViewContextMenuControl({
+            visible: true,
+            position: { x: event.clientX, y: event.clientY }
+        });
         handleFocusedFile?.(undefined);
         handleSelectedFiles?.([]);
     };
     return items.length > 0 ?
-        _jsxs("div", { style: { width: "100%", height: "100%" }, onContextMenu: onBackgroundContextMenu, children: [_jsx(ScrollView, { width: "100%", height: showPagination ? "calc(100% - 50px)" : "100%", useNative: true, direction: 'vertical', children: _jsx(TMFileManagerThumbnailItems, { items: items, allUsers: allUsers, paginatedItems: paginatedItems, focusedFile: focusedFile, selectedFiles: selectedFiles, userID: userID, searchText: searchText, handleFocusedFile: handleFocusedFile, handleSelectedFiles: handleSelectedFiles, onDoubleClick: handleItemDoubleClick, setDraftThumbViewAnchor: setDraftThumbViewAnchor }) }), showPagination && _jsx(Pagination, { height: "50px", showInfo: true, showNavigationButtons: true, allowedPageSizes: PAGE_SIZES, displayMode: 'compact', itemCount: items.length, pageIndex: pageIndex, pageSize: pageSize, onPageIndexChange: setPageIndex, onPageSizeChange: setPageSize }), draftThumbViewAnchor && _jsx(ContextMenu, { id: 'fileViewContextMenuMobile', dataSource: fileContextMenuItems, target: draftThumbViewAnchor, onHiding: closeViewContextMenu })] })
+        _jsxs("div", { id: "file-manager-thumbnails-view", style: { width: "100%", height: "100%" }, onContextMenu: onBackgroundContextMenu, children: [_jsx(ScrollView, { width: "100%", height: showPagination ? "calc(100% - 50px)" : "100%", useNative: true, direction: 'vertical', children: _jsx(TMFileManagerThumbnailItems, { items: items, allUsers: allUsers, paginatedItems: paginatedItems, focusedFile: focusedFile, selectedFiles: selectedFiles, userID: userID, searchText: searchText, handleFocusedFile: handleFocusedFile, handleSelectedFiles: handleSelectedFiles, onDoubleClick: handleItemDoubleClick, setThumbViewContextMenuControl: setThumbViewContextMenuControl }) }), showPagination && _jsx(Pagination, { height: "50px", showInfo: true, showNavigationButtons: true, allowedPageSizes: PAGE_SIZES, displayMode: 'compact', itemCount: items.length, pageIndex: pageIndex, pageSize: pageSize, onPageIndexChange: setPageIndex, onPageSizeChange: setPageSize }), _jsx(TMContextMenu, { items: fileContextMenuItems, target: "#file-manager-thumbnails-view", externalControl: {
+                        visible: thumbViewContextMenuControl.visible,
+                        position: thumbViewContextMenuControl.position,
+                        onClose: closeViewContextMenu
+                    } })] })
         :
-            _jsxs("div", { onContextMenu: onBackgroundContextMenu, style: { width: "100%", height: "100%", display: 'flex', justifyContent: 'center', alignItems: 'center', marginTop: '10px' }, children: [SDKUI_Localizator.FolderIsEmpty, draftThumbViewAnchor && _jsx(ContextMenu, { id: 'fileViewContextMenuMobile', dataSource: fileContextMenuItems, target: draftThumbViewAnchor, onHiding: closeViewContextMenu })] });
+            _jsxs("div", { id: "file-manager-thumbnails-view-empty", onContextMenu: onBackgroundContextMenu, style: { width: "100%", height: "100%", display: 'flex', justifyContent: 'center', alignItems: 'center', marginTop: '10px' }, children: [SDKUI_Localizator.FolderIsEmpty, _jsx(TMContextMenu, { items: fileContextMenuItems, target: "#file-manager-thumbnails-view-empty", externalControl: {
+                            visible: thumbViewContextMenuControl.visible,
+                            position: thumbViewContextMenuControl.position,
+                            onClose: closeViewContextMenu
+                        } })] });
 };
 export default TMFileManagerThumbnailsView;

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

@@ -19,18 +19,6 @@ export interface FileItem {
     size?: number;
     version?: number;
 }
-export interface TMFileManagerContextMenuItem {
-    text: string;
-    icon: string;
-    onClick?: (param?: any) => void;
-    operationType?: 'singleRow' | 'multiRow';
-    disabled?: boolean;
-    id?: string;
-    items?: Array<TMFileManagerContextMenuItem>;
-    beginGroup?: boolean;
-    tooltip?: string;
-    visible?: boolean;
-}
 export interface TMFileManagerTreeViewDirectory {
     id: number;
     text: string;

package/lib/components/base/TMListView.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef, useState } from 'react';
 import styled from 'styled-components';
 import { ObjectClasses } from '@topconsultnpm/sdk-ts';
-import TMContextMenu, { useTMContextMenu } from './TMContextMenu';
+import TMContextMenu from '../NewComponents/ContextMenu/TMContextMenu';
 import { IconApply, IconCloseCircle, IconColumns, IconDown, IconHide, IconShow, IconUp, IconVisible } from '../../helper/TMIcons';
 import { TMSearchBar } from '../sidebar/TMHeader';
 import TMTooltip from './TMTooltip';
@@ -26,9 +26,17 @@ const TMListView = ({ customGroupingHeaders, headerBackGroundColor, header, show
     const [isFocused, setIsFocused] = useState(false);
     const [showOrderMenu, setShowOrderMenu] = useState(false);
     const [showOrderOptions, setShowOrderOptions] = useState(false);
+    const [contextMenuVisible, setContextMenuVisible] = useState(false);
+    const [contextMenuPosition, setContextMenuPosition] = useState({ x: 0, y: 0 });
+    const [orderMenuVisible, setOrderMenuVisible] = useState(false);
+    const [orderMenuPosition, setOrderMenuPosition] = useState({ x: 0, y: 0 });
     useEffect(() => { setCurrentDataSource(dataSource); }, [dataSource]);
-    const openContextMenu = (e) => { setIsFocused(true); };
-    let [coords, show] = useTMContextMenu(contRef);
+    const openContextMenu = (e) => {
+        e.preventDefault();
+        setIsFocused(true);
+        setContextMenuVisible(true);
+        setContextMenuPosition({ x: e.clientX, y: e.clientY });
+    };
     useEffect(() => { if (orderBy) {
         setOrderedBy(orderBy);
     } }, [orderBy]);
@@ -235,10 +243,10 @@ const TMListView = ({ customGroupingHeaders, headerBackGroundColor, header, show
             for (let key of searchKeys) {
                 arr.push({
                     disabled: !localShowId && key === exprKey,
-                    isSelected: key === orderedBy,
-                    onItemClick: () => { setOrderedBy(key); setShowOrderOptions(false); },
+                    onClick: () => { setOrderedBy(key); setShowOrderOptions(false); setOrderMenuVisible(false); },
                     icon: _jsx(IconColumns, { fontSize: 16 }),
-                    text: _jsxs("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 10 }, children: [key, " ", key === orderedBy && _jsx(IconApply, { fontSize: 14, color: 'gray' })] })
+                    name: key,
+                    rightIconProps: key === orderedBy ? { icon: _jsx(IconApply, { fontSize: 14, color: 'gray' }) } : undefined
                 });
             }
         }
@@ -328,16 +336,16 @@ const TMListView = ({ customGroupingHeaders, headerBackGroundColor, header, show
         if (showSearch === undefined) {
             items.push({
                 icon: localShowSearch ? _jsx(IconHide, { fontSize: 16 }) : _jsx(IconShow, { fontSize: 16 }),
-                onItemClick: () => setLocalShowSearch(!localShowSearch),
-                text: localShowSearch ? SDKUI_Localizator.HideSearch : SDKUI_Localizator.ShowSearch
+                onClick: () => setLocalShowSearch(!localShowSearch),
+                name: localShowSearch ? SDKUI_Localizator.HideSearch : SDKUI_Localizator.ShowSearch
             });
         }
         // Add ID menu item only if showId prop is undefined
         if (showId === undefined) {
             items.push({
                 icon: localShowId ? _jsx(IconHide, { fontSize: 16 }) : _jsx(IconShow, { fontSize: 16 }),
-                onItemClick: () => setLocalShowId(!localShowId),
-                text: localShowId ? SDKUI_Localizator.ID_Hide : SDKUI_Localizator.ID_Show,
+                onClick: () => setLocalShowId(!localShowId),
+                name: localShowId ? SDKUI_Localizator.ID_Hide : SDKUI_Localizator.ID_Show,
             });
         }
         // Add order menu item only if grouping length is zero
@@ -345,21 +353,31 @@ const TMListView = ({ customGroupingHeaders, headerBackGroundColor, header, show
             items.push({
                 icon: showOrderMenu ? _jsx(IconHide, { fontSize: 16 }) : _jsx(IconShow, { fontSize: 16 }),
                 disabled: searchKeys.length === 0,
-                onItemClick: () => setShowOrderMenu(!showOrderMenu),
-                text: showOrderMenu ? 'Nascondi menu di ordinamento' : 'Mostra menu di ordinamento'
+                onClick: () => setShowOrderMenu(!showOrderMenu),
+                name: showOrderMenu ? 'Nascondi menu di ordinamento' : 'Mostra menu di ordinamento'
             });
         }
         return items;
     };
     const contextMenuItems = generateContextMenuItems(localShowSearch, localShowId, showOrderMenu, grouping, searchKeys);
-    return (_jsxs(StyledListViewContainer, { ref: contRef, onContextMenu: openContextMenu, children: [(show && contextMenuItems.length > 0) && _jsx(TMContextMenu, { coords: coords, items: contextMenuItems }), showOrderOptions &&
-                _jsx(TMContextMenu, { items: orderMenuItems(), coords: { x: orderRef.current?.getBoundingClientRect().left, y: orderRef.current?.getBoundingClientRect().top - (searchKeys.length * 30) - 10 } }), header && _jsx("div", { style: { width: '100%', height: '40px', backgroundColor: headerBackGroundColor ?? `${customColor}30`, marginBottom: '3px', display: 'flex', alignItems: 'center' }, children: header }), localShowSearch &&
+    return (_jsxs(StyledListViewContainer, { ref: contRef, onContextMenu: openContextMenu, children: [contextMenuItems.length > 0 && (_jsx(TMContextMenu, { items: contextMenuItems, externalControl: {
+                    visible: contextMenuVisible,
+                    position: contextMenuPosition,
+                    onClose: () => setContextMenuVisible(false)
+                } })), showOrderOptions && orderRef.current && (_jsx(TMContextMenu, { items: orderMenuItems(), externalControl: {
+                    visible: orderMenuVisible || showOrderOptions,
+                    position: {
+                        x: orderRef.current.getBoundingClientRect().left,
+                        y: orderRef.current.getBoundingClientRect().top - (searchKeys.length * 30) - 10
+                    },
+                    onClose: () => { setOrderMenuVisible(false); setShowOrderOptions(false); }
+                } })), header && _jsx("div", { style: { width: '100%', height: '40px', backgroundColor: headerBackGroundColor ?? `${customColor}30`, marginBottom: '3px', display: 'flex', alignItems: 'center' }, children: header }), localShowSearch &&
                 _jsx(StyledSearchContainer, { children: _jsxs(StyledSearchContainer, { children: [_jsx(TMSearchBar, { marginLeft: '0px', maxWidth: '300px', searchValue: searchValue, onSearchValueChanged: (e) => setSearchValue(e) }), _jsx(TMTooltip, { content: 'Nascondi ricerca', children: _jsx(IconCloseCircle, { style: { cursor: 'pointer' }, color: 'red', fontSize: 14, onClick: () => { setSearchValue(''); setLocalShowSearch(false); } }) })] }) }), _jsx("div", { ref: listRef, onClick: () => setIsFocused(true), style: { width: '100%', overflow: 'auto', height: listHeight() }, children: currentDataSource.length > 0 ?
                     grouping.length === 0 ? memoList : groupedMemoList :
                     searchValue.length > 0 ? _jsx("div", { style: { width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: "No data found" }) :
                         _jsx("div", { style: { width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: "No data" }) }), (searchValue.length > 0 || showOrderMenu) &&
                 _jsxs(StyledListViewFooter, { "$bgColor": `${customColor}20`, children: [showOrderMenu &&
-                            _jsxs("div", { style: { width: 'max-content', display: 'flex', alignItems: 'center', gap: 5 }, children: [_jsx("div", { style: { width: 'max-content' }, children: "Ordinato per" }), _jsx("div", { ref: orderRef, onClick: () => { setShowOrderOptions(!showOrderOptions); }, style: { cursor: 'pointer', fontWeight: 'bold' }, children: orderedBy.length > 0 ? orderedBy : 'Nulla' }), orderedBy.length > 0 && _jsxs(TMTooltip, { content: orderDir ? 'ASC' : 'DESC', children: [" ", orderDir ? _jsx(IconUp, { style: { cursor: 'pointer' }, onClick: () => setOrderDir(false), fontSize: 14 }) : _jsx(IconDown, { style: { cursor: 'pointer' }, onClick: () => setOrderDir(true), fontSize: 14 }), " "] }), _jsx(TMTooltip, { content: 'Annulla ordinamento', children: _jsx(IconCloseCircle, { style: { cursor: 'pointer' }, color: 'red', fontSize: 14, onClick: () => { setOrderedBy(''); setShowOrderMenu(false); setShowOrderOptions(false); } }) })] }), searchValue.length > 0 && _jsxs("div", { style: { display: 'flex', alignItems: 'center', width: '100%', justifyContent: 'flex-end', gap: 5 }, children: [_jsx(TMTooltip, { content: 'Visibili', children: _jsx(IconVisible, { fontSize: 14 }) }), currentDataSource.length] })] })] }));
+                            _jsxs("div", { style: { width: 'max-content', display: 'flex', alignItems: 'center', gap: 5 }, children: [_jsx("div", { style: { width: 'max-content' }, children: "Ordinato per" }), _jsx("div", { ref: orderRef, onClick: () => { setShowOrderOptions(!showOrderOptions); setOrderMenuVisible(!orderMenuVisible); }, style: { cursor: 'pointer', fontWeight: 'bold' }, children: orderedBy.length > 0 ? orderedBy : 'Nulla' }), orderedBy.length > 0 && _jsxs(TMTooltip, { content: orderDir ? 'ASC' : 'DESC', children: [" ", orderDir ? _jsx(IconUp, { style: { cursor: 'pointer' }, onClick: () => setOrderDir(false), fontSize: 14 }) : _jsx(IconDown, { style: { cursor: 'pointer' }, onClick: () => setOrderDir(true), fontSize: 14 }), " "] }), _jsx(TMTooltip, { content: 'Annulla ordinamento', children: _jsx(IconCloseCircle, { style: { cursor: 'pointer' }, color: 'red', fontSize: 14, onClick: () => { setOrderedBy(''); setShowOrderMenu(false); setShowOrderOptions(false); } }) })] }), searchValue.length > 0 && _jsxs("div", { style: { display: 'flex', alignItems: 'center', width: '100%', justifyContent: 'flex-end', gap: 5 }, children: [_jsx(TMTooltip, { content: 'Visibili', children: _jsx(IconVisible, { fontSize: 14 }) }), currentDataSource.length] })] })] }));
 };
 export default TMListView;
 export const CustomListViewHeader = (props) => {

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

@@ -13,7 +13,7 @@ export interface ITMPanelProps {
     backgroundColorContainer?: string;
     children?: React.ReactNode;
     showHeader?: boolean;
-    title?: string;
+    title?: React.ReactNode;
     displayedItemsCount?: number;
     totalItems?: number;
     toolbar?: any;

package/lib/components/base/TMPanel.js

@@ -65,6 +65,8 @@ const StyledPanelContent = styled.div `
     justify-content: space-between;
     position: relative;
     user-select: none;
+    -webkit-touch-callout: none;
+  -webkit-user-select: none;
     outline: none;
     &:focus {
         outline: none;
@@ -133,7 +135,7 @@ onActivate, onBack, onClose, onHeaderDoubleClick, onMaximize, onActiveChanged },
     };
     return (_jsxs(StyledPanelContainer, { ref: panelRef, "$isMaximized": onMaximize ? false : isMaximized, style: {
             visibility: isVisible ? 'visible' : 'hidden',
-        }, tabIndex: -1, onFocus: !isControlled ? handleFocusUncontrolled : undefined, onBlur: !isControlled ? handleBlurUncontrolled : undefined, onClick: handleActivation, children: [showHeader &&
+        }, tabIndex: -1, onFocus: !isControlled ? handleFocusUncontrolled : undefined, onBlur: !isControlled ? handleBlurUncontrolled : undefined, onClick: handleActivation, onContextMenu: (e) => e.preventDefault(), children: [showHeader &&
                 _jsx(StyledPanelHeader, { "$backgroundColor": backgroundColor, "$color": color, "$isActive": currentIsActive, onDoubleClick: () => {
                         if (onHeaderDoubleClick)
                             onHeaderDoubleClick();
@@ -158,7 +160,7 @@ onActivate, onBack, onClose, onHeaderDoubleClick, onMaximize, onActiveChanged },
                                             flexDirection: 'row',
                                             alignItems: 'center',
                                             overflow: 'hidden',
-                                        }, children: _jsxs("p", { style: {
+                                        }, children: _jsxs("div", { style: {
                                                 whiteSpace: 'nowrap',
                                                 overflow: 'hidden',
                                                 textOverflow: 'ellipsis',

package/lib/components/base/TMPopUp.js

@@ -31,6 +31,8 @@ const StyledExeptionToolbar = styled.div `
     gap: 5px;
     padding: 5px;
     user-select: none;
+    -webkit-touch-callout: none;
+  -webkit-user-select: none;
     border-top: 1px solid #f3f3f3;
     /* background-color: ${TMColors.primary_container}; */
     background-color: white;
@@ -45,6 +47,8 @@ const StyledMessageToolbar = styled.div `
     gap: clamp(2px, 1vw, 5px);
     padding: clamp(3px, 1vw, 5px);
     user-select: none;
+    -webkit-touch-callout: none;
+  -webkit-user-select: none;
     border-top: 1px solid #f3f3f3;
     background-color: #ffffff;
     z-index: 1;
@@ -69,6 +73,8 @@ const TabContextContainer = styled.div `
     border-radius: 5px;
     overflow: auto;
     user-select: none;
+    -webkit-touch-callout: none;
+  -webkit-user-select: none;
     position: relative;
 `;
 const StyledAppVersionText = styled.p `

package/lib/components/base/TMToolbarCard.js

@@ -42,6 +42,8 @@ const StyledSearchCardContent = styled.div `
     
     position: relative;
     user-select: none;
+    -webkit-touch-callout: none;
+  -webkit-user-select: none;
 `;
 const TMToolbarCard = ({ items = [], onItemClick, selectedItem, showPanel, color = TMColors.colorHeader, backgroundColor = TMColors.backgroundColorHeader, backgroundColorContainer, children, showHeader = true, title, totalItems, displayedItemsCount, toolbar, padding = '3px', onBack, onClose, onHeaderDoubleClick }) => {
     return (_jsxs(StyledSearchCard, { children: [showHeader && _jsx(StyledSearchCardHeader, { "$backgroundColor": backgroundColor, "$color": color, onDoubleClick: () => { if (onHeaderDoubleClick)

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

@@ -22,10 +22,11 @@ interface ITMTreeViewProps<T extends ITMTreeItem> {
     onNodeUpdate?: (updatedNode: T) => void;
     onDataChanged?: (items: T[]) => void;
     shouldDelayFocusOnEvent?: (node: T, event: React.MouseEvent) => boolean;
+    autoSelectChildren?: boolean;
     itemsPerPage?: number;
     showLoadMoreButton?: boolean;
 }
-declare const TMTreeView: <T extends ITMTreeItem>({ dataSource, focusedItem, selectedItems, allowMultipleSelection, onDataChanged, calculateItemsForNode, itemRender, onNodeUpdate, onFocusedItemChanged, onSelectionChanged, shouldDelayFocusOnEvent, itemsPerPage, showLoadMoreButton }: ITMTreeViewProps<T>) => import("react/jsx-runtime").JSX.Element;
+declare const TMTreeView: <T extends ITMTreeItem>({ dataSource, focusedItem, selectedItems, allowMultipleSelection, onDataChanged, calculateItemsForNode, itemRender, onNodeUpdate, onFocusedItemChanged, onSelectionChanged, shouldDelayFocusOnEvent, autoSelectChildren, itemsPerPage, showLoadMoreButton }: ITMTreeViewProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default TMTreeView;
 export declare const StyledTreeNode: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $isSelected?: boolean;

package/lib/components/base/TMTreeView.js

@@ -3,7 +3,7 @@ import { useCallback, useEffect, useRef } from 'react';
 import styled from 'styled-components';
 import { IconChevronDown, IconChevronRight } from '../../helper';
 import TMButton from './TMButton';
-const TMTreeView = ({ dataSource = [], focusedItem, selectedItems = [], allowMultipleSelection, onDataChanged, calculateItemsForNode, itemRender, onNodeUpdate, onFocusedItemChanged, onSelectionChanged, shouldDelayFocusOnEvent, itemsPerPage = 100, showLoadMoreButton = true }) => {
+const TMTreeView = ({ dataSource = [], focusedItem, selectedItems = [], allowMultipleSelection, onDataChanged, calculateItemsForNode, itemRender, onNodeUpdate, onFocusedItemChanged, onSelectionChanged, shouldDelayFocusOnEvent, autoSelectChildren = true, itemsPerPage = 100, showLoadMoreButton = true }) => {
     useEffect(() => {
         const handleKeyDown = (event) => {
             if (!focusedItem)
@@ -187,47 +187,51 @@ const TMTreeView = ({ dataSource = [], focusedItem, selectedItems = [], allowMul
         };
         let newSelectedItems;
         if (checked) {
-            if (node.isContainer) {
-                // Quando selezioni un container, aggiungi il container stesso + tutti i figli
+            if (node.isContainer && autoSelectChildren) {
+                // Quando selezioni un container, aggiungi il container stesso + tutti i figli (se autoSelectChildren è true)
                 const allChildren = flattenTree(node.items || []);
                 newSelectedItems = [...selectedItems, node, ...allChildren];
             }
             else if (!selectedItems.some(item => item.key === node.key)) {
-                // Quando selezioni un figlio, aggiungi il figlio
+                // Quando selezioni un figlio o un container con autoSelectChildren=false, aggiungi solo il nodo
                 newSelectedItems = [...selectedItems, node];
-                // Verifica se selezionando questo figlio sono ora selezionati tutti i figli del parent
-                const parentsToAdd = findAndCheckParents(dataSource, node, newSelectedItems);
-                newSelectedItems = [...newSelectedItems, ...parentsToAdd];
+                // Verifica se selezionando questo figlio sono ora selezionati tutti i figli del parent (solo se autoSelectChildren è true)
+                if (autoSelectChildren) {
+                    const parentsToAdd = findAndCheckParents(dataSource, node, newSelectedItems);
+                    newSelectedItems = [...newSelectedItems, ...parentsToAdd];
+                }
             }
             else {
                 newSelectedItems = selectedItems;
             }
         }
-        else if (node.isContainer) {
-            // Quando deselezioni un container, rimuovi il container stesso + tutti i figli
+        else if (node.isContainer && autoSelectChildren) {
+            // Quando deselezioni un container, rimuovi il container stesso + tutti i figli (solo se autoSelectChildren è true)
             const childKeys = flattenTree(node.items || []).map(item => item.key);
             newSelectedItems = selectedItems.filter(item => item.key !== node.key && !childKeys.includes(item.key));
         }
         else {
-            // Quando deselezioni un figlio, rimuovi il figlio
+            // Quando deselezioni un figlio o un container con autoSelectChildren=false, rimuovi solo il nodo
             newSelectedItems = selectedItems.filter(item => item.key !== node.key);
-            // Se il figlio apparteneva a un parent che era selezionato, rimuovi anche il parent
-            const removeParentContainers = (items) => {
-                const parentsToRemove = [];
-                items.forEach(item => {
-                    if (item.isContainer && item.items) {
-                        const childKeys = flattenTree(item.items).map(child => child.key);
-                        if (childKeys.includes(node.key)) {
-                            parentsToRemove.push(item.key);
+            // Se il figlio apparteneva a un parent che era selezionato, rimuovi anche il parent (solo se autoSelectChildren è true)
+            if (autoSelectChildren && !node.isContainer) {
+                const removeParentContainers = (items) => {
+                    const parentsToRemove = [];
+                    items.forEach(item => {
+                        if (item.isContainer && item.items) {
+                            const childKeys = flattenTree(item.items).map(child => child.key);
+                            if (childKeys.includes(node.key)) {
+                                parentsToRemove.push(item.key);
+                            }
+                            // Ricorsione per parent annidati
+                            parentsToRemove.push(...removeParentContainers(item.items));
                         }
-                        // Ricorsione per parent annidati
-                        parentsToRemove.push(...removeParentContainers(item.items));
-                    }
-                });
-                return parentsToRemove;
-            };
-            const parentsToRemove = removeParentContainers(dataSource);
-            newSelectedItems = newSelectedItems.filter(item => !parentsToRemove.includes(item.key));
+                    });
+                    return parentsToRemove;
+                };
+                const parentsToRemove = removeParentContainers(dataSource);
+                newSelectedItems = newSelectedItems.filter(item => !parentsToRemove.includes(item.key));
+            }
         }
         onSelectionChanged?.(newSelectedItems);
     };
@@ -252,6 +256,9 @@ const TMTreeView = ({ dataSource = [], focusedItem, selectedItems = [], allowMul
     // 	setTreeData(prevData => collapseAll(prevData));
     // };
     const isIndeterminate = (node) => {
+        // Lo stato indeterminate ha senso solo quando autoSelectChildren è true
+        if (!autoSelectChildren)
+            return false;
         if (!node.isContainer || !node.items)
             return false;
         const childKeys = flattenTree(node.items).map(item => item.key);

package/lib/components/choosers/TMDataListItemChooser.d.ts

@@ -8,6 +8,8 @@ interface ITMDataListItemChooserProps extends ITMChooserProps {
     values?: string[];
     /** Visualizza il bordo  */
     showBorder?: boolean;
+    /** Funzione per aggiornare lo stato di apertura della modale */
+    updateIsModalOpen?: (isOpen: boolean) => void;
 }
 declare const TMDataListItemChooser: React.FunctionComponent<ITMDataListItemChooserProps>;
 export default TMDataListItemChooser;