@topconsultnpm/sdkui-react 6.19.0-test.1 → 6.19.0

package/lib/components/editors/TMTextArea.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect, useRef } from 'react';
 import { StyledEditorContainer, StyledEditorIcon, StyledEditorLabel, StyledTextareaEditor } from './TMEditorStyled';
 import { FontSize, TMColors } from '../../utils/theme';
@@ -8,25 +8,27 @@ import TMLayoutContainer, { TMLayoutItem } from '../base/TMLayout';
 import TMVilViewer from '../base/TMVilViewer';
 import TMTooltip from '../base/TMTooltip';
 import { DeviceType, useDeviceType } from '../base/TMDeviceProvider';
-import { IconClearButton } from '../../helper';
+import { IconClearButton, IconDataList, SDKUI_Localizator } from '../../helper';
 import styled from 'styled-components';
-const StyledTextAreaEditorButton = styled.div `
-    color: ${TMColors.button_icon};
-    display: flex;
-    align-items: center;
-    position: relative;
-    cursor: pointer;
-    &:focus{
-        outline: none;
-        background-image: linear-gradient(white, #E4E9F7);
-        border-bottom: 2px solid;
-        border-bottom-color: ${TMColors.primary};
-     }
+import { FormulaItemHelper } from './TMTextExpression';
+import TMChooserForm from '../forms/TMChooserForm';
+const StyledTextAreaEditorButton = styled.div `
+    color: ${TMColors.button_icon};
+    display: flex;
+    align-items: center;
+    position: relative;
+    cursor: pointer;
+    &:focus{
+        outline: none;
+        background-image: linear-gradient(white, #E4E9F7);
+        border-bottom: 2px solid;
+        border-bottom-color: ${TMColors.primary};
+     }
 `;
 // Define the TMTextArea component
 const TMTextArea = (props) => {
     // Extract properties from the props object
-    const { label = '', value = '', width = '100%', height = 'auto', autoFocus = false, showClearButton, validationItems = [], disabled = false, isModifiedWhen = false, fontSize = FontSize.defaultFontSize, elementStyle = {}, icon = null, labelPosition = 'left', readOnly = false, onValueChanged, onBlur, placeHolder, formulaItems = [], buttons = [], maxHeight = 'auto', rows, maxLength, resize = true } = props;
+    const { label = '', value = '', width = '100%', height = 'auto', autoFocus = false, showClearButton, validationItems = [], disabled = false, isModifiedWhen = false, fontSize = FontSize.defaultFontSize, elementStyle = {}, icon = null, labelPosition = 'left', readOnly = false, onValueChanged, onBlur, placeHolder, formulaItems = [], buttons = [], maxHeight = 'auto', rows, maxLength, resize = true, autoCalculateRows = true } = props;
     // Reference to the textarea DOM element
     const inputRef = useRef(null);
     // Stores the textarea is focused
@@ -37,11 +39,15 @@ const TMTextArea = (props) => {
     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(() => {
+        if (!autoCalculateRows)
+            return;
         const observer = new ResizeObserver(() => { if (currentValue) {
             updateRows();
         } });
@@ -51,18 +57,18 @@ const TMTextArea = (props) => {
         return () => { if (inputRef.current) {
             observer.unobserve(inputRef.current);
         } };
-    }, [currentValue]);
+    }, [currentValue, autoCalculateRows]);
     // Update current value whenever the `value` prop changes, synchronize the internal state with the `value` prop
     useEffect(() => {
         setCurrentValue(value);
     }, [value]);
     // Recalculate the number of rows whenever the `currentValue` changes
     useEffect(() => {
-        if (currentValue) {
+        if (autoCalculateRows && currentValue) {
             const newRowCount = calculateRows(currentValue);
             setCalculatedRows(newRowCount);
         }
-    }, [currentValue]);
+    }, [currentValue, autoCalculateRows]);
     // Populate the formula menu items whenever the `formulaItems` prop changes
     useEffect(() => {
         if (formulaItems && formulaItems.length > 0) {
@@ -73,6 +79,30 @@ const TMTextArea = (props) => {
             setFormulaMenuItems(menuItems);
         }
     }, [formulaItems]);
+    function getFormulaDataSorce() {
+        let fiarray = [];
+        if (!formulaItems)
+            return [];
+        let i = 0;
+        for (const f of formulaItems) {
+            let fi = new FormulaItemHelper();
+            fi.id = i;
+            fi.paramName = f;
+            fiarray.push(fi);
+            i++;
+        }
+        return fiarray;
+    }
+    const openFormulaItemsChooser = () => {
+        return (showFormulaItemsChooser ?
+            _jsx(TMChooserForm, { title: SDKUI_Localizator.Parameters, height: '350', width: '300', hasShowId: false, showDefaultColumns: false, allowMultipleSelection: true, columns: [
+                    { dataField: 'paramName', caption: SDKUI_Localizator.Name, dataType: 'string', sortOrder: 'asc', alignment: 'left' }
+                ], dataSource: getFormulaDataSorce(), onClose: () => { setShowFormulaItemsChooser(false); }, onChoose: (IDs) => {
+                    let expr = value?.toString() ?? '';
+                    IDs.map(i => expr += formulaItems[i]);
+                    onValueChanged?.({ target: { value: expr } });
+                } }) : _jsx(_Fragment, {}));
+    };
     // Adjust the rows dynamically
     const updateRows = () => {
         const newRowCount = calculateRows(currentValue);
@@ -123,7 +153,7 @@ 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, onFocus: () => setIsFocused(true), onBlur: (e) => { setIsFocused(false); if (currentValue != value)
+        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;
@@ -136,15 +166,19 @@ const TMTextArea = (props) => {
                         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: label.length > 0 ? '22px' : '7px', pointerEvents: disabled ? 'none' : 'auto', opacity: disabled ? 0.4 : 1 }, children: [showClearButton && currentValue &&
+                    }, "$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 &&
                             _jsx(StyledTextAreaEditorButton, { onClick: () => {
                                     onValueChanged?.({ target: { value: undefined } });
                                     setCurrentValue('');
-                                    setCalculatedRows(1);
+                                    if (autoCalculateRows)
+                                        setCalculatedRows(1);
                                     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));
-                        })] }), formulaItems.length > 0 && clicked && (_jsx(TMContextMenu, { menuData: formulaMenuItems, top: points.y, left: points.x, onMenuItemClick: (formula) => insertText(formula) })), _jsx(TMVilViewer, { vil: validationItems })] });
+                        })] }), openFormulaItemsChooser(), formulaItems.length > 0 && clicked && (_jsx(TMContextMenu, { menuData: formulaMenuItems, top: points.y, left: points.x, onMenuItemClick: (formula) => insertText(formula) })), _jsx(TMVilViewer, { vil: validationItems })] });
     };
     // Layout for the textarea with a left-aligned label
     const renderedLeftLabelTextArea = () => {

package/lib/components/editors/TMTextBox.js

@@ -3,7 +3,7 @@ import { useState, useEffect, useRef } from 'react';
 import styled from 'styled-components';
 import { StyledEditor, StyledEditorContainer, StyledEditorIcon, StyledEditorLabel, editorColorManager } from './TMEditorStyled';
 import { FontSize, TMColors } from '../../utils/theme';
-import { genUniqueId, IconClearButton, IconHide, IconShow, SDKUI_Localizator } from '../../helper';
+import { genUniqueId, IconClearButton, IconDataList, IconHide, IconShow, SDKUI_Localizator } from '../../helper';
 import ShowAlert from '../base/TMAlert';
 import { TMExceptionBoxManager } from '../base/TMPopUp';
 import TMLayoutContainer, { TMLayoutItem } from '../base/TMLayout';
@@ -11,32 +11,35 @@ import TMVilViewer from '../base/TMVilViewer';
 import TMTooltip from '../base/TMTooltip';
 import { ContextMenu } from 'devextreme-react';
 import { DeviceType, useDeviceType } from '../base/TMDeviceProvider';
-const StyledShowPasswordIcon = styled.div `
-    color: ${props => !props.$disabled ? (props.$vil.length === 0) ? !props.$isModified ? TMColors.text_normal : TMColors.isModified : editorColorManager(props.$vil) : TMColors.disabled};
-    position: absolute;
-    right: 10px;
-    font-size: 18px;
-    transform: translateY(-25px);
-    cursor: pointer;
+import TMChooserForm from '../forms/TMChooserForm';
+import { FormulaItemHelper } from './TMTextExpression';
+const StyledShowPasswordIcon = styled.div `
+    color: ${props => !props.$disabled ? (props.$vil.length === 0) ? !props.$isModified ? TMColors.text_normal : TMColors.isModified : editorColorManager(props.$vil) : TMColors.disabled};
+    position: absolute;
+    right: 10px;
+    font-size: 18px;
+    transform: translateY(-25px);
+    cursor: pointer;
 `;
-const StyledTextBoxEditorButton = styled.div `
-    color: ${TMColors.button_icon};
-    display: flex;
-    align-items: center;
-    position: relative;
-    cursor: pointer;
-    &:focus{
-        outline: none;
-        background-image: linear-gradient(white, #E4E9F7);
-        border-bottom: 2px solid;
-        border-bottom-color: ${TMColors.primary};
-     }
+const StyledTextBoxEditorButton = styled.div `
+    color: ${TMColors.button_icon};
+    display: flex;
+    align-items: center;
+    position: relative;
+    cursor: pointer;
+    &:focus{
+        outline: none;
+        background-image: linear-gradient(white, #E4E9F7);
+        border-bottom: 2px solid;
+        border-bottom-color: ${TMColors.primary};
+     }
 `;
 const TMTextBox = ({ autoFocus, maxLength, labelColor, precision, fromModal = false, scale, showClearButton, validationItems = [], label = '', readOnly = false, formulaItems = [], buttons = [], isModifiedWhen, placeHolder, elementStyle, width = '100%', maxValue, minValue, fontSize = FontSize.defaultFontSize, icon, labelPosition = 'left', value, disabled = false, type = 'text', onValueChanged, onBlur, borderRadius, allowedPattern }) => {
     const [initialType, setInitialType] = useState(type);
     const [currentType, setCurrentType] = useState(type);
     const [currentValue, setCurrentValue] = useState(value);
     const [formulaMenuItems, setFormulaMenuItems] = useState([]);
+    const [showFormulaItemsChooser, setShowFormulaItemsChooser] = useState(false);
     const [isFocused, setIsFocused] = useState(false);
     const inputRef = useRef(null);
     const deviceType = useDeviceType();
@@ -219,6 +222,30 @@ const TMTextBox = ({ autoFocus, maxLength, labelColor, precision, fromModal = fa
         setCurrentValue(inputValue);
         onValueChanged?.({ target: { value: inputValue } }); // Passa il valore filtrato
     };
+    function getFormulaDataSorce() {
+        let fiarray = [];
+        if (!formulaItems)
+            return [];
+        let i = 0;
+        for (const f of formulaItems) {
+            let fi = new FormulaItemHelper();
+            fi.id = i;
+            fi.paramName = f;
+            fiarray.push(fi);
+            i++;
+        }
+        return fiarray;
+    }
+    const openFormulaItemsChooser = () => {
+        return (showFormulaItemsChooser ?
+            _jsx(TMChooserForm, { title: SDKUI_Localizator.Parameters, height: '350', width: '300', hasShowId: false, showDefaultColumns: false, allowMultipleSelection: true, columns: [
+                    { dataField: 'paramName', caption: SDKUI_Localizator.Name, dataType: 'string', sortOrder: 'asc', alignment: 'left' }
+                ], dataSource: getFormulaDataSorce(), onClose: () => { setShowFormulaItemsChooser(false); }, onChoose: (IDs) => {
+                    let expr = value?.toString() ?? '';
+                    IDs.map(i => expr += formulaItems[i]);
+                    onValueChanged?.({ target: { value: expr } });
+                } }) : _jsx(_Fragment, {}));
+    };
     const renderInputField = () => {
         const bulletEntity = '\u2022'; // •
         const displayedValue = initialType === 'secureText'
@@ -226,20 +253,23 @@ const TMTextBox = ({ autoFocus, maxLength, labelColor, precision, fromModal = fa
                 ? bulletEntity.repeat(currentValue?.length ?? 0)
                 : currentValue ?? '')
             : currentValue ?? '';
-        return (_jsxs("div", { style: { width: '100%', height: 'fit-content' }, id: `text-${id}`, children: [_jsx(StyledEditor, { ref: inputRef, id: `text-${label}-${id}`, name: label, autoFocus: autoFocus, readOnly: readOnly, type: currentType, disabled: disabled, value: displayedValue, width: width || '100%', placeholder: placeHolder, maxLength: maxLength, autoComplete: 'off', onFocus: () => setIsFocused(true), onBlur: (e) => { setIsFocused(false); if (currentValue != value)
+        return (_jsxs("div", { style: { width: '100%', height: 'fit-content' }, id: `text-${id}`, children: [_jsx(StyledEditor, { ref: inputRef, id: `text-${label}-${id}`, name: label, autoFocus: autoFocus, readOnly: readOnly, type: currentType, disabled: disabled, value: displayedValue, width: width || '100%', placeholder: placeHolder, maxLength: maxLength, autoComplete: 'off', spellCheck: false, onFocus: () => setIsFocused(true), onBlur: (e) => { setIsFocused(false); if (currentValue != value)
                         onBlur?.(currentValue); }, onChange: handleInputChange, onKeyDown: (e) => {
                         if (currentType === 'number') {
                             if (!scale && (e.key == "." || e.key == ","))
                                 e.preventDefault();
                         }
                     }, "$isMobile": deviceType === DeviceType.MOBILE, "$disabled": disabled, "$vil": validationItems, "$isModified": isModifiedWhen, "$fontSize": fontSize, "$maxValue": maxValue, "$width": width, "$type": currentType, "$borderRadius": borderRadius }), (initialType === 'password' || initialType === 'secureText') && _jsx(StyledShowPasswordIcon, { onClick: toggleShowPassword, "$disabled": disabled, "$vil": validationItems, "$isModified": isModifiedWhen, children: showPasswordIcon() }), initialType !== 'password' &&
-                    _jsxs("div", { style: { display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', position: 'absolute', right: type === 'number' ? '25px' : '6px', top: label.length > 0 ? '20px' : '7px', pointerEvents: disabled ? 'none' : 'auto', opacity: disabled ? 0.4 : 1 }, children: [showClearButton && currentValue &&
+                    _jsxs("div", { style: { display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', position: 'absolute', right: type === 'number' ? '25px' : '6px', top: label.length > 0 ? '20px' : '3px', pointerEvents: disabled ? 'none' : 'auto', opacity: disabled ? 0.4 : 1 }, children: [formulaItems.length > 0 &&
+                                _jsx(StyledTextBoxEditorButton, { onClick: () => {
+                                        setShowFormulaItemsChooser(true);
+                                    }, children: _jsx(IconDataList, {}) }), showClearButton && currentValue &&
                                 _jsx(StyledTextBoxEditorButton, { onClick: () => {
                                         onValueChanged?.({ target: { value: undefined } });
                                         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));
-                            })] }), 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(ContextMenu, { dataSource: formulaMenuItems, target: `#text-${id}`, onItemClick: (e) => { insertText(e.itemData?.text ?? ''); } })), _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,10 +1,9 @@
 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 { IconClear, IconColumns, IconDataList, SDKUI_Localizator, stringIsNullOrEmpty } from '../../helper';
+import { IconClear, IconColumns, SDKUI_Localizator, stringIsNullOrEmpty } from '../../helper';
 import { TMExceptionBoxManager } from '../base/TMPopUp';
 import { TMMetadataChooserForm } from '../choosers/TMMetadataChooser';
-import TMChooserForm from '../forms/TMChooserForm';
 import TMTextBox from './TMTextBox';
 import TMTextArea from './TMTextArea';
 const TMTextExpression = (props) => {
@@ -96,8 +95,7 @@ const TMTextExpression = (props) => {
         let buttons = [];
         if (props.qd || props.tid)
             buttons.push({ icon: _jsx(IconColumns, {}), text: SDKUI_Localizator.MetadataReferenceInsert, onClick: () => { setShowMetadataChooser(true); } });
-        if (props.formulaItems && props.formulaItems.length > 0)
-            buttons.push({ icon: _jsx(IconDataList, {}), text: SDKUI_Localizator.Parameters, onClick: () => setShowFormulaChooser(true) });
+        // if (props.formulaItems && props.formulaItems.length > 0) buttons.push({ icon: <IconDataList />, text: SDKUI_Localizator.Parameters, onClick: () => setShowFormulaChooser(true) })
         buttons.push({ icon: _jsx(IconClear, {}), text: SDKUI_Localizator.Clear, onClick: () => props.onValueChanged?.('') });
         return buttons;
     };
@@ -120,20 +118,18 @@ const TMTextExpression = (props) => {
         }
         return output;
     }
-    function getFormulaDataSorce() {
-        let fiarray = [];
-        if (!props.formulaItems)
-            return [];
-        let i = 0;
-        for (const f of props.formulaItems) {
-            let fi = new FormulaItemHelper();
-            fi.id = i;
-            fi.paramName = f;
-            fiarray.push(fi);
-            i++;
-        }
-        return fiarray;
-    }
+    // function getFormulaDataSorce() {
+    //     let fiarray: FormulaItemHelper[] = []
+    //     if (!props.formulaItems) return []
+    //     let i: number = 0;
+    //     for (const f of props.formulaItems!) {
+    //         let fi = new FormulaItemHelper();
+    //         fi.id = i; fi.paramName = f;
+    //         fiarray.push(fi);
+    //         i++;
+    //     }
+    //     return fiarray;
+    // }
     const openMetadataChooseForm = () => {
         return (showMetadataChooser ?
             _jsx(TMMetadataChooserForm, { allowMultipleSelection: true, qd: props.qd, tids: props.tid ? [props.tid] : undefined, qdShowOnlySelectItems: true, allowSysMetadata: true, onClose: () => setShowMetadataChooser(false), onChoose: (tid_mid) => {
@@ -146,18 +142,30 @@ const TMTextExpression = (props) => {
             { dataField: 'paramName', caption: props.captionColumnChooser ?? SDKUI_Localizator.Name, dataType: 'string', sortOrder: 'asc', alignment: 'left' }
         ];
     }, []);
-    const openFormulaChooseForm = () => {
-        return (showFormulaChooser ?
-            _jsx(TMChooserForm, { title: props.titleChooser ?? SDKUI_Localizator.Parameters, height: props.higthChooser ?? '350', width: props.widthChooser ?? '300', hasShowId: false, showDefaultColumns: false, allowMultipleSelection: props.disableMultipleSelection !== true, columns: dataColumns, dataSource: getFormulaDataSorce(), onClose: () => { setShowFormulaChooser(false); }, onChoose: (IDs) => {
-                    let expr = props.value ?? '';
-                    IDs.map(i => expr += props.formulaItems[i]);
-                    props.onValueChanged?.(expr);
-                } }) : _jsx(_Fragment, {}));
-    };
+    // const openFormulaChooseForm = () => {
+    //     return (showFormulaChooser ?
+    //         <TMChooserForm
+    //             title={props.titleChooser ?? SDKUI_Localizator.Parameters}
+    //             height={props.higthChooser ?? '350'}
+    //             width={props.widthChooser ?? '300'}
+    //             hasShowId={false}
+    //             showDefaultColumns={false}
+    //             allowMultipleSelection={props.disableMultipleSelection !== true}
+    //             columns={dataColumns}
+    //             dataSource={getFormulaDataSorce()}
+    //             onClose={() => { setShowFormulaChooser(false); }}
+    //             onChoose={(IDs: number[]) => {
+    //                 let expr: string = props.value ?? '';
+    //                 IDs.map(i => expr += props.formulaItems![i]);
+    //                 props.onValueChanged?.(expr)
+    //             }}
+    //         /> : <></>
+    //     )
+    // }
     return (_jsxs(_Fragment, { children: [props.rows === undefined ?
-                _jsx(TMTextBox, { buttons: renderButtons(), isModifiedWhen: props.value != props.valueOrig, label: props.label, value: Expression_IDs2Names(props.value) ?? '', validationItems: props.validationItems, onValueChanged: (e) => { props.onValueChanged?.(Expression_Names2IDs(e.target.value)); } })
+                _jsx(TMTextBox, { buttons: renderButtons(), formulaItems: props.formulaItems, isModifiedWhen: props.value != props.valueOrig, label: props.label, value: Expression_IDs2Names(props.value) ?? '', validationItems: props.validationItems, onValueChanged: (e) => { props.onValueChanged?.(Expression_Names2IDs(e.target.value)); } })
                 :
-                    _jsx(TMTextArea, { buttons: renderButtons(), 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(), " ", openFormulaChooseForm()] }));
+                    _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) {

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import { DeviceType } from '../../base/TMDeviceProvider';
+/**
+ * Proprietà del componente ToppyDraggableHelpCenter
+ */
+interface ToppyDraggableHelpCenterProps {
+    /** Contenuto da visualizzare nella speech bubble */
+    content?: React.ReactNode;
+    /** Tipo di dispositivo per adattare il comportamento */
+    deviceType?: DeviceType;
+    /** Allineamento iniziale del componente (destra o sinistra) */
+    align?: 'right' | 'left';
+    /** Stato iniziale collassato/espanso */
+    initialIsCollapsed?: boolean;
+    /** Callback chiamato quando si clicca sull'immagine di Toppy */
+    onToppyImageClick?: () => void;
+    /** Visibilità del componente */
+    isVisible?: boolean;
+    /** Se true, renderizza Toppy nel document.body tramite Portal invece che nel parent */
+    usePortal?: boolean;
+}
+/**
+ * Componente ToppyDraggableHelpCenter
+ *
+ * Renderizza un assistente virtuale (Toppy) draggable che può mostrare contenuti
+ * in una speech bubble. Il componente può essere trascinato all'interno del suo
+ * contenitore e può essere collassato/espanso con un doppio click.
+ */
+declare const ToppyDraggableHelpCenter: React.FC<ToppyDraggableHelpCenterProps>;
+export default ToppyDraggableHelpCenter;