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

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

package/lib/components/editors/TMTextExpression.js

@@ -1,96 +1,17 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo, useState } from 'react';
-import { DcmtTypeListCacheService } from '@topconsultnpm/sdk-ts';
+import { useMemo, useState } from 'react';
 import { IconClear, IconColumns, SDKUI_Localizator, stringIsNullOrEmpty } from '../../helper';
-import { TMExceptionBoxManager } from '../base/TMPopUp';
 import { TMMetadataChooserForm } from '../choosers/TMMetadataChooser';
 import TMTextBox from './TMTextBox';
 import TMTextArea from './TMTextArea';
+import { useMetadataExpression } from '../../hooks/useMetadataExpression';
 const TMTextExpression = (props) => {
-    const [metadatas_Info_Source, setMetadatas_Info_Source] = useState([]);
+    const { metadatas_Info_Source, Expression_IDs2Names, Expression_Names2IDs } = useMetadataExpression({
+        qd: props.qd,
+        tid: props.tid
+    });
     const [showMetadataChooser, setShowMetadataChooser] = useState(false);
     const [showFormulaChooser, setShowFormulaChooser] = useState(false);
-    useEffect(() => { MetadataInfos_Source_Get_Async(); }, [props.qd]);
-    useEffect(() => { MetadataInfos_Source_GetByTID_Async(); }, [props.tid]);
-    async function MetadataInfos_Source_Get_Async() {
-        if (!props.qd?.select)
-            return;
-        let mhs_source = [];
-        try {
-            let dtd_source;
-            let md_source;
-            let tid_source = -1;
-            let si;
-            let sis = props.qd?.select?.slice();
-            sis = sis.slice().sort((a, b) => a.tid - b.tid);
-            for (si of sis) {
-                if (si.tid == undefined || si.mid == undefined)
-                    continue;
-                if (tid_source != si.tid) {
-                    dtd_source = await DcmtTypeListCacheService.GetAsync(si.tid, true);
-                    if (dtd_source == undefined)
-                        continue;
-                    tid_source = si.tid;
-                }
-                if (dtd_source?.metadata == undefined)
-                    continue;
-                md_source = dtd_source.metadata.find(o => o.id == si.mid);
-                if (md_source?.name == undefined)
-                    continue;
-                if (tid_source == undefined)
-                    continue;
-                mhs_source.push(new MetatadaHelper(si.mid, md_source.name));
-            }
-        }
-        catch (e) {
-            TMExceptionBoxManager.show({ exception: e, title: 'MetadataInfos_Source_Get_Async' });
-        }
-        setMetadatas_Info_Source(mhs_source);
-    }
-    async function MetadataInfos_Source_GetByTID_Async() {
-        if (!props.tid)
-            return;
-        let mhs_source = [];
-        try {
-            let dtd_source = await DcmtTypeListCacheService.GetAsync(props.tid, true);
-            if (dtd_source == undefined)
-                return;
-            if (dtd_source?.metadata == undefined)
-                return;
-            for (let md_source of dtd_source?.metadata) {
-                if (md_source?.name == undefined)
-                    continue;
-                if (md_source?.id == undefined)
-                    continue;
-                mhs_source.push(new MetatadaHelper(md_source.id, md_source.name));
-            }
-        }
-        catch (e) {
-            TMExceptionBoxManager.show({ exception: e, title: 'MetadataInfos_Source_GetByTID_Async' });
-        }
-        setMetadatas_Info_Source(mhs_source);
-    }
-    function Expression_IDs2Names(expression) {
-        if (expression == undefined)
-            return expression;
-        let temp = expression.slice();
-        let mh;
-        for (mh of metadatas_Info_Source) {
-            temp = temp.replaceAll(`{@${mh.Mid}}`, `{@${mh.MetadataName}}`);
-        }
-        temp = temp.replaceAll("{@1}", "{@DID}");
-        return temp;
-    }
-    function Expression_Names2IDs(expression) {
-        if (expression == undefined)
-            return expression;
-        let temp = expression.slice();
-        let mh;
-        for (mh of metadatas_Info_Source)
-            temp = temp.replaceAll(`{@${mh.MetadataName}}`, `{@${mh.Mid}}`);
-        temp = temp.replaceAll("{@DID}", "{@1}");
-        return temp;
-    }
     const renderButtons = () => {
         let buttons = [];
         if (props.qd || props.tid)
@@ -167,12 +88,6 @@ const TMTextExpression = (props) => {
                 :
                     _jsx(TMTextArea, { buttons: renderButtons(), formulaItems: props.formulaItems, isModifiedWhen: props.value != props.valueOrig, label: props.label, rows: props.rows, resize: false, placeHolder: props.placeHolder, value: Expression_IDs2Names(props.value) ?? '', validationItems: props.validationItems, onValueChanged: (e) => { props.onValueChanged?.(Expression_Names2IDs(e.target.value)); } }), openMetadataChooseForm(), " "] }));
 };
-class MetatadaHelper {
-    constructor(mid, metadataName) {
-        this.Mid = mid;
-        this.MetadataName = metadataName;
-    }
-}
 export class FormulaItemHelper {
     constructor() {
         this.id = 0;

package/lib/components/features/archive/TMArchive.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect, useMemo, useState } from 'react';
 import Logo from '../../../assets/Toppy-generico.png';
 import { DcmtTypeListCacheService, LayoutModes, SDK_Localizator } from '@topconsultnpm/sdk-ts';
-import { IconTree, SDKUI_Globals, SDKUI_Localizator, IconRecentlyViewed, IconPreview, IconShow, IconBoard, IconDcmtTypeSys, removeMruTid } from '../../../helper';
+import { IconTree, SDKUI_Globals, SDKUI_Localizator, IconRecentlyViewed, IconPreview, IconShow, IconBoard, IconDcmtTypeSys, removeMruTid, getMoreInfoTasksForDocument } from '../../../helper';
 import { useDeviceType, DeviceType } from '../../base/TMDeviceProvider';
 import TMLayoutContainer from '../../base/TMLayout';
 import TMRecentsManager from '../../grids/TMRecentsManager';
@@ -77,7 +77,7 @@ const TMArchive = ({ onDcmtTypeSelect = undefined, inputTID, inputFile = null, c
                 if (onDcmtTypeSelect)
                     onDcmtTypeSelect(tidToUse);
                 passToSearch(tidToUse, outputMids);
-            } : undefined, isSharedDcmt: isSharedArchive, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers }, currentTID)
+            } : undefined, isSharedDcmt: isSharedArchive, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers, moreInfoTasks: getMoreInfoTasksForDocument(allTasks, currentTID, currentTID === inputTID ? inputDID : undefined) }, currentTID)
         :
             _jsx(TMPanel, { title: 'Archiviazione', allowMaximize: false, children: _jsxs(TMLayoutContainer, { gap: 30, alignItems: 'center', justifyContent: 'center', children: [_jsx(StyledToppyTextContainer, { children: _jsx(StyledToppyText, { children: SDKUI_Localizator.DcmtTypeSelect }) }), _jsx(StyledToppyImage, { src: Logo, alt: 'Toppy' })] }) }), [currentTID, deviceType, mruTIDs, inputFile, currentInputMids, enableDragDropOverlay, isSharedArchive, allTasks]);
     const allInitialPanelVisibility = {

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;