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

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,
+                    rightIcon: key === orderedBy ? _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?: any;
     displayedItemsCount?: number;
     totalItems?: number;
     toolbar?: any;

package/lib/components/base/TMPanel.js

@@ -133,7 +133,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();

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/TMDistinctValues.js

@@ -3,7 +3,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 import { LayoutModes, MetadataDataDomains, AccessLevels, MetadataDataTypes, SDK_Globals, DcmtTypeListCacheService, DataColumnTypes } from '@topconsultnpm/sdk-ts';
 import styled from 'styled-components';
 import { SDKUI_Localizator, stringIsNullOrEmpty } from '../../helper';
-import TMDataGrid from '../base/TMDataGrid';
+import TMDataGrid, { TMDataGridPageSize } from '../base/TMDataGrid';
 import { TMExceptionBoxManager } from '../base/TMPopUp';
 import TMSpinner from '../base/TMSpinner';
 import TMCheckBox from '../editors/TMCheckBox';
@@ -131,7 +131,7 @@ const TMDistinctValues = ({ tid, mid, layoutMode = LayoutModes.None, allowAppend
         return md.dataDomain === undefined || md.dataDomain === MetadataDataDomains.None;
     };
     const renderContent = () => {
-        return (_jsxs(StyledDistinctValues, { children: [isVisibleAppend() && _jsx(TMCheckBox, { elementStyle: { position: 'absolute', right: '15px', top: '15px', zIndex: 10000 }, label: 'Accoda', value: isAppendMode, onValueChanged: () => { setIsAppendMode(!isAppendMode); } }), _jsx(TMDataGrid, { focusedRowKey: focusedItem ? focusedItem.rowIndex : undefined, selection: { showCheckBoxesMode: 'none' }, searchPanel: { highlightCaseSensitive: true, visible: true }, dataColumns: customColumns, dataSource: dataSource, keyExpr: 'rowIndex', height: 'calc(100%)', onFocusedRowChanged: onFocusedRowChanged, paging: { pageSize: 30 }, summary: customSummary })] }));
+        return (_jsxs(StyledDistinctValues, { children: [isVisibleAppend() && _jsx(TMCheckBox, { elementStyle: { position: 'absolute', right: '15px', top: '15px', zIndex: 10000 }, label: 'Accoda', value: isAppendMode, onValueChanged: () => { setIsAppendMode(!isAppendMode); } }), _jsx(TMDataGrid, { focusedRowKey: focusedItem ? focusedItem.rowIndex : undefined, selection: { showCheckBoxesMode: 'none' }, searchPanel: { highlightCaseSensitive: true, visible: true }, dataColumns: customColumns, dataSource: dataSource, keyExpr: 'rowIndex', height: 'calc(100%)', onFocusedRowChanged: onFocusedRowChanged, paging: { pageSize: 30 }, summary: customSummary, onRowDblClick: () => !isAppendMode && onClosePanelCallback?.(), pageSize: TMDataGridPageSize.Medium })] }));
     };
     return (_jsx(_Fragment, { children: isModal
             ? _jsx(TMModal, { title: SDKUI_Localizator.DistinctValues + (md?.nameLoc ? ` (${md?.nameLoc})` : ''), height: '600px', width: '500px', resizable: true, onClose: onClosePanelCallback, children: renderContent() })

package/lib/components/choosers/TMInvoiceRetrieveFormats.js

@@ -17,6 +17,6 @@ const TMInvoiceRetrieveFormats = ({ value, valueOrig, onValueChanged, valuesToEx
         }
         return dataSource;
     };
-    return (_jsx(TMDropDown, { label: label, elementStyle: { marginBottom: TMMargin.defultMargin, width: width }, dataSource: getDataSource(), value: value, onValueChanged: (e) => { onValueChanged?.(e.target.value); }, isModifiedWhen: value != valueOrig, width: width }));
+    return (_jsx(TMDropDown, { label: label, elementStyle: { marginBottom: TMMargin.defaultMargin, width: width }, dataSource: getDataSource(), value: value, onValueChanged: (e) => { onValueChanged?.(e.target.value); }, isModifiedWhen: value != valueOrig, width: width }));
 };
 export default TMInvoiceRetrieveFormats;

package/lib/components/choosers/TMMetadataChooser.js

@@ -13,8 +13,15 @@ import TMChooserForm from '../forms/TMChooserForm';
 import TMSpinner from '../base/TMSpinner';
 const TMMetadataChooser = ({ tmSession, dataSource, showEditButton = true, buttons = [], disabled, validationItems, getColorIndex, showCompleteMetadataName, qdShowOnlySelectItems, borderRadius = '4px', fontSize = FontSize.defaultFontSize, backgroundColor, openEditorOnSummaryClick, showBorder = true, showId = false, elementStyle, allowMultipleSelection, allowSysMetadata, showSysMetadataDirectly, value, values, isModifiedWhen, tids, label, width, height, showClearButton, qd, placeHolder, filterMetadata, onValueChanged }) => {
     const [showChooser, setShowChooser] = useState(false);
+    const getinputMd = () => {
+        if (values && values.length > 0 && values[0].mid && values[0].mid < 0) {
+            let md = dataSource?.find((md) => md.id === values[0].mid);
+            return md;
+        }
+        return undefined;
+    };
     const renderTemplate = useMemo(() => {
-        return (_jsxs(StyledDivHorizontal, { style: { width: 'max-content', height: '100%' }, children: [values && _jsx(TMMidViewer, { tmSession: tmSession, tid_mid: values[0], showIcon: true, showId: showId, showCompleteName: showCompleteMetadataName }), values && values.length > 1 && _jsx("p", { style: { marginLeft: '10px' }, children: `(+${values.length - 1} ${values.length == 2 ? 'altro' : 'altri'})` }), (values == undefined || values.length == 0) && _jsx("p", { children: placeHolder })] }));
+        return (_jsxs(StyledDivHorizontal, { style: { width: 'max-content', height: '100%' }, children: [values && values.length > 0 && values[0].mid && values[0].mid > 0 && _jsx(TMMidViewer, { tmSession: tmSession, tid_mid: values[0], showIcon: true, showId: showId, showCompleteName: showCompleteMetadataName }), values && values.length > 0 && values[0].mid && values[0].mid < 0 && _jsx(TMMidViewer, { tmSession: tmSession, tid_mid: values[0], inputMd: getinputMd(), showIcon: true, showId: showId, showCompleteName: showCompleteMetadataName }), values && values.length > 1 && _jsx("p", { style: { marginLeft: '10px' }, children: `(+${values.length - 1} ${values.length == 2 ? 'altro' : 'altri'})` }), (values == undefined || values.length == 0) && _jsx("p", { children: placeHolder })] }));
     }, [values, tmSession, showId, showCompleteMetadataName, placeHolder]);
     return (_jsxs(_Fragment, { children: [_jsx(TMSummary, { label: label, width: width, height: height, disabled: disabled, validationItems: validationItems, backgroundColor: backgroundColor, buttons: buttons, placeHolder: placeHolder, fontSize: fontSize, showBorder: showBorder, borderRadius: borderRadius, hasValue: values && values.length > 0, showClearButton: showClearButton, showEditButton: showEditButton, iconEditButton: _jsx(IconSearch, { fontSize: 16 }), openEditorOnSummaryClick: openEditorOnSummaryClick, onEditorClick: () => !disabled && setShowChooser(true), elementStyle: elementStyle, isModifiedWhen: isModifiedWhen, template: renderTemplate, onClearClick: showClearButton ? () => { onValueChanged?.([]); } : undefined }), showChooser &&
                 _jsx(TMMetadataChooserForm, { tmSession: tmSession, allowMultipleSelection: allowMultipleSelection, height: '500px', width: '600px', allowSysMetadata: allowSysMetadata, showSysMetadataDirectly: showSysMetadataDirectly, getColorIndex: getColorIndex, dataSource: dataSource, tids: tids, qd: qd, qdShowOnlySelectItems: qdShowOnlySelectItems, filterMetadata: filterMetadata, selectedIDs: values, onClose: () => setShowChooser(false), onChoose: (tid_mids) => { onValueChanged?.(tid_mids); } })] }));

package/lib/components/choosers/TMOrderRetrieveFormats.js

@@ -17,6 +17,6 @@ const TMOrderRetrieveFormats = ({ value, valueOrig, onValueChanged, valuesToExcl
         }
         return dataSource;
     };
-    return (_jsx(TMDropDown, { label: label, elementStyle: { marginBottom: TMMargin.defultMargin, width: width }, dataSource: getDataSource(), value: value, isModifiedWhen: value != valueOrig, onValueChanged: (e) => { onValueChanged?.(e.target.value); }, width: width }));
+    return (_jsx(TMDropDown, { label: label, elementStyle: { marginBottom: TMMargin.defaultMargin, width: width }, dataSource: getDataSource(), value: value, isModifiedWhen: value != valueOrig, onValueChanged: (e) => { onValueChanged?.(e.target.value); }, width: width }));
 };
 export default TMOrderRetrieveFormats;

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

@@ -30,11 +30,6 @@ interface ITMUserChooserFormProps extends ITMChooserFormProps<UserDescriptor> {
     allowShowAllUsers?: boolean;
 }
 export declare const TMUserChooserForm: React.FunctionComponent<ITMUserChooserFormProps>;
-export declare const TMUserIdViewer: ({ userId, showIcon, noneSelectionText }: {
-    userId?: number;
-    showIcon?: boolean;
-    noneSelectionText?: string;
-}) => import("react/jsx-runtime").JSX.Element;
 export declare const TMUserIcon: ({ ud }: {
     ud?: UserDescriptor;
 }) => import("react/jsx-runtime").JSX.Element | null;