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

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

@@ -10,27 +10,36 @@ const TMDateBox = (props) => {
         let htmlElement = dateBoxRef?.current?.instance().element();
         if (!htmlElement)
             return;
-        let color = props.isModifiedWhen ? TMColors.tertiary : TMColors.border_normal;
+        let borderColor = props.isModifiedWhen ? TMColors.tertiary : TMColors.border_normal;
+        let textColor = props.isModifiedWhen ? TMColors.isModified : TMColors.text_normal;
         let inputContainer = htmlElement.getElementsByClassName("dx-texteditor-input-container")[0];
         if (inputContainer) {
             inputContainer.style.background = props.readOnly ? 'linear-gradient(white 20%, #d6d6d6 80%)' : '';
-            inputContainer.style.color = props.readOnly ? '#525252' : 'transparent';
+            inputContainer.style.color = props.readOnly ? '#525252' : textColor;
+        }
+        let input = htmlElement.querySelector(".dx-texteditor-input");
+        if (input) {
+            if (!props.readOnly) {
+                input.style.color = textColor;
+            }
+            input.style.fontSize = 'var(--base-font-size)';
+            input.style.fontFamily = 'var(--base-font-family)';
         }
         let label = htmlElement.getElementsByClassName("dx-label")[0];
         if (label) {
-            label.style.borderBottomColor = color;
+            label.style.borderBottomColor = borderColor;
         }
         let labelBefore = htmlElement.getElementsByClassName("dx-label-before")[0];
         if (labelBefore) {
-            labelBefore.style.borderBottomColor = color;
-            labelBefore.style.borderTopColor = color;
-            labelBefore.style.borderInlineStartColor = color;
+            labelBefore.style.borderBottomColor = borderColor;
+            labelBefore.style.borderTopColor = borderColor;
+            labelBefore.style.borderInlineStartColor = borderColor;
         }
         let labelAfter = htmlElement.getElementsByClassName("dx-label-after")[0];
         if (labelAfter) {
-            labelAfter.style.borderBottomColor = color;
-            labelAfter.style.borderTopColor = color;
-            labelAfter.style.borderInlineEndColor = color;
+            labelAfter.style.borderBottomColor = borderColor;
+            labelAfter.style.borderTopColor = borderColor;
+            labelAfter.style.borderInlineEndColor = borderColor;
         }
     }, [props.isModifiedWhen, props.readOnly]);
     const dateBoxRef = useRef(null);

package/lib/components/editors/TMLocalizedTextBox.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { CultureIDs } from '@topconsultnpm/sdk-ts';
+import { CultureIDs, QueryDescriptor } from '@topconsultnpm/sdk-ts';
 import { ValidationItem } from '@topconsultnpm/sdk-ts';
 export declare const getCultureIDImg: (cultureID: CultureIDs) => any;
 interface TMLocalizedTextBoxProps {
@@ -13,6 +13,8 @@ interface TMLocalizedTextBoxProps {
     value_ES?: string;
     value_DE?: string;
     validationItems?: ValidationItem[];
+    qd?: QueryDescriptor;
+    tid?: number;
     onValueChanged: (lang: CultureIDs, value: string) => void;
 }
 declare const TMLocalizedTextBox: React.FC<TMLocalizedTextBoxProps>;

package/lib/components/editors/TMLocalizedTextBox.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
 import TMTextBox from './TMTextBox';
+import TMMetadataTextBox from './TMMetadataTextBox';
 import { IconLanguage, SDKUI_Localizator } from '../../helper';
 import { CultureIDs } from '@topconsultnpm/sdk-ts';
 import it from '../../assets/italy.svg';
@@ -13,11 +14,9 @@ import pt from '../../assets/portugal.svg';
 import { createPortal } from 'react-dom';
 const Portal = ({ children, popoverRef }) => {
     const mount = document.body;
-    // Usa un ref per l'elemento del portale per evitare di ricrearlo ad ogni render
     const elRef = useRef(document.createElement('div'));
     useEffect(() => {
         const el = elRef.current;
-        // Assegna il ref al div del portale
         el.ref = popoverRef;
         mount.appendChild(el);
         return () => {
@@ -33,7 +32,7 @@ const LocalizedContainer = styled.div `
 const Popover = styled.div `
   display: ${props => props.$isVisible ? 'flex' : 'none'};
   flex-direction: column;
-  position: fixed; /* Usa 'fixed' o 'absolute' a seconda del comportamento desiderato */
+  position: fixed;
   top: ${props => props.$top}px;
   left: ${props => props.$left}px;
   width: ${props => props.$width}px;
@@ -41,7 +40,7 @@ const Popover = styled.div `
   border-radius: 4px;
   background-color: #fff;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  z-index: 2000;
+  z-index: 1502;
   padding: 8px;
 `;
 const Badge = styled.span `
@@ -72,10 +71,10 @@ export const getCultureIDImg = (cultureID) => {
         default: return it;
     }
 };
-const TMLocalizedTextBox = ({ label, value, value_IT, value_EN, value_FR, value_PT, value_ES, value_DE, isModifiedWhen, validationItems, onValueChanged, }) => {
+const TMLocalizedTextBox = ({ label, value, value_IT, value_EN, value_FR, value_PT, value_ES, value_DE, isModifiedWhen, validationItems, qd, tid, onValueChanged, }) => {
     const [isPopoverVisible, setIsPopoverVisible] = useState(false);
-    const containerRef = useRef(null); // Riferimento al contenitore principale
-    const popoverRef = useRef(null); // Riferimento per il Popover
+    const containerRef = useRef(null);
+    const popoverRef = useRef(null);
     const [popoverPosition, setPopoverPosition] = useState({ top: 0, left: 0, width: 0 });
     const languages = [
         { code: CultureIDs.It_IT, label: 'Italiano', value: value_IT },
@@ -85,13 +84,12 @@ const TMLocalizedTextBox = ({ label, value, value_IT, value_EN, value_FR, value_
         { code: CultureIDs.Es_ES, label: 'Español', value: value_ES },
         { code: CultureIDs.De_DE, label: 'Deutsch', value: value_DE },
     ];
-    // Calcola il numero di lingue con valori non nulli o vuoti
     const localizedCount = languages.filter(lang => lang.value && lang.value.trim() !== '').length;
     const handleTogglePopover = () => {
         if (containerRef.current) {
             const rect = containerRef.current.getBoundingClientRect();
             setPopoverPosition({
-                top: rect.bottom, // Posiziona sotto l'input
+                top: rect.bottom,
                 left: rect.left,
                 width: rect.width
             });
@@ -99,19 +97,23 @@ const TMLocalizedTextBox = ({ label, value, value_IT, value_EN, value_FR, value_
         setIsPopoverVisible(prev => !prev);
     };
     const handleClosePopover = () => setIsPopoverVisible(false);
-    // Close popover when clicking outside
     useEffect(() => {
+        if (!isPopoverVisible)
+            return;
         const handleClickOutside = (event) => {
-            if (isPopoverVisible &&
-                containerRef.current &&
+            if (containerRef.current &&
                 !containerRef.current.contains(event.target) &&
                 popoverRef.current &&
                 !popoverRef.current.contains(event.target)) {
                 handleClosePopover();
             }
         };
-        document.addEventListener("mousedown", handleClickOutside);
+        // Ritarda l'aggiunta del listener per evitare che catturi il click di apertura
+        const timeoutId = setTimeout(() => {
+            document.addEventListener("mousedown", handleClickOutside);
+        }, 0);
         return () => {
+            clearTimeout(timeoutId);
             document.removeEventListener("mousedown", handleClickOutside);
         };
     }, [isPopoverVisible]);
@@ -120,6 +122,6 @@ const TMLocalizedTextBox = ({ label, value, value_IT, value_EN, value_FR, value_
         icon: (_jsxs(IconContainer, { children: [_jsx(IconLanguage, {}), localizedCount > 0 && _jsx(Badge, { children: localizedCount })] })),
         onClick: handleTogglePopover,
     };
-    return (_jsxs(LocalizedContainer, { ref: containerRef, children: [_jsx(TMTextBox, { type: "text", label: label, value: value, isModifiedWhen: isModifiedWhen, buttons: [localizationButton], validationItems: validationItems, onValueChanged: (e) => onValueChanged(CultureIDs.None, e.target.value) }), isPopoverVisible && (_jsx(Portal, { popoverRef: popoverRef, children: _jsx(Popover, { ref: popoverRef, "$isVisible": isPopoverVisible, "$top": popoverPosition.top, "$left": popoverPosition.left, "$width": popoverPosition.width, onMouseDown: (e) => e.stopPropagation(), children: languages.map((lang) => (_jsx(TMTextBox, { label: `${lang.label}`, showClearButton: true, icon: _jsx("img", { src: getCultureIDImg(lang.code), alt: "Lang", width: 18, height: 18 }), value: lang.value || '', onValueChanged: (e) => onValueChanged(lang.code, e.target.value) }, lang.code))) }) }))] }));
+    return (_jsxs(LocalizedContainer, { ref: containerRef, children: [(qd || tid) ? (_jsx(TMMetadataTextBox, { type: "text", label: label, value: value, isModifiedWhen: isModifiedWhen, buttons: [localizationButton], validationItems: validationItems, qd: qd, tid: tid, onValueChanged: (e) => onValueChanged(CultureIDs.None, e.target.value) })) : (_jsx(TMTextBox, { type: "text", label: label, value: value, isModifiedWhen: isModifiedWhen, buttons: [localizationButton], validationItems: validationItems, onValueChanged: (e) => onValueChanged(CultureIDs.None, e.target.value) })), isPopoverVisible && (_jsx(Portal, { popoverRef: popoverRef, children: _jsx(Popover, { ref: popoverRef, "$isVisible": isPopoverVisible, "$top": popoverPosition.top, "$left": popoverPosition.left, "$width": popoverPosition.width, onMouseDown: (e) => e.stopPropagation(), children: languages.map((lang) => ((qd || tid) ? (_jsx(TMMetadataTextBox, { label: `${lang.label}`, showClearButton: true, icon: _jsx("img", { src: getCultureIDImg(lang.code), alt: "Lang", width: 18, height: 18 }), value: lang.value || '', qd: qd, tid: tid, onValueChanged: (e) => onValueChanged(lang.code, e.target.value) }, lang.code)) : (_jsx(TMTextBox, { label: `${lang.label}`, showClearButton: true, icon: _jsx("img", { src: getCultureIDImg(lang.code), alt: "Lang", width: 18, height: 18 }), value: lang.value || '', onValueChanged: (e) => onValueChanged(lang.code, e.target.value) }, lang.code)))) }) }))] }));
 };
 export default TMLocalizedTextBox;

package/lib/components/editors/TMMetadataTextBox.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { QueryDescriptor } from '@topconsultnpm/sdk-ts';
+import type { ITMTextBox } from './TMTextBox';
+interface ITMMetadataTextBox extends ITMTextBox {
+    qd?: QueryDescriptor;
+    tid?: number;
+}
+declare const TMMetadataTextBox: React.FC<ITMMetadataTextBox>;
+export default TMMetadataTextBox;

package/lib/components/editors/TMMetadataTextBox.js

@@ -0,0 +1,92 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import TMTextBox from './TMTextBox';
+import TMContextMenu from '../NewComponents/ContextMenu/TMContextMenu';
+import { useMetadataExpression } from '../../hooks/useMetadataExpression';
+const TMMetadataTextBox = (props) => {
+    const { metadatas_Info_Source, Expression_IDs2Names, Expression_Names2IDs } = useMetadataExpression({
+        qd: props.qd,
+        tid: props.tid
+    });
+    const insertAtCursor = (textToInsert) => {
+        const currentValue = Expression_IDs2Names(props.value) || '';
+        let newValue = currentValue;
+        let cursorPosition = currentValue.length;
+        const activeElement = document.activeElement;
+        if (activeElement && activeElement.tagName === 'INPUT' && activeElement.selectionStart !== null) {
+            const start = activeElement.selectionStart || 0;
+            const end = activeElement.selectionEnd || 0;
+            newValue =
+                currentValue.substring(0, start) +
+                    textToInsert +
+                    currentValue.substring(end);
+            cursorPosition = start + textToInsert.length;
+        }
+        else {
+            newValue = currentValue + textToInsert;
+            cursorPosition = newValue.length;
+        }
+        const syntheticEvent = {
+            target: { value: Expression_Names2IDs(newValue) }
+        };
+        props.onValueChanged?.(syntheticEvent);
+        setTimeout(() => {
+            const activeElement = document.activeElement;
+            if (activeElement && activeElement.tagName === 'INPUT') {
+                activeElement.setSelectionRange(cursorPosition, cursorPosition);
+                activeElement.focus();
+            }
+        }, 0);
+    };
+    // Crea i menu items per il context menu
+    const contextMenuItems = useMemo(() => {
+        // Separa metadati di sistema (Mid < 100) da quelli normali
+        const systemMetadata = metadatas_Info_Source.filter(mh => mh.Mid < 100);
+        const normalMetadata = metadatas_Info_Source.filter(mh => mh.Mid >= 100);
+        const items = [];
+        // Aggiungi metadati normali
+        normalMetadata.forEach(mh => {
+            items.push({
+                name: mh.MetadataName,
+                onClick: () => insertAtCursor(`{@${mh.MetadataName}}`)
+            });
+        });
+        // Aggiungi sottomenu per metadati di sistema se presenti
+        if (systemMetadata.length > 0) {
+            items.push({
+                name: 'Metadati di sistema',
+                beginGroup: normalMetadata.length > 0, // Separatore se ci sono anche metadati normali
+                submenu: systemMetadata.map(mh => ({
+                    name: mh.MetadataName,
+                    onClick: () => insertAtCursor(`{@${mh.MetadataName}}`)
+                }))
+            });
+        }
+        return items;
+    }, [metadatas_Info_Source, props.value]);
+    const renderButtons = () => {
+        const customButtons = [];
+        // Aggiungi eventuali bottoni custom passati via props
+        if (props.buttons) {
+            customButtons.push(...props.buttons);
+        }
+        return customButtons;
+    };
+    const handleValueChanged = (e) => {
+        const syntheticEvent = {
+            ...e,
+            target: {
+                ...e.target,
+                value: Expression_Names2IDs(e.target.value) || ''
+            }
+        };
+        props.onValueChanged?.(syntheticEvent);
+    };
+    // Se non ci sono metadati (qd o tid non specificati), usa TMTextBox normale
+    if (!props.qd && !props.tid) {
+        return (_jsx(TMTextBox, { ...props, buttons: renderButtons(), value: Expression_IDs2Names(props.value) ?? '', onValueChanged: handleValueChanged }));
+    }
+    // Altrimenti, wrappa TMTextBox con TMContextMenu
+    return (_jsx(TMContextMenu, { items: contextMenuItems, trigger: "right", children: _jsx(TMTextBox, { ...props, buttons: renderButtons(), value: Expression_IDs2Names(props.value) ?? '', onValueChanged: handleValueChanged }) }));
+};
+export default TMMetadataTextBox;

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

@@ -2,7 +2,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { useState, useEffect, useRef } from 'react';
 import { StyledEditorContainer, StyledEditorIcon, StyledEditorLabel, StyledTextareaEditor } from './TMEditorStyled';
 import { FontSize, TMColors } from '../../utils/theme';
-import TMContextMenu, { useContextMenu } from '../base/TMContextMenuOLD';
+import TMContextMenu from '../NewComponents/ContextMenu/TMContextMenu';
 import { TMExceptionBoxManager } from '../base/TMPopUp';
 import TMLayoutContainer, { TMLayoutItem } from '../base/TMLayout';
 import TMVilViewer from '../base/TMVilViewer';
@@ -35,14 +35,10 @@ const TMTextArea = (props) => {
     const [isFocused, setIsFocused] = useState(false);
     // Stores the current value of the textarea
     const [currentValue, setCurrentValue] = useState(value);
-    // Stores the items for the context menu
-    const [formulaMenuItems, setFormulaMenuItems] = useState([]);
     // Stores the calculated number of rows for the textarea
     const [calculatedRows, setCalculatedRows] = useState(rows ?? 1);
     //Show chooserForm formulaItems
     const [showFormulaItemsChooser, setShowFormulaItemsChooser] = useState(false);
-    // Manages the state for the custom context menu
-    const { clicked, setClicked, points, setPoints } = useContextMenu();
     const deviceType = useDeviceType();
     // Attach a `ResizeObserver` to the textarea to monitor changes in width: dynamically updates rows based on textarea content and width
     useEffect(() => {
@@ -69,16 +65,15 @@ const TMTextArea = (props) => {
             setCalculatedRows(newRowCount);
         }
     }, [currentValue, autoCalculateRows]);
-    // Populate the formula menu items whenever the `formulaItems` prop changes
-    useEffect(() => {
-        if (formulaItems && formulaItems.length > 0) {
-            let menuItems = [];
-            for (const formula of formulaItems) {
-                menuItems.push({ text: formula });
-            }
-            setFormulaMenuItems(menuItems);
-        }
-    }, [formulaItems]);
+    // Build context menu items for formulas
+    const getFormulaMenuItems = () => {
+        if (!formulaItems || formulaItems.length === 0)
+            return [];
+        return formulaItems.map(formula => ({
+            name: formula,
+            onClick: () => insertText(formula)
+        }));
+    };
     function getFormulaDataSorce() {
         let fiarray = [];
         if (!formulaItems)
@@ -153,20 +148,8 @@ const TMTextArea = (props) => {
     };
     // Renders the textarea
     const renderTextArea = () => {
-        return _jsxs(_Fragment, { children: [_jsx(StyledTextareaEditor, { ref: inputRef, autoFocus: autoFocus, readOnly: readOnly, disabled: disabled, value: currentValue, placeholder: placeHolder, rows: calculatedRows, maxLength: maxLength, spellCheck: false, onFocus: () => setIsFocused(true), onBlur: (e) => { setIsFocused(false); if (currentValue != value)
-                        onBlur?.(currentValue); }, onChange: (e) => { setCurrentValue(e.target.value); onValueChanged?.(e); }, onContextMenu: (e) => {
-                        if (formulaItems.length <= 0)
-                            return;
-                        // prevent default right click behavior
-                        e.preventDefault();
-                        // set our click state to true when a user right clicks
-                        setClicked(true);
-                        const bounds = e.currentTarget.getBoundingClientRect();
-                        const x = e.clientX - bounds.left;
-                        const y = e.clientY - bounds.top;
-                        // set the x and y coordinates of our users right click
-                        setPoints({ x, y });
-                    }, "$isMobile": deviceType === DeviceType.MOBILE, "$maxHeight": maxHeight, "$disabled": disabled, "$vil": validationItems, "$isModified": isModifiedWhen, "$fontSize": fontSize, "$width": width, "$resize": resize }), _jsxs("div", { style: { display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', position: 'absolute', right: '6px', top: calculatedRows === 1 ? (label.length > 0 ? '20px' : '7px') : (label.length > 0 ? '22px' : '7px'), pointerEvents: disabled ? 'none' : 'auto', opacity: disabled ? 0.4 : 1 }, children: [formulaItems.length > 0 &&
+        const textareaElement = _jsxs(_Fragment, { children: [_jsx(StyledTextareaEditor, { ref: inputRef, autoFocus: autoFocus, readOnly: readOnly, disabled: disabled, value: currentValue, placeholder: placeHolder, rows: calculatedRows, maxLength: maxLength, spellCheck: false, onFocus: () => setIsFocused(true), onBlur: (e) => { setIsFocused(false); if (currentValue != value)
+                        onBlur?.(currentValue); }, onChange: (e) => { setCurrentValue(e.target.value); onValueChanged?.(e); }, "$isMobile": deviceType === DeviceType.MOBILE, "$maxHeight": maxHeight, "$disabled": disabled, "$vil": validationItems, "$isModified": isModifiedWhen, "$fontSize": fontSize, "$width": width, "$resize": resize }), _jsxs("div", { style: { display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', position: 'absolute', right: '6px', top: calculatedRows === 1 ? (label.length > 0 ? '20px' : '7px') : (label.length > 0 ? '22px' : '7px'), pointerEvents: disabled ? 'none' : 'auto', opacity: disabled ? 0.4 : 1 }, children: [formulaItems.length > 0 &&
                             _jsx(StyledTextAreaEditorButton, { onClick: () => {
                                     setShowFormulaItemsChooser(true);
                                 }, children: _jsx(IconDataList, {}) }), showClearButton && currentValue &&
@@ -178,7 +161,12 @@ const TMTextArea = (props) => {
                                     onBlur?.(undefined);
                                 }, children: _jsx(IconClearButton, {}) }), buttons.map((buttonItem, index) => {
                             return (_jsx(StyledTextAreaEditorButton, { onClick: buttonItem.onClick, children: _jsx(TMTooltip, { content: buttonItem.text, children: buttonItem.icon }) }, buttonItem.text));
-                        })] }), openFormulaItemsChooser(), formulaItems.length > 0 && clicked && (_jsx(TMContextMenu, { menuData: formulaMenuItems, top: points.y, left: points.x, onMenuItemClick: (formula) => insertText(formula) })), _jsx(TMVilViewer, { vil: validationItems })] });
+                        })] }), openFormulaItemsChooser(), _jsx(TMVilViewer, { vil: validationItems })] });
+        // Wrap with context menu if formula items exist
+        if (formulaItems.length > 0) {
+            return (_jsx(TMContextMenu, { items: getFormulaMenuItems(), trigger: "right", children: textareaElement }));
+        }
+        return textareaElement;
     };
     // Layout for the textarea with a left-aligned label
     const renderedLeftLabelTextArea = () => {

package/lib/components/editors/TMTextBox.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ITMEditorBase } from '../base/TMEditorBase';
 export type TextBoxType = 'text' | 'email' | 'password' | 'number' | 'secureText';
-interface ITMTextBox extends ITMEditorBase {
+export interface ITMTextBox extends ITMEditorBase {
     autoFocus?: boolean;
     formulaItems?: string[];
     maxValue?: number;

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()] }) })] }));