@topconsultnpm/sdkui-react 6.20.0-dev1.9 → 6.20.0-dev1.90

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/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/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;

package/lib/components/choosers/TMUserChooser.js

@@ -1,15 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { OwnershipLevels, SDK_Localizator, UserLevels, UserListCacheService } from '@topconsultnpm/sdk-ts';
-import { SDKUI_Localizator, IconSearch, IconUserLevelMember, IconUserLevelAdministrator, IconUserLevelSystemAdministrator, IconUserLevelAutonomousAdministrator, IconWarning, LocalizeOwnershipLevels, LocalizeUserLevels, IconShowAllUsersOff, IconShowAllUsers } from '../../helper';
-import { StyledDivHorizontal, StyledTooltipContainer, StyledTooltipSeparatorItem } from '../base/Styled';
+import { SDKUI_Localizator, IconSearch, IconUserLevelMember, IconUserLevelAdministrator, IconUserLevelSystemAdministrator, IconUserLevelAutonomousAdministrator, LocalizeOwnershipLevels, LocalizeUserLevels, IconShowAllUsersOff, IconShowAllUsers } from '../../helper';
+import { StyledDivHorizontal } from '../base/Styled';
 import TMSpinner from '../base/TMSpinner';
-import TMTooltip from '../base/TMTooltip';
 import TMSummary from '../editors/TMSummary';
 import TMChooserForm from '../forms/TMChooserForm';
-import { TMColors } from '../../utils/theme';
-import { TMExceptionBoxManager } from '../base/TMPopUp';
 import TMButton from '../base/TMButton';
+import TMDataUserIdItemViewer from '../viewers/TMDataUserIdItemViewer';
 const TMUserChooser = ({ labelColor, titleForm, filter, readOnly = false, icon, width, dataSource, backgroundColor, openChooserBySingleClick, buttons = [], disabled = false, showBorder = true, hideRefresh = false, hideShowId = false, elementStyle, allowMultipleSelection, values, isModifiedWhen, label, placeHolder, validationItems = [], onValueChanged, showClearButton, initialShowChooser = false, allowShowAllUsers = false }) => {
     const [showChooser, setShowChooser] = useState(initialShowChooser);
     useEffect(() => {
@@ -18,7 +16,7 @@ const TMUserChooser = ({ labelColor, titleForm, filter, readOnly = false, icon,
     const summaryInputRef = useRef(null);
     const renderTemplate = () => {
         const isPlaceholder = values?.[0] === placeHolder;
-        return (_jsxs(StyledDivHorizontal, { style: { minWidth: '125px', color: isPlaceholder ? '#a9a9a9' : 'inherit' }, children: [values && values.length > 0 && _jsx(TMUserIdViewer, { userId: values?.[0], showIcon: true, noneSelectionText: '' }), values && values.length > 1 && _jsx("p", { style: { marginLeft: '10px' }, children: `(+${values.length - 1} ${values.length == 2 ? 'altro' : 'altri'})` })] }));
+        return (_jsxs(StyledDivHorizontal, { style: { minWidth: '125px', color: isPlaceholder ? '#a9a9a9' : 'inherit' }, children: [values && values.length > 0 && _jsx(TMDataUserIdItemViewer, { userId: values?.[0], showIcon: true }), values && values.length > 1 && _jsx("p", { style: { marginLeft: '10px' }, children: `(+${values.length - 1} ${values.length == 2 ? 'altro' : 'altri'})` })] }));
     };
     return (_jsxs(_Fragment, { children: [_jsx(TMSummary, { ref: summaryInputRef, width: width, disabled: disabled, placeHolder: placeHolder, readOnly: readOnly, labelColor: labelColor, icon: icon, backgroundColor: backgroundColor, buttons: buttons, showBorder: showBorder, hasValue: values && values.length > 0, showClearButton: showClearButton, iconEditButton: _jsx(IconSearch, { fontSize: 16 }), onEditorClick: () => !readOnly && setShowChooser(true), elementStyle: elementStyle, isModifiedWhen: isModifiedWhen, openEditorOnSummaryClick: openChooserBySingleClick, label: label, template: renderTemplate(), onClearClick: showClearButton ? () => { onValueChanged?.([]); } : undefined, validationItems: validationItems }), showChooser &&
                 _jsx(TMUserChooserForm, { title: titleForm, allowMultipleSelection: allowMultipleSelection, hasShowOnlySelectedItems: true, dataSource: dataSource, filter: filter, selectedIDs: values, hideRefresh: hideRefresh, hideShowId: hideShowId, allowShowAllUsers: allowShowAllUsers, onClose: () => {
@@ -67,40 +65,6 @@ export const TMUserChooserForm = ({ allowMultipleSelection, columns, hideRefresh
     const customButton = (allowShowAllUsers && dataSource) ? (_jsx(TMButton, { btnStyle: 'toolbar', caption: showingAllUsers ? SDKUI_Localizator.HideAll : SDKUI_Localizator.ShowAll, onClick: handleToggleAllUsers, icon: showingAllUsers ? _jsx(IconShowAllUsersOff, {}) : _jsx(IconShowAllUsers, {}) })) : undefined;
     return (_jsx(TMChooserForm, { title: getTitle(), allowMultipleSelection: allowMultipleSelection, startWithShowOnlySelectedItems: startWithShowOnlySelectedItems, hasShowOnlySelectedItems: hasShowOnlySelectedItems, width: width, height: height, manageUseLocalizedName: false, columns: columns ?? dataColumns, showDefaultColumns: false, selectedIDs: selectedIDs, cellRenderIcon: cellRenderIcon, dataSource: currentDataSource, getItems: getItems, hasShowId: !hideShowId, hideRefresh: hideRefresh, customButtons: customButton, onClose: onClose, onChoose: (IDs) => onChoose?.(IDs) }));
 };
-export const TMUserIdViewer = ({ userId, showIcon = false, noneSelectionText = `<${SDKUI_Localizator.NoneSelection}>` }) => {
-    const [ud, setUd] = useState();
-    useEffect(() => {
-        if (!userId || userId <= 0) {
-            setUd(undefined);
-            return;
-        }
-        TMSpinner.show({ description: `${SDKUI_Localizator.Loading} - ${SDK_Localizator.Users} ...` });
-        UserListCacheService.GetAsync(userId).then((ud) => { setUd(ud); TMSpinner.hide(); }).catch((err) => { TMExceptionBoxManager.show({ exception: err }); });
-    }, [userId]);
-    const getIcon = () => {
-        if (!showIcon)
-            return null;
-        if (!userId)
-            return null;
-        return ud ?
-            _jsx(TMUserIcon, { ud: ud })
-            :
-                _jsx(TMTooltip, { content: SDKUI_Localizator.ValueNotPresent, children: _jsx(IconWarning, { color: TMColors.warning }) });
-    };
-    const getDescription = () => {
-        if (!userId)
-            return undefined;
-        return ud ? getCompleteUserName(ud.domain, ud.name) : userId.toString() ?? noneSelectionText;
-    };
-    return (_jsxs("span", { style: { display: 'flex', alignItems: 'center', gap: '4px' }, children: [getIcon(), _jsx("span", { children: getDescription() })] })
-    // <StyledDivHorizontal>
-    //     {getIcon()}
-    //     <p style={{ textAlign: 'left', marginLeft: showIcon ? '5px' : '', opacity: ud ? 1 : 0.5 }}>
-    //         {getDescription()}
-    //     </p>
-    // </StyledDivHorizontal>
-    );
-};
 export const TMUserIcon = ({ ud }) => {
     if (!ud)
         return null;
@@ -109,12 +73,28 @@ export const TMUserIcon = ({ ud }) => {
     return (_jsx(TMUserTooltip, { ud: ud, children: icon }));
 };
 export const TMUserTooltip = ({ ud, children }) => {
-    const renderTooltipContent = (ud) => {
-        let isExpired = User_IsExpired(ud);
-        return (!ud ? null
-            : _jsxs(StyledTooltipContainer, { children: [_jsx("div", { children: `ID: ${ud.id}` }), _jsx("div", { children: `${SDKUI_Localizator.Name}: ${getCompleteUserName(ud.domain, ud.name)}` }), ud.description && _jsx("div", { children: `${SDKUI_Localizator.Description}: ${ud.description}` }), ud.type && _jsxs("div", { children: [SDKUI_Localizator.Type, ": ", ud.type] }), ud.level && _jsxs("div", { children: [SDKUI_Localizator.UserLevel, ": ", LocalizeUserLevels(ud.level)] }), _jsxs("div", { children: [SDKUI_Localizator.Valid, ": ", isExpired ? SDKUI_Localizator.No : SDKUI_Localizator.Yes, " - ", SDKUI_Localizator.Disabled, ": ", ud.disabled ? SDKUI_Localizator.Yes : SDKUI_Localizator.No] }), _jsx(StyledTooltipSeparatorItem, {}), _jsxs("div", { children: [SDKUI_Localizator.OwnerName, ": ", ud.ownerName, " (", ud.ownerID, ")"] }), _jsxs("div", { children: [SDKUI_Localizator.OwnershipLevel, ": ", LocalizeOwnershipLevels(ud.ownershipLevel)] }), _jsxs("div", { children: [SDKUI_Localizator.CreationTime, ": ", ud.creationTime?.toDateString()] }), _jsxs("div", { children: [SDKUI_Localizator.LastUpdateTime, ": ", ud.lastUpdateTime?.toDateString()] })] }));
+    const buildTitle = (ud) => {
+        if (!ud)
+            return '';
+        const isExpired = User_IsExpired(ud);
+        return [
+            `ID: ${ud.id ?? ''}`,
+            `${SDKUI_Localizator.Name}: ${getCompleteUserName(ud.domain, ud.name) ?? ''}`,
+            ud.description && `${SDKUI_Localizator.Description}: ${ud.description}`,
+            ud.type && `${SDKUI_Localizator.Type}: ${ud.type}`,
+            ud.level && `${SDKUI_Localizator.UserLevel}: ${LocalizeUserLevels(ud.level) ?? ''}`,
+            `${SDKUI_Localizator.Valid}: ${isExpired ? SDKUI_Localizator.No : SDKUI_Localizator.Yes}`,
+            `${SDKUI_Localizator.Disabled}: ${ud.disabled ? SDKUI_Localizator.Yes : SDKUI_Localizator.No}`,
+            `---`,
+            `${SDKUI_Localizator.OwnerName}: ${ud.ownerName ?? ''} (${ud.ownerID ?? ''})`,
+            `${SDKUI_Localizator.OwnershipLevel}: ${LocalizeOwnershipLevels(ud.ownershipLevel) ?? ''}`,
+            `${SDKUI_Localizator.CreationTime}: ${ud.creationTime?.toDateString() ?? ''}`,
+            `${SDKUI_Localizator.LastUpdateTime}: ${ud.lastUpdateTime?.toDateString() ?? ''}`
+        ]
+            .filter(Boolean)
+            .join('\n');
     };
-    return (_jsx(TMTooltip, { content: renderTooltipContent(ud), children: children }));
+    return (_jsx("div", { title: buildTitle(ud), children: children }));
 };
 const getCompleteUserName = (domain, name) => {
     if (!name)

package/lib/components/editors/TMMetadataValues.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import styled from "styled-components";
-import { AccessLevels, DcmtTypeListCacheService, LayoutGroupBorderStyles, LayoutGroupOrientations, LayoutItemTypes, LayoutModes, MetadataDataDomains, MetadataDataTypes, SDK_Globals, SystemMIDsAsNumber, SystemTIDs, TemplateTIDs, WorkItemMetadataNames } from '@topconsultnpm/sdk-ts';
-import { IconUndo, IconPencil, IconFunction, IconMenuVertical, IconDataList, SDKUI_Localizator, IconNull, stringIsNullOrEmpty, deepCompare, SDKUI_Globals, IconDcmtTypeSys } from "../../helper";
+import { AccessLevels, DcmtTypeListCacheService, LayoutGroupBorderStyles, LayoutGroupOrientations, LayoutItemTypes, LayoutModes, MetadataDataDomains, MetadataDataTypes, SDK_Globals, SystemMIDsAsNumber, SystemTIDs, WorkItemMetadataNames } from '@topconsultnpm/sdk-ts';
+import { IconUndo, IconPencil, IconFunction, IconMenuVertical, IconDataList, SDKUI_Localizator, IconNull, stringIsNullOrEmpty, deepCompare, SDKUI_Globals, IconDcmtTypeSys, isApprovalWorkflowView } from "../../helper";
 import { TMColors } from "../../utils/theme";
 import TMButton from "../base/TMButton";
 import TMDropDownMenu from "../base/TMDropDownMenu";
@@ -389,17 +389,35 @@ const TMMetadataValues = ({ showCheckBoxes = ShowCheckBoxesMode.Never, checkPerm
         return (_jsxs("div", { style: { width: '100%' }, children: [draftData.length > 0 && _jsx(TMAccordion, { title: SDKUI_Localizator.Draft, children: draftData.map(item => renderMetadataItem(item, isReadOnly)) }), checkOutData.length > 0 && _jsx(TMAccordion, { title: `${SDKUI_Localizator.CheckIn}/${SDKUI_Localizator.CheckOut}`, children: checkOutData.map(item => renderMetadataItem(item, true)) })] }));
     }, [metadataValues, showCheckBoxes, showNullValueCheckBoxes, isReadOnly, dynDataListsToBeRefreshed, validationItems, selectedMID, isOpenDistinctValues, openChooserBySingleClick, metadataValuesOrig]);
     const layoutChronology = useMemo(() => {
-        const chronologyData = [];
+        // Definiamo l'ordine desiderato: Version, Tipo, Dimensione, Autore, Data Ultima modifica
+        const desiredChronologyOrder = [
+            ChronologyMIDs.Ver,
+            SystemMIDsAsNumber.FileExt,
+            SystemMIDsAsNumber.FileSize,
+            ChronologyMIDs.AuthorID,
+            ChronologyMIDs.CheckInTime,
+        ];
+        const tempChronologyDataMap = {};
         metadataValues.forEach(item => {
             switch (item.md?.id) {
                 case ChronologyMIDs.Ver:
                 case ChronologyMIDs.AuthorID:
-                    chronologyData.push(item);
+                case ChronologyMIDs.CheckInTime:
+                case SystemMIDsAsNumber.FileExt:
+                case SystemMIDsAsNumber.FileSize:
+                    tempChronologyDataMap[item.md.id] = item;
                     break;
                 default:
                     break;
             }
         });
+        // Visualizziamo nell'ordine desiderato
+        const chronologyData = [];
+        desiredChronologyOrder.forEach(id => {
+            if (tempChronologyDataMap[id]) {
+                chronologyData.push(tempChronologyDataMap[id]);
+            }
+        });
         return (_jsx("div", { style: { width: '100%' }, children: chronologyData.length > 0 && chronologyData.map(item => renderMetadataItem(item, isReadOnly)) }));
     }, [metadataValues, showCheckBoxes, showNullValueCheckBoxes, isReadOnly, dynDataListsToBeRefreshed, validationItems, selectedMID, isOpenDistinctValues, openChooserBySingleClick, metadataValuesOrig]);
     const layoutDsAttachs = useMemo(() => {
@@ -550,7 +568,7 @@ const TMMetadataValues = ({ showCheckBoxes = ShowCheckBoxesMode.Never, checkPerm
         if (allSystem) {
             return metadataValues.map((item) => renderMetadataItem(item, true));
         }
-        if (currentDTD?.templateTID === TemplateTIDs.WF_WIApprView && !isReadOnly) {
+        if (isApprovalWorkflowView(currentDTD) && !isReadOnly) {
             return layoutWorkItem;
         }
         switch (currentDTD?.id) {

package/lib/components/editors/TMTextBox.js

@@ -9,7 +9,7 @@ import { TMExceptionBoxManager } from '../base/TMPopUp';
 import TMLayoutContainer, { TMLayoutItem } from '../base/TMLayout';
 import TMVilViewer from '../base/TMVilViewer';
 import TMTooltip from '../base/TMTooltip';
-import { ContextMenu } from 'devextreme-react';
+import TMContextMenu from '../NewComponents/ContextMenu/TMContextMenu';
 import { DeviceType, useDeviceType } from '../base/TMDeviceProvider';
 import TMChooserForm from '../forms/TMChooserForm';
 import { FormulaItemHelper } from './TMTextExpression';
@@ -94,7 +94,10 @@ const TMTextBox = ({ autoFocus, maxLength, labelColor, precision, fromModal = fa
         if (formulaItems && formulaItems.length > 0) {
             let menuItems = [];
             for (const formula of formulaItems) {
-                menuItems.push({ text: formula });
+                menuItems.push({
+                    name: formula,
+                    onClick: () => insertText(formula)
+                });
             }
             setFormulaMenuItems(menuItems);
         }
@@ -269,7 +272,7 @@ const TMTextBox = ({ autoFocus, maxLength, labelColor, precision, fromModal = fa
                                         onBlur?.(undefined);
                                     }, children: _jsx(IconClearButton, {}) }), buttons.map((buttonItem, index) => {
                                 return (_jsx(StyledTextBoxEditorButton, { onClick: buttonItem.onClick, children: _jsx(TMTooltip, { content: buttonItem.text, children: buttonItem.icon }) }, buttonItem.text));
-                            })] }), openFormulaItemsChooser(), formulaItems.length > 0 && (_jsx(ContextMenu, { dataSource: formulaMenuItems, target: `#text-${id}`, onItemClick: (e) => { insertText(e.itemData?.text ?? ''); } })), _jsx(TMVilViewer, { vil: validationItems })] }));
+                            })] }), openFormulaItemsChooser(), formulaItems.length > 0 && (_jsx(TMContextMenu, { items: formulaMenuItems, target: `#text-${id}` })), _jsx(TMVilViewer, { vil: validationItems })] }));
     };
     const renderedLeftLabelTextBox = () => {
         return (_jsxs(TMLayoutContainer, { direction: 'horizontal', children: [icon && _jsx(TMLayoutItem, { width: '20px', children: _jsx(StyledEditorIcon, { "$disabled": disabled, "$vil": validationItems, "$isModified": isModifiedWhen, children: icon }) }), _jsx(TMLayoutItem, { children: _jsxs(StyledEditorContainer, { "$width": width, children: [label && _jsx(StyledEditorLabel, { "$color": labelColor, "$isFocused": isFocused, "$labelPosition": labelPosition, "$disabled": disabled, children: label }), renderInputField()] }) })] }));

package/lib/components/features/assistant/TMToppyDraggableHelpCenter.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+interface TMToppyDraggableHelpCenterProps {
+    /** Contenuto da visualizzare nella speech bubble */
+    content?: React.ReactNode;
+    /** Se true, renderizza Toppy nel document.body tramite Portal invece che nel parent */
+    usePortal?: boolean;
+    /** Allineamento iniziale del componente (destra o sinistra) */
+    align?: 'right' | 'left';
+    /** Visibilità del componente */
+    isVisible?: boolean;
+    /** Callback chiamato quando si clicca sull'immagine di Toppy */
+    onToppyImageClick?: () => void;
+}
+declare const TMToppyDraggableHelpCenter: (props: TMToppyDraggableHelpCenterProps) => import("react/jsx-runtime").JSX.Element;
+export default TMToppyDraggableHelpCenter;