@topconsultnpm/sdkui-react 6.19.0-dev1.9 → 6.19.0-dev2.1

package/lib/components/base/Styled.d.ts

@@ -7,6 +7,7 @@ export declare const StyledMultiViewPanel: import("styled-components/dist/types"
 }>> & string;
 export declare const StyledParagraph: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>> & string;
 export declare const StyledToolbarForm: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledReferenceButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
 export declare const StyledPanelPage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $isOpen?: boolean;
     $padding?: string;

package/lib/components/base/Styled.js

@@ -36,6 +36,46 @@ export const StyledToolbarForm = styled.div `
     gap: 2px;
     background-color: ${TMColors.toolbar_background};
 `;
+export const StyledReferenceButton = styled.button `
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 10px 16px;
+    border-radius: 20px;
+    border: none;
+    background-color: ${TMColors.button_floating_background};
+    color: white;
+    font-size: 0.9rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    text-align: center;
+    max-width: 200px;
+    gap: 2px;
+    
+    &:hover {
+        opacity: 0.9;
+        transform: translateY(-1px);
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    }
+    
+    &:active {
+        transform: translateY(0);
+    }
+    
+    &:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+    
+    span {
+        width: 100%;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+`;
 export const StyledPanelPage = styled.div ` 
   position: absolute; 
   width: calc(100% - 50px); 

package/lib/components/base/TMCustomButton.d.ts

@@ -0,0 +1,11 @@
+import { LayoutCustomButtonDescriptor } from '@topconsultnpm/sdk-ts';
+import { MetadataValueDescriptorEx } from '../..';
+type TMCustomButtonProps = {
+    button: LayoutCustomButtonDescriptor;
+    isModal?: boolean;
+    formData?: MetadataValueDescriptorEx[];
+    selectedItems?: Array<any>;
+    onClose?: () => void;
+};
+declare const TMCustomButton: (props: TMCustomButtonProps) => import("react/jsx-runtime").JSX.Element | null;
+export default TMCustomButton;

package/lib/components/base/TMCustomButton.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SDK_Globals } from '@topconsultnpm/sdk-ts';
+import { useEffect, useRef, useState } from 'react';
+import TMModal from './TMModal';
+import styled from 'styled-components';
+import { processButtonAttributes } from '../../helper/dcmtsHelper';
+const IframeContainer = styled.div `
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+`;
+const StyledIframe = styled.iframe `
+  border: none;
+  flex: 1;
+`;
+const TMCustomButton = (props) => {
+    const { button, isModal = true, formData, selectedItems, onClose } = props;
+    const { appName: scriptUrl, arguments: args } = button;
+    const iframeRef = useRef(null);
+    const attributes = processButtonAttributes(args, formData);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(false);
+    const getTargetOrigin = (url) => {
+        if (!url)
+            return '*';
+        try {
+            const urlObj = new URL(url);
+            return urlObj.origin;
+        }
+        catch {
+            return '*';
+        }
+    };
+    useEffect(() => {
+        if (iframeRef.current?.contentWindow) {
+            const mergedAttributes = { ...attributes, selectedItems: selectedItems };
+            iframeRef.current.contentWindow.postMessage({
+                "options": mergedAttributes,
+                "selectedItems": selectedItems,
+                "session": SDK_Globals.tmSession
+            }, getTargetOrigin(scriptUrl));
+        }
+        clearTimeout(timeoutIframe);
+    }, [loading, error, scriptUrl, attributes]);
+    const handleLoad = () => setLoading(false);
+    const handleError = () => {
+        setLoading(false);
+        setError(true);
+    };
+    // Timeout di sicurezza nel caso l'evento 'error' non venga chiamato
+    const timeoutIframe = setTimeout(() => {
+        if (loading)
+            handleError();
+    }, 5000); // 5 secondi
+    useEffect(() => {
+        if (!isModal && scriptUrl) {
+            window.open(scriptUrl, '_blank');
+            onClose?.();
+        }
+    }, [isModal, scriptUrl, onClose]);
+    return isModal ? (_jsx(TMModal, { title: button.title, width: '60%', height: '60%', resizable: true, onClose: onClose, children: _jsxs(IframeContainer, { children: [error && _jsx("div", { children: "Si \u00E8 verificato un errore nel caricamento del contenuto." }), !error && _jsx(StyledIframe, { ref: iframeRef, loading: 'lazy', onLoad: handleLoad, onError: handleError, src: scriptUrl })] }) })) : null;
+};
+export default TMCustomButton;

package/lib/components/base/TMFileManagerDataGridView.js

@@ -50,7 +50,8 @@ const TMFileManagerDataGridView = (props) => {
         }
     };
     const cellDefaultRender = useCallback((cellData) => {
-        return renderHighlightedText(cellData.value.toString(), searchText, false);
+        const value = cellData.value ?? '';
+        return renderHighlightedText(value.toString(), searchText, false);
     }, [searchText]);
     const cellNameRender = useCallback((cellData) => {
         const { checkoutDate, checkOutUserID, checkOutUserName, version, ext, creationTime, lastUpdateTime } = cellData.data;
@@ -66,6 +67,8 @@ const TMFileManagerDataGridView = (props) => {
         return _jsx("div", { style: { display: 'flex', justifyContent: 'center', alignItems: 'center' }, children: _jsx(TMDcmtIcon, { tid: item.tid, did: item.did, fileExtension: item.ext, downloadMode: 'openInNewWindow', tooltipContent: tooltipContent }) });
     }, []);
     const cellDatetimeRender = useCallback((cellData) => {
+        if (!cellData.value)
+            return '-';
         return renderHighlightedText(Globalization.getDateTimeDisplayValue(cellData.value).toString(), searchText, false);
     }, [searchText]);
     const cellSizeRender = useCallback((cellData) => {

package/lib/components/base/TMLayout.d.ts

@@ -48,7 +48,8 @@ export interface ITMLayoutContainerProps {
     alignItems?: string;
     direction?: 'vertical' | 'horizontal';
     onClick?: () => void;
+    onContextMenu?: (e: React.MouseEvent) => void;
 }
-declare const TMLayoutContainer: ({ gap, onClick, justifyContent, alignItems, children, direction }: ITMLayoutContainerProps) => import("react/jsx-runtime").JSX.Element;
+declare const TMLayoutContainer: ({ gap, onClick, justifyContent, alignItems, children, direction, onContextMenu }: ITMLayoutContainerProps) => import("react/jsx-runtime").JSX.Element;
 export { TMCard, TMLayoutItem, TMSplitterLayout };
 export default TMLayoutContainer;

package/lib/components/base/TMLayout.js

@@ -193,9 +193,9 @@ const TMSplitterLayout = ({ animation = false, showSeparator = true, separatorCo
 const TMLayoutItem = ({ onClick, children, width = '100%', minWidth, maxWidth, maxHeight, height = '100%', minHeight }) => {
     return (_jsx(StyledLayoutItem, { onClick: onClick, "$height": height, "$maxHeight": maxHeight, "$minHeight": minHeight, "$width": width, "$minWidth": minWidth, "$maxWidth": maxWidth, children: children }));
 };
-const TMLayoutContainer = ({ gap = 3, onClick, justifyContent = 'flex-start', alignItems = 'flex-start', children, direction = 'vertical' }) => {
+const TMLayoutContainer = ({ gap = 3, onClick, justifyContent = 'flex-start', alignItems = 'flex-start', children, direction = 'vertical', onContextMenu }) => {
     const renderedEls = () => { return (React.Children.map(children, child => (child))); };
-    return (_jsxs(StyledLayoutContainer, { "$alignItems": alignItems, "$justifyContent": justifyContent, onClick: onClick, "$direction": direction, style: { gap: gap }, children: [" ", renderedEls(), " "] }));
+    return (_jsxs(StyledLayoutContainer, { "$alignItems": alignItems, "$justifyContent": justifyContent, onClick: onClick, onContextMenu: onContextMenu, "$direction": direction, style: { gap: gap }, children: [" ", renderedEls(), " "] }));
 };
 export { TMCard, TMLayoutItem, TMSplitterLayout };
 export default TMLayoutContainer;

package/lib/components/base/TMPopUp.js

@@ -152,24 +152,11 @@ const ResponsiveMessageText = styled.div `
         line-height: 1.1;
     }
 `;
-const ResponsiveButton = styled(TMButton) `
-    font-size: ${props => props.fontSize || 'clamp(12px, 2vw, 1.1rem)'} !important;
-    padding: clamp(2px, 1vw, 8px) clamp(4px, 2vw, 12px) !important;
-    min-width: clamp(30px, 10vw, 60px) !important;
-    white-space: nowrap !important;
-    
-    @media (max-width: 200px) {
-        padding: 2px 4px !important;
-        min-width: 25px !important;
-        font-size: 8px !important;
-    }
-    
-    @media (max-width: 150px) {
-        padding: 1px 3px !important;
-        min-width: 20px !important;
-        font-size: 7px !important;
-    }
-`;
+// ResponsiveButton wrapper component to avoid circular dependency
+const ResponsiveButton = (props) => {
+    const { fontSize: customFontSize, ...otherProps } = props;
+    return _jsx(TMButton, { fontSize: customFontSize || 'clamp(12px, 2vw, 1.1rem)', padding: "clamp(2px, 1vw, 8px) clamp(4px, 2vw, 12px)", width: "clamp(30px, 10vw, 60px)", ...otherProps });
+};
 const ResponsiveMessageBody = ({ message, isMobile, MessageToolbar, showToppy }) => {
     return (_jsxs(ResponsiveMessageContainer, { children: [_jsxs(ResponsiveMessageContent, { "$isMobile": isMobile, children: [showToppy && _jsx(ResponsiveToppyImage, { "$isMobile": isMobile, src: toppy, alt: "Toppy" }), _jsx(ResponsiveMessageText, { "$isMobile": isMobile, children: typeof message === 'string' ? _jsx(Message, { msg: message }) : message })] }), _jsx(MessageToolbar, {})] }));
 };

package/lib/components/base/TMTreeView.js

@@ -332,15 +332,16 @@ const TMTreeView = ({ dataSource = [], focusedItem, selectedItems = [], allowMul
                                 if (input) {
                                     input.indeterminate = isIndeterminate(node);
                                 }
-                            } })), _jsx("div", { style: { display: 'flex', alignItems: 'center', flex: 1, minHeight: 0 }, onClick: (e) => { handleNodeClick(node, e); }, children: itemRender(node) })] }), node.expanded && node.items && (_jsxs("div", { style: { paddingLeft: 20, width: '100%' }, children: [renderTree(getVisibleItems(node)), needsLoadMoreButton(node) && (_jsx("div", { style: { display: 'flex', justifyContent: 'center', margin: '5px 0' }, children: _jsx(TMButton, { onClick: () => handleLoadMoreItems(node.key), showTooltip: false, caption: `Carica altri ${itemsPerPage}... (${node.visibleItemsCount ?? itemsPerPage} / ${node.items?.length ?? 0})` }) }))] }))] }, node.key)));
+                            } })), _jsx("div", { style: { display: 'flex', alignItems: 'center', flex: 1, minWidth: 0 }, onClick: (e) => { handleNodeClick(node, e); }, children: itemRender(node) })] }), node.expanded && node.items && (_jsxs("div", { style: { paddingLeft: 20, width: '100%' }, children: [renderTree(getVisibleItems(node)), needsLoadMoreButton(node) && (_jsx("div", { style: { display: 'flex', justifyContent: 'center', margin: '5px 0' }, children: _jsx(TMButton, { onClick: () => handleLoadMoreItems(node.key), showTooltip: false, caption: `Carica altri ${itemsPerPage}... (${node.visibleItemsCount ?? itemsPerPage} / ${node.items?.length ?? 0})` }) }))] }))] }, node.key)));
     }, [handleNodeClick, handleNodeToggle, handleCheckboxChange, focusedItem, selectedItems, allowMultipleSelection, getVisibleItems, needsLoadMoreButton, handleLoadMoreItems, itemsPerPage]);
-    return (_jsx("div", { style: { height: '100%', width: '100%', overflowY: 'auto', padding: '0px 5px 2px 2px' }, children: renderTree(dataSource) }));
+    return (_jsx("div", { style: { height: '100%', width: '100%', overflowY: 'auto', overflowX: 'hidden', padding: '0px 5px 2px 2px' }, children: renderTree(dataSource) }));
 };
 export default TMTreeView;
 export const StyledTreeNode = styled.div `
 	display: flex;
 	flex-direction: row;
 	width: 100%;
+	min-width: 0;
 	min-height: 22px;
 	max-height: 30px;
 	gap: 5px;

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

@@ -1,4 +1,5 @@
 import { ValidationItem } from '@topconsultnpm/sdk-ts';
+export declare const sanitizeAndFormatComment: (raw?: string) => string;
 export interface ITMHtmlEditor {
     /** Width of the editor (e.g., '100%', '500px') */
     width?: string;
@@ -28,6 +29,10 @@ export interface ITMHtmlEditor {
     toolbarMode?: 'compact' | 'expanded';
     /** If true, the editor will be focused on mount */
     autoFocus?: boolean;
+    /** Maximum number of characters allowed in the editor */
+    maxLength?: number;
+    /** If true, displays a character count below the editor */
+    showCount?: boolean;
 }
 declare const TMHtmlEditor: (props: ITMHtmlEditor) => import("react/jsx-runtime").JSX.Element;
 export default TMHtmlEditor;

package/lib/components/editors/TMHtmlEditor.js

@@ -4,8 +4,35 @@ import HtmlEditor, { Toolbar, Item } from 'devextreme-react/html-editor';
 import ReactDOM from 'react-dom';
 import { SDKUI_Localizator } from '../../helper';
 import TMVilViewer from '../base/TMVilViewer';
+import { TMMessageBoxManager, ButtonNames } from '../base/TMPopUp';
+import TMTooltip from '../base/TMTooltip';
+import { useDeviceType, DeviceType } from '../base/TMDeviceProvider';
+export const sanitizeAndFormatComment = (raw = "") => {
+    if (!raw)
+        return "";
+    let cleanComment = raw
+        // Simplify dx-mention markup - replace with just @username
+        .replace(/<span class="dx-mention"[^>]*>\uFEFF?<span[^>]*><span>@<\/span>([^<]+)<\/span>\uFEFF?<\/span>/gi, '@$1')
+        // Replace </p> with '' only if followed by <ol> or <ul>
+        .replace(/<\/p>(?=\s*<(ol|ul)>)/gi, '')
+        // Replace all other </p> with '\r\n'
+        .replace(/<\/p>/gi, '\r\n')
+        // Remove all <p> tags
+        .replace(/<p>/gi, '')
+        // Remove all <br> tags
+        .replace(/<br>/gi, '')
+        // Trim whitespace
+        .trim();
+    // Remove dangerous HTML elements
+    cleanComment = cleanComment.replace(/<(script|iframe|embed|object|link|style|img|video|audio|svg|form|input|button|textarea|select|pre|function)[^>]*>/gi, '');
+    return cleanComment;
+};
 const TMHtmlEditor = (props) => {
-    const { width = "100%", height = "100%", initialMarkup = "", mentionsConfig, onValueChanged, validationItems = [], isEditorEnabled: isEditorEnabledProp = false, toolbarMode = 'compact', autoFocus = false } = props;
+    const { width = "100%", height = "100%", initialMarkup = "", mentionsConfig, onValueChanged, validationItems = [], isEditorEnabled: isEditorEnabledProp = false, toolbarMode = 'compact', autoFocus = false, maxLength = 1000, showCount = true, } = props;
+    // Get the current device type (e.g., mobile, tablet, desktop) using a custom hook.
+    const deviceType = useDeviceType();
+    // This avoids unnecessary re-renders by only recalculating when deviceType changes.
+    let isMobile = useMemo(() => { return deviceType === DeviceType.MOBILE; }, [deviceType]);
     // Ref for HtmlEditor instance
     const editorRef = useRef(null);
     // State for editor enable/disable
@@ -14,13 +41,15 @@ const TMHtmlEditor = (props) => {
     const [markup, setMarkup] = useState(initialMarkup);
     // State to track the position (x, y coordinates) where the custom context menu should be displayed.
     const [contextMenuPos, setContextMenuPos] = useState(null);
-    // State to indicate whether a paste operation is currently in progress
-    const [isPasting, setIsPasting] = useState(false);
+    // State to track remaining characters
+    const [charactersRemaining, setCharactersRemaining] = useState(maxLength - initialMarkup.length);
+    useEffect(() => {
+        const cleanedMarkup = sanitizeAndFormatComment(markup);
+        setCharactersRemaining(maxLength - cleanedMarkup.length);
+    }, [markup, maxLength]);
     // Function to read text from the clipboard, format it, and paste into the Quill editor
     const pasteFromClipboard = async () => {
         try {
-            // Set flag to indicate paste operation is in progress
-            setIsPasting(true);
             // Read plain text from the clipboard asynchronously
             let text = await navigator.clipboard.readText();
             text = '<p>' + text.replace(/\r\n/g, '</p><p>') + '</p>';
@@ -52,10 +81,6 @@ const TMHtmlEditor = (props) => {
             // Log any errors that might occur during clipboard access or pasting
             console.warn('Clipboard paste failed:', err);
         }
-        finally {
-            // Reset paste state after a short delay to restore UI state
-            setTimeout(() => setIsPasting(false), 500);
-        }
     };
     useEffect(() => {
         const handleKeyDown = (e) => {
@@ -116,7 +141,7 @@ const TMHtmlEditor = (props) => {
     }, [autoFocus]);
     // Memoized check for validation errors
     const hasValidationErrors = useMemo(() => {
-        return !isPasting && validationItems && validationItems.length > 0;
+        return validationItems && validationItems.length > 0;
     }, [validationItems]);
     // Handler function triggered by the context menu's "Paste" action
     const handlePaste = async () => {
@@ -125,9 +150,44 @@ const TMHtmlEditor = (props) => {
         // Close the custom context menu after pasting
         setContextMenuPos(null);
     };
-    return (_jsxs("div", { style: { height: hasValidationErrors ? `calc(${height} - 30px)` : "100%", width: width }, onContextMenu: handleContextMenu, children: [_jsx("div", { className: "custom-mentions-wrapper", style: { borderWidth: '1px', borderStyle: 'solid', borderColor: hasValidationErrors ? "red" : "#e0e0e0 #e0e0e0 #616161", width: "100%", height: "100%" }, children: _jsx(HtmlEditor, { ref: editorRef, placeholder: SDKUI_Localizator.TypeAMessage + "...", width: "100%", height: "100%", value: markup, onValueChange: onValueChangeCallback, mentions: mentionsConfig, style: { overflow: 'hidden', outline: "none", fontSize: '1rem' }, children: isEditorEnabled && (toolbarMode === 'compact' ?
+    return (_jsxs("div", { style: {
+            height: height,
+            width: width
+        }, children: [_jsx("div", { className: "custom-mentions-wrapper", onContextMenu: handleContextMenu, style: {
+                    borderWidth: '1px',
+                    borderStyle: 'solid',
+                    borderColor: hasValidationErrors ? "red" : "#e0e0e0 #e0e0e0 #616161",
+                    width: "100%",
+                    height: `calc(100% - ${showCount ? 15 : 0}px - ${validationItems.length > 0 ? 15 : 0}px)`,
+                }, children: _jsx(HtmlEditor, { ref: editorRef, placeholder: SDKUI_Localizator.TypeAMessage + "...", width: "100%", height: "100%", value: markup, onValueChange: onValueChangeCallback, mentions: mentionsConfig, style: { overflow: 'hidden', outline: "none", fontSize: '1rem' }, children: isEditorEnabled && (toolbarMode === 'compact' ?
                         _jsxs(Toolbar, { multiline: false, children: [_jsx(Item, { name: "undo" }), _jsx(Item, { name: "redo" }), _jsx(Item, { name: "separator" }), _jsx(Item, { name: "bold" }), _jsx(Item, { name: "italic" }), _jsx(Item, { name: "strike" }), _jsx(Item, { name: "underline" }), _jsx(Item, { name: "separator" }), _jsx(Item, { name: "orderedList" }), _jsx(Item, { name: "bulletList" })] }) :
-                        _jsxs(Toolbar, { children: [_jsx(Item, { name: "undo" }), _jsx(Item, { name: "redo" }), _jsx(Item, { name: "separator" }), _jsx(Item, { name: "separator" }), _jsx(Item, { name: "bold" }), _jsx(Item, { name: "italic" }), _jsx(Item, { name: "strike" }), _jsx(Item, { name: "underline" }), _jsx(Item, { name: "separator" }), _jsx(Item, { name: "alignLeft" }), _jsx(Item, { name: "alignCenter" }), _jsx(Item, { name: "alignRight" }), _jsx(Item, { name: "alignJustify" }), _jsx(Item, { name: "separator" }), _jsx(Item, { name: "color" }), _jsx(Item, { name: "background" }), _jsx(Item, { name: "separator" }), _jsx(Item, { name: "link" }), _jsx(Item, { name: "image" }), _jsx(Item, { name: "separator" })] })) }) }), !isPasting && validationItems.length > 0 && (_jsx("div", { style: { width: "100%", height: "30px" }, children: _jsx(TMVilViewer, { vil: validationItems }) })), contextMenuPos &&
+                        _jsxs(Toolbar, { children: [_jsx(Item, { name: "undo" }), _jsx(Item, { name: "redo" }), _jsx(Item, { name: "separator" }), _jsx(Item, { name: "separator" }), _jsx(Item, { name: "bold" }), _jsx(Item, { name: "italic" }), _jsx(Item, { name: "strike" }), _jsx(Item, { name: "underline" }), _jsx(Item, { name: "separator" }), _jsx(Item, { name: "alignLeft" }), _jsx(Item, { name: "alignCenter" }), _jsx(Item, { name: "alignRight" }), _jsx(Item, { name: "alignJustify" }), _jsx(Item, { name: "separator" }), _jsx(Item, { name: "color" }), _jsx(Item, { name: "background" }), _jsx(Item, { name: "separator" }), _jsx(Item, { name: "link" }), _jsx(Item, { name: "image" }), _jsx(Item, { name: "separator" })] })) }) }), showCount ? ((() => {
+                const cleanedMarkup = sanitizeAndFormatComment(markup);
+                const showInfoIcon = charactersRemaining !== maxLength;
+                return (_jsxs("div", { style: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'flex-end',
+                        fontSize: 12,
+                        color: '#6c757d',
+                        marginTop: 4,
+                        gap: 4,
+                    }, children: [`${Math.max(charactersRemaining, 0)} ${SDKUI_Localizator.CharactersRemaining}`, showInfoIcon && (_jsx(TMTooltip, { content: 'Markup HTML', children: _jsx("span", { className: "dx-icon-codeblock", style: { fontSize: 22, cursor: 'pointer' }, onClick: () => {
+                                    TMMessageBoxManager.show({
+                                        title: 'Markup HTML',
+                                        initialWidth: !isMobile ? '700px' : undefined,
+                                        message: (_jsx("pre", { style: {
+                                                whiteSpace: 'pre-wrap',
+                                                background: '#f5f5f5',
+                                                padding: '12px',
+                                                borderRadius: '6px',
+                                            }, children: cleanedMarkup })),
+                                        resizable: true,
+                                        showToppy: false,
+                                        buttons: [ButtonNames.OK],
+                                    });
+                                } }) }))] }));
+            })()) : null, validationItems.length > 0 && _jsx(TMVilViewer, { vil: validationItems }), contextMenuPos &&
                 ReactDOM.createPortal(_jsxs("div", { style: {
                         position: 'fixed',
                         top: contextMenuPos.y,

package/lib/components/editors/TMMetadataValues.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useEffect, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 import styled from "styled-components";
 import { AccessLevels, DcmtTypeListCacheService, 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";
@@ -10,7 +10,7 @@ import TMTooltip from "../base/TMTooltip";
 import TMCheckBox from "./TMCheckBox";
 import TMMetadataEditor, { useMetadataEditableList } from "./TMMetadataEditor";
 import { FormulaHelper } from "./TMFormulaEditor";
-import { DraftsMIDs } from "../../ts";
+import { DraftsMIDs, DSAttachsMIDs } from "../../ts";
 import { TMNothingToShow } from "../features/documents/TMDcmtPreview";
 import TMAccordion from "../base/TMAccordion";
 export var ShowCheckBoxesMode;
@@ -33,7 +33,7 @@ const TMMetadataValues = ({ showCheckBoxes = ShowCheckBoxesMode.Never, checkPerm
     const [selectedItem, setSelectedItem] = useState(undefined);
     const [prevMetadataValues, setPrevMetadataValues] = useState([]);
     const [inputMidsApplied, setInputMidsApplied] = useState(false);
-    const onChangeHandler = (newValue, mid) => {
+    const onChangeHandler = useCallback((newValue, mid) => {
         let newValues = structuredClone(metadataValues);
         const item = newValues.find(value => value.mid === mid);
         if (item) {
@@ -51,25 +51,25 @@ const TMMetadataValues = ({ showCheckBoxes = ShowCheckBoxesMode.Never, checkPerm
             }
         }
         onValueChanged?.(newValues);
-    };
-    const editorValidationHandler = (mid) => {
+    }, [metadataValues, showCheckBoxes, dynDataListsToBeRefreshed, onValueChanged]);
+    const editorValidationHandler = useCallback((mid) => {
         const md = metadataValues?.find(m => m.mid === mid);
         const validationItem = validationItems.find(vil => vil.PropertyName === md?.md?.nameLoc);
         return validationItem ? [validationItem] : [];
-    };
-    const isEditable = (mid) => {
+    }, [metadataValues, validationItems]);
+    const isEditable = useCallback((mid) => {
         let md = currentDTD?.metadata?.find(o => o.id == mid);
         if (!md)
             return false;
         let isList = md.dataDomain == MetadataDataDomains.DataList || md.dataDomain == MetadataDataDomains.DynamicDataList || md.dataDomain == MetadataDataDomains.UserID;
         return isList && isEditableList(mid);
-    };
-    const handleMetadataValueSelection = (item) => {
+    }, [currentDTD, isEditableList]);
+    const handleMetadataValueSelection = useCallback((item) => {
         if (selectedItem?.mid !== item.mid) {
             setSelectedItem(item);
             onFocusedItemChanged?.(item);
         }
-    };
+    }, [selectedItem, onFocusedItemChanged]);
     useEffect(() => {
         if (!TID) {
             setCurrentDTD(undefined);
@@ -184,7 +184,7 @@ const TMMetadataValues = ({ showCheckBoxes = ShowCheckBoxesMode.Never, checkPerm
         }
         return toBeRefreshed;
     };
-    const getAdvancedMenuItems = (mvd) => {
+    const getAdvancedMenuItems = useCallback((mvd) => {
         let md = mvd.md;
         if (!md)
             return [];
@@ -241,9 +241,9 @@ const TMMetadataValues = ({ showCheckBoxes = ShowCheckBoxesMode.Never, checkPerm
             ...customMenuItems
         ];
         return menu;
-    };
+    }, [checkPerms, isExpertMode, customMenuItems, metadataValues, onAdvancedMenuClick, onValueChanged]);
     // Helper function to render a single metadata item
-    const renderMetadataItem = (item, isReadOnlyOverride = false) => (_jsxs(StyledRow, { style: { marginTop: item.md?.dataType === MetadataDataTypes.DateTime ? '6px' : '0', gap: '8px' }, onClick: () => { handleMetadataValueSelection(item); }, onFocus: () => { handleMetadataValueSelection(item); }, children: [showCheckBoxes !== ShowCheckBoxesMode.Never &&
+    const renderMetadataItem = useCallback((item, isReadOnlyOverride = false) => (_jsxs(StyledRow, { style: { marginTop: item.md?.dataType === MetadataDataTypes.DateTime ? '6px' : '0', gap: '8px' }, onClick: () => { handleMetadataValueSelection(item); }, onFocus: () => { handleMetadataValueSelection(item); }, children: [showCheckBoxes !== ShowCheckBoxesMode.Never &&
                 _jsx(TMCheckBox, { elementStyle: { marginTop: item.md?.dataType === MetadataDataTypes.DateTime ? '14px' : '20px' }, value: item.isSelected, disabled: showCheckBoxes === ShowCheckBoxesMode.AlwaysReadOnly, onValueChanged: (newValue) => {
                         let newValues = structuredClone(metadataValues);
                         const mvd = newValues.find(value => value.mid === item.mid);
@@ -296,8 +296,8 @@ const TMMetadataValues = ({ showCheckBoxes = ShowCheckBoxesMode.Never, checkPerm
                                     mvd.isSelected = !stringIsNullOrEmpty(mvd.value);
                             }
                             onValueChanged?.(newValues);
-                        } }) }), !isReadOnly && _jsx("div", { style: { marginTop: item.md?.dataType === MetadataDataTypes.DateTime ? '12px' : '18px' }, onClick: () => { handleMetadataValueSelection(item); }, children: _jsx(TMDropDownMenu, { backgroundColor: 'white', color: TMColors.button_icon, borderRadius: '3px', content: _jsx(TMButton, { btnStyle: 'icon', icon: _jsx(IconMenuVertical, {}), showTooltip: false }), disabled: item.isLexProt === 1, items: getAdvancedMenuItems(item) }) })] }, item.mid));
-    const layoutWorkItem = () => {
+                        } }) }), !isReadOnly && _jsx("div", { style: { marginTop: item.md?.dataType === MetadataDataTypes.DateTime ? '12px' : '18px' }, onClick: () => { handleMetadataValueSelection(item); }, children: _jsx(TMDropDownMenu, { backgroundColor: 'white', color: TMColors.button_icon, borderRadius: '3px', content: _jsx(TMButton, { btnStyle: 'icon', icon: _jsx(IconMenuVertical, {}), showTooltip: false }), disabled: item.isLexProt === 1, items: getAdvancedMenuItems(item) }) })] }, item.mid)), [TID, showCheckBoxes, showNullValueCheckBoxes, isReadOnly, layoutMode, selectedMID, isOpenDistinctValues, openChooserBySingleClick, dynDataListsToBeRefreshed, metadataValues, metadataValuesOrig, validationItems, onValueChanged, handleMetadataValueSelection, getAdvancedMenuItems, onChangeHandler, editorValidationHandler, isEditable]);
+    const layoutWorkItem = useMemo(() => {
         const workItemData = [];
         const technicalWorkItemData = [];
         const documentData = [];
@@ -328,8 +328,8 @@ const TMMetadataValues = ({ showCheckBoxes = ShowCheckBoxesMode.Never, checkPerm
             }
         });
         return (_jsxs("div", { style: { width: '100%' }, children: [documentData.length > 0 && _jsx(TMAccordion, { title: SDKUI_Localizator.DocumentData, children: documentData.map(item => renderMetadataItem(item)) }), workItemData.length > 0 && _jsx(TMAccordion, { title: SDKUI_Localizator.WorkItemData, children: workItemData.map(item => renderMetadataItem(item, true)) }), technicalWorkItemData.length > 0 && _jsx(TMAccordion, { title: SDKUI_Localizator.WorkItemTechnicalData, defaultCollapsed: true, children: technicalWorkItemData.map(item => renderMetadataItem(item, true)) })] }));
-    };
-    const layoutDraft = () => {
+    }, [metadataValues, showCheckBoxes, showNullValueCheckBoxes, isReadOnly, dynDataListsToBeRefreshed, validationItems, selectedMID, isOpenDistinctValues, openChooserBySingleClick, metadataValuesOrig]);
+    const layoutDraft = useMemo(() => {
         // Definiamo l'ordine desiderato per gli elementi
         const desiredDraftOrder = [
             DraftsMIDs.Name,
@@ -384,36 +384,73 @@ const TMMetadataValues = ({ showCheckBoxes = ShowCheckBoxesMode.Never, checkPerm
                 checkOutData.push(tempCICODataMap[id]);
             }
         });
-        return (_jsxs("div", { style: { width: '100%' }, children: [draftData.length > 0 && _jsx(TMAccordion, { title: SDKUI_Localizator.Draft, children: draftData.map(item => renderMetadataItem(item)) }), checkOutData.length > 0 && _jsx(TMAccordion, { title: `${SDKUI_Localizator.CheckIn}/${SDKUI_Localizator.CheckOut}`, children: checkOutData.map(item => renderMetadataItem(item, true)) })] }));
-    };
-    const layoutCustom = () => {
+        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 layoutDsAttachs = useMemo(() => {
+        const dsAttachsData = [];
+        metadataValues.forEach(item => {
+            switch (item.md?.id) {
+                // case DSAttachsMIDs.DSID:
+                case DSAttachsMIDs.Name:
+                case DSAttachsMIDs.Description:
+                    dsAttachsData.push(item);
+                    break;
+                default:
+                    break;
+            }
+        });
+        return (_jsx("div", { style: { width: '100%' }, children: dsAttachsData.length > 0 && _jsx(TMAccordion, { title: SDKUI_Localizator.Attachment, children: dsAttachsData.map(item => renderMetadataItem(item, isReadOnly)) }) }));
+    }, [metadataValues, showCheckBoxes, showNullValueCheckBoxes, isReadOnly, dynDataListsToBeRefreshed, validationItems, selectedMID, isOpenDistinctValues, openChooserBySingleClick, metadataValuesOrig]);
+    const layoutCustom = useMemo(() => {
         if (!layout || !layout.items || layout.items.length === 0) {
             return metadataValues.map((item) => renderMetadataItem(item));
         }
-        // Build a map of items by ID for quick lookup
+        // Build a map of items by ID for quick lookup (include negative/zero IDs)
         const itemsById = new Map();
         layout.items.forEach(item => {
-            if (item.layoutItemID) {
+            if (item.layoutItemID !== undefined && item.layoutItemID !== null) {
                 itemsById.set(item.layoutItemID, item);
             }
         });
-        // Find root items (items without parent or parent === 0)
-        const rootItems = layout.items.filter(item => !item.parentID || item.parentID === 0);
-        // Recursive function to get children of an item
+        // Determine root items. Prefer explicit LayoutRoot items if present;
+        // otherwise fall back to items with no parent (parentID undefined or -1).
+        const hasExplicitRoot = layout.items.some(item => item.type === LayoutItemTypes.LayoutRoot);
+        const rootItems = hasExplicitRoot
+            ? layout.items.filter(item => item.type === LayoutItemTypes.LayoutRoot)
+            : layout.items.filter(item => item.parentID === undefined || item.parentID === -1);
+        // Recursive function to get children of an item. Handle parentID === -1 and undefined
+        // because some layouts use -1 for root while children use undefined.
         const getChildren = (parentID) => {
+            if (parentID === -1) {
+                return layout.items?.filter(item => item.parentID === -1 || item.parentID === undefined) || [];
+            }
+            if (parentID === undefined) {
+                return layout.items?.filter(item => item.parentID === undefined) || [];
+            }
             return layout.items?.filter(item => item.parentID === parentID) || [];
         };
         // Recursive function to render layout items with depth tracking for indentation
-        const renderLayoutItem = (layoutItem, depth = 0) => {
+        // Prevent infinite recursion by tracking visited layoutItemIDs (handles malformed layouts where an item
+        // may reference itself as a child or cycles exist).
+        const renderLayoutItem = (layoutItem, depth = 0, visited = new Set()) => {
+            const id = layoutItem.layoutItemID ?? 0;
+            if (visited.has(id))
+                return null;
+            visited.add(id);
+            // Check if this is a LayoutRoot - just render its children
+            if (layoutItem.type === LayoutItemTypes.LayoutRoot) {
+                const children = getChildren(layoutItem.layoutItemID);
+                return (_jsx(React.Fragment, { children: children.map(child => renderLayoutItem(child, depth, visited)) }, `root-${layoutItem.layoutItemID}`));
+            }
             // Check if this is a LayoutGroup
-            if (layoutItem.type === LayoutItemTypes.LayoutGroup && layoutItem.lgd) {
-                const children = getChildren(layoutItem.layoutItemID ?? 0);
+            else if (layoutItem.type === LayoutItemTypes.LayoutGroup && layoutItem.lgd) {
+                const children = getChildren(layoutItem.layoutItemID);
                 const groupDescriptor = layoutItem.lgd;
                 const groupTitle = groupDescriptor.caption || `Group ${layoutItem.layoutItemID}`;
                 const isCollapsed = false; // LayoutGroupDescriptor doesn't have collapsed property
                 // Apply indentation only to subgroups (depth > 0), not to root groups
                 const indentationPx = depth > 0 ? depth * 10 : 0;
-                return (_jsx("div", { style: { paddingLeft: `${indentationPx}px` }, children: _jsx(TMAccordion, { title: groupTitle, defaultCollapsed: isCollapsed, children: children.map(child => renderLayoutItem(child, depth + 1)) }) }, `group-wrapper-${layoutItem.layoutItemID}`));
+                return (_jsx("div", { style: { paddingLeft: `${indentationPx}px` }, children: _jsx(TMAccordion, { title: groupTitle, defaultCollapsed: isCollapsed, children: children.map(child => renderLayoutItem(child, depth + 1, visited)) }) }, `group-wrapper-${layoutItem.layoutItemID}`));
             }
             // Check if this is a LayoutControlItem (metadata field)
             else if (layoutItem.type === LayoutItemTypes.LayoutControlItem && layoutItem.lcid) {
@@ -425,8 +462,9 @@ const TMMetadataValues = ({ showCheckBoxes = ShowCheckBoxesMode.Never, checkPerm
                 const metadataItem = metadataValues.find(m => m.mid === mid);
                 if (!metadataItem)
                     return null;
-                // No indentation for control items - they maintain their original styling
-                return (_jsx(React.Fragment, { children: renderMetadataItem(metadataItem) }, `control-${layoutItem.layoutItemID}`));
+                // Indent control items based on depth so they align under groups
+                const controlIndentPx = depth > 0 ? depth * 10 : 15;
+                return (_jsx("div", { style: { paddingLeft: `${controlIndentPx}px` }, children: renderMetadataItem(metadataItem) }, `control-${layoutItem.layoutItemID}`));
             }
             // Check if this is a SeparatorItem (horizontal line)
             else if (layoutItem.type === LayoutItemTypes.SeparatorItem) {
@@ -434,27 +472,39 @@ const TMMetadataValues = ({ showCheckBoxes = ShowCheckBoxesMode.Never, checkPerm
             }
             return null;
         };
-        return (_jsx("div", { style: { width: '100%' }, children: rootItems.map(item => renderLayoutItem(item, 0)) }));
-    };
-    const renderForm = () => {
+        return (_jsx("div", { style: { width: '100%' }, children: (() => {
+                const visited = new Set();
+                return rootItems.map(item => renderLayoutItem(item, 0, visited));
+            })() }));
+    }, [layout, metadataValues, showCheckBoxes, showNullValueCheckBoxes, isReadOnly, dynDataListsToBeRefreshed, validationItems, selectedMID, isOpenDistinctValues, openChooserBySingleClick, metadataValuesOrig]);
+    const renderForm = useMemo(() => {
+        // Se currentDTD non è ancora stato caricato, non renderizzare nulla
+        if (!currentDTD) {
+            return null;
+        }
+        // Se tutti i metadata sono di sistema, renderizziamo tutti in sola lettura senza layout
+        const allSystem = metadataValues.length > 0 && metadataValues.every(item => item.md?.isSystem === 1);
+        if (allSystem) {
+            return metadataValues.map((item) => renderMetadataItem(item, true));
+        }
         if (currentDTD?.templateTID === TemplateTIDs.WF_WIApprView && !isReadOnly) {
-            return layoutWorkItem();
+            return layoutWorkItem;
         }
         switch (currentDTD?.id) {
-            case SystemTIDs.Drafts: return !isReadOnly ? layoutDraft() : metadataValues.map((item) => renderMetadataItem(item));
+            case SystemTIDs.Drafts: return layoutDraft;
             // case SystemTIDs.Chronology: break;
-            // case SystemTIDs.DSAttachs: break;
+            case SystemTIDs.DSAttachs: return layoutDsAttachs;
             default:
                 // Se è presente un layout personalizzato, usalo, altrimenti usa il rendering standard
                 if (layout && layout.items && layout.items.length > 0) {
-                    return layoutCustom();
+                    return layoutCustom;
                 }
                 return metadataValues.map((item) => renderMetadataItem(item));
         }
-    };
+    }, [currentDTD, metadataValues, layout, isReadOnly, showCheckBoxes, showNullValueCheckBoxes, dynDataListsToBeRefreshed, validationItems, selectedMID, isOpenDistinctValues, openChooserBySingleClick, metadataValuesOrig]);
     return (_jsx(StyledMetadataValuesContainer, { children: !TID ?
             _jsx(TMNothingToShow, { text: `${SDKUI_Localizator.NoDcmtSelected}.`, secondText: `${SDKUI_Localizator.MetadataSystem} - ${SDKUI_Localizator.NotAvailable}`, icon: _jsx(IconDcmtTypeSys, { fontSize: 96 }) }) :
-            _jsx(_Fragment, { children: renderForm() }) }));
+            _jsx(_Fragment, { children: renderForm }) }));
 };
 export default TMMetadataValues;
 //#region  Styled Components