@topconsultnpm/sdkui-react 6.20.0-dev1.57 → 6.20.0-dev1.59

package/lib/components/NewComponents/ContextMenu/TMContextMenu.js

@@ -61,18 +61,20 @@ const TMContextMenu = ({ items, trigger = 'right', children, target, externalCon
             const touch = touchEvent.touches[0];
             let state = touchStateMap.get(element);
             if (!state) {
-                state = { timeout: null, startX: 0, startY: 0 };
+                state = { timeout: null, startX: 0, startY: 0, longPressTriggered: false };
                 touchStateMap.set(element, state);
             }
             state.startX = touch.clientX;
             state.startY = touch.clientY;
+            state.longPressTriggered = false;
             if (state.timeout)
                 clearTimeout(state.timeout);
             state.timeout = setTimeout(() => {
+                if (state)
+                    state.longPressTriggered = true;
                 // Haptic feedback
                 if ('vibrate' in navigator)
                     navigator.vibrate(50);
-                // Dispatch synthetic contextmenu event to trigger existing onContextMenu handlers
                 const syntheticEvent = new MouseEvent('contextmenu', {
                     bubbles: true,
                     cancelable: true,
@@ -106,6 +108,17 @@ const TMContextMenu = ({ items, trigger = 'right', children, target, externalCon
                 state.timeout = null;
             }
         };
+        // Prevent click event after long-press was triggered
+        const handleClick = (e) => {
+            const element = e.currentTarget;
+            const state = touchStateMap.get(element);
+            if (state?.longPressTriggered) {
+                e.preventDefault();
+                e.stopPropagation();
+                e.stopImmediatePropagation();
+                state.longPressTriggered = false;
+            }
+        };
         // Attach listeners to all matching elements
         elements.forEach(element => {
             const el = element;
@@ -117,6 +130,7 @@ const TMContextMenu = ({ items, trigger = 'right', children, target, externalCon
             el.addEventListener('touchmove', handleTouchMove, { passive: true });
             el.addEventListener('touchend', handleTouchEnd);
             el.addEventListener('touchcancel', handleTouchEnd);
+            el.addEventListener('click', handleClick, { capture: true });
         });
         return () => {
             elements.forEach(element => {
@@ -128,6 +142,7 @@ const TMContextMenu = ({ items, trigger = 'right', children, target, externalCon
                 el.removeEventListener('touchmove', handleTouchMove);
                 el.removeEventListener('touchend', handleTouchEnd);
                 el.removeEventListener('touchcancel', handleTouchEnd);
+                el.removeEventListener('click', handleClick, { capture: true });
             });
         };
     }, [target, isIOS]);
@@ -369,6 +384,7 @@ const TMContextMenu = ({ items, trigger = 'right', children, target, externalCon
                 e.stopPropagation();
                 // if (item.disabled) return;
                 item.onRightIconClick?.();
+                handleClose();
             };
             return (_jsxs(S.MenuItem, { "$disabled": item.disabled, "$hasSubmenu": !!item.submenu && item.submenu.length > 0, "$beginGroup": item.beginGroup, onMouseDown: handleClick, onMouseEnter: (e) => !isMobile && handleMouseEnter(item, e, depth + 1), onMouseLeave: () => !isMobile && handleMouseLeave(depth + 1), title: item.tooltip, children: [_jsxs(S.MenuItemContent, { children: [item.icon && _jsx(S.IconWrapper, { children: item.icon }), _jsx(S.MenuItemName, { children: item.name })] }), item.rightIcon && item.onRightIconClick && (_jsx(S.RightIconButton, { onClick: handleRightIconClick, onMouseDown: (e) => e.stopPropagation(), "aria-label": `Action for ${item.name}`, children: item.rightIcon })), item.submenu && item.submenu.length > 0 && (_jsx(S.SubmenuIndicator, { "$isMobile": isMobile, children: isMobile ? '›' : '▸' }))] }, itemKey));
         });

package/lib/components/NewComponents/FloatingMenuBar/TMFloatingMenuBar.js

@@ -4,7 +4,8 @@ import { ContextMenu } from '../ContextMenu';
 import ShowAlert from '../../base/TMAlert';
 import TMTooltip from '../../base/TMTooltip';
 import * as S from './styles';
-import { IconAdd, IconApply, IconMenuVertical, IconPin, IconUndo, SDKUI_Globals, SDKUI_Localizator } from '../../../helper';
+import { IconAdd, IconApply, IconMenuVertical, IconPin, IconSeparator, IconUndo, SDKUI_Globals, SDKUI_Localizator } from '../../../helper';
+const Separator = (props) => (_jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", height: "1em", width: "1em", ...props, children: _jsx("path", { d: "M12 2v20", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round" }) }));
 const IconDraggableDots = (props) => (_jsx("svg", { fontSize: 18, viewBox: "0 0 24 24", fill: "currentColor", height: "1em", width: "1em", ...props, children: _jsx("path", { d: "M9 3a2 2 0 11-4 0 2 2 0 014 0zm0 9a2 2 0 11-4 0 2 2 0 014 0zm0 9a2 2 0 11-4 0 2 2 0 014 0zm10-18a2 2 0 11-4 0 2 2 0 014 0zm0 9a2 2 0 11-4 0 2 2 0 014 0zm0 9a2 2 0 11-4 0 2 2 0 014 0z" }) }));
 const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained = false, defaultPosition = { x: 100, y: 100 }, maxItems = 100, }) => {
     const percentToPixels = (percent, containerSize) => {
@@ -77,7 +78,9 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
             const validItemIds = Array.isArray(settings.itemIds) ? settings.itemIds : [];
             if (validItemIds.length > 0) {
                 // Check if any ID looks like the old format (contains language-specific text or is too long)
-                const hasOldFormatIds = validItemIds.some(id => typeof id === 'string' && (id.length > 20 || id.includes(' ')));
+                const hasOldFormatIds = validItemIds.some(id => typeof id === 'string' &&
+                    !id.startsWith('separator-') &&
+                    (id.length > 20 || id.includes(' ')));
                 if (hasOldFormatIds) {
                     console.warn('FloatingMenuBar: Detected old name-based configuration, resetting to defaults');
                     resetFloatingBarSettings();
@@ -193,11 +196,22 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
     }, [state.items]);
     // Restore items on mount from savedItemIds
     useEffect(() => {
-        if (contextMenuItems.length > 0) {
+        if (contextMenuItems.length > 0 || initialConfig.savedItemIds.length > 0) {
             const flatItems = flattenMenuItems(contextMenuItems);
             // Restore items in the saved order from localStorage
             const restoredItems = initialConfig.savedItemIds
-                .map((id) => flatItems.find(item => item.id === id))
+                .map((id) => {
+                if (id.startsWith('separator-')) {
+                    return {
+                        id,
+                        name: 'Separator',
+                        icon: _jsx(Separator, {}),
+                        onClick: () => { },
+                        isSeparator: true,
+                    };
+                }
+                return flatItems.find(item => item.id === id);
+            })
                 .filter((item) => item !== undefined);
             if (restoredItems.length > 0) {
                 setState(s => ({ ...s, items: restoredItems }));
@@ -250,6 +264,39 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
             onClick: foundItem?.onClick
         };
     }, [contextMenuItems]);
+    // Remove trailing separators from items array
+    const removeTrailingSeparators = useCallback((items) => {
+        const result = [...items];
+        while (result.length > 0 && result.at(-1)?.isSeparator) {
+            result.pop();
+        }
+        return result;
+    }, []);
+    // Create a new separator item
+    const createSeparator = useCallback(() => {
+        const separatorId = `separator-${Date.now()}-${Math.random().toString(36).substring(2, 11)}`;
+        return {
+            id: separatorId,
+            name: 'Separator',
+            icon: _jsx(Separator, {}),
+            onClick: () => { },
+            isSeparator: true,
+        };
+    }, []);
+    // Add separator to items
+    const addSeparator = useCallback(() => {
+        if (state.items.length >= maxItems) {
+            ShowAlert({
+                mode: 'warning',
+                title: 'Limite Massimo Raggiunto',
+                message: `Hai raggiunto il massimo di ${maxItems} elementi. Rimuovine uno prima di aggiungerne altri.`,
+                duration: 4000,
+            });
+            return;
+        }
+        const separator = createSeparator();
+        setState(s => ({ ...s, items: [...s.items, separator] }));
+    }, [state.items.length, maxItems, createSeparator]);
     const getPinContextMenuItems = useCallback(() => {
         const flatItems = flattenMenuItems(contextMenuItems);
         const currentItemIds = new Set(state.items.map(i => i.id));
@@ -273,8 +320,17 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
                 return pinItem;
             });
         };
-        return createPinItems(contextMenuItems);
-    }, [contextMenuItems, flattenMenuItems, togglePin, state.items]);
+        const pinItems = createPinItems(contextMenuItems);
+        // Add separator option at the end
+        pinItems.push({
+            id: 'add-separator',
+            name: SDKUI_Localizator.Add + ' separatore',
+            icon: _jsx(IconSeparator, {}),
+            onClick: addSeparator,
+            beginGroup: true
+        });
+        return pinItems;
+    }, [contextMenuItems, flattenMenuItems, togglePin, state.items, addSeparator]);
     const getContextMenuItemsWithPinIcons = useCallback(() => {
         const flatItems = flattenMenuItems(contextMenuItems);
         const currentItemIds = new Set(state.items.map(i => i.id));
@@ -470,9 +526,10 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
                 return { ...s, isConfigMode: true };
             }
             else {
-                // Exiting edit mode (applying changes) - clear snapshot
+                // Exiting edit mode (applying changes) - clean up trailing separators and clear snapshot
                 stateSnapshot.current = null;
-                return { ...s, isConfigMode: false };
+                const cleanedItems = removeTrailingSeparators(s.items);
+                return { ...s, isConfigMode: false, items: cleanedItems };
             }
         });
     };
@@ -480,54 +537,52 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
     useEffect(() => {
         if (!state.isConfigMode || !floatingRef.current)
             return;
+        // Use double requestAnimationFrame to ensure the DOM has fully updated with new buttons
         requestAnimationFrame(() => {
-            if (!floatingRef.current)
-                return;
-            const floating = floatingRef.current.getBoundingClientRect();
-            let newX = state.position.x;
-            let newY = state.position.y;
-            let needsUpdate = false;
-            if (isConstrained && containerRef.current) {
-                const container = containerRef.current.getBoundingClientRect();
-                if (state.orientation === 'horizontal') {
-                    if (state.position.x + floating.width > container.width) {
-                        newX = Math.max(0, container.width - floating.width);
-                        needsUpdate = true;
-                    }
+            requestAnimationFrame(() => {
+                if (!floatingRef.current)
+                    return;
+                const floating = floatingRef.current.getBoundingClientRect();
+                const containerWidth = isConstrained && containerRef.current
+                    ? containerRef.current.getBoundingClientRect().width
+                    : window.innerWidth;
+                const containerHeight = isConstrained && containerRef.current
+                    ? containerRef.current.getBoundingClientRect().height
+                    : window.innerHeight;
+                // Use current pixel position
+                let newPixelX = pixelPosition.x;
+                let newPixelY = pixelPosition.y;
+                let needsUpdate = false;
+                // Check horizontal overflow
+                if (newPixelX + floating.width > containerWidth) {
+                    newPixelX = Math.max(0, containerWidth - floating.width);
+                    needsUpdate = true;
                 }
-                else {
-                    if (state.position.y + floating.height > container.height) {
-                        newY = Math.max(0, container.height - floating.height);
-                        needsUpdate = true;
-                    }
+                // Check vertical overflow
+                if (newPixelY + floating.height > containerHeight) {
+                    newPixelY = Math.max(0, containerHeight - floating.height);
+                    needsUpdate = true;
                 }
-            }
-            else {
-                if (state.orientation === 'horizontal') {
-                    if (state.position.x + floating.width > window.innerWidth) {
-                        newX = Math.max(0, window.innerWidth - floating.width - 10);
-                        needsUpdate = true;
+                if (needsUpdate) {
+                    // Update pixel position immediately
+                    setPixelPosition({ x: newPixelX, y: newPixelY });
+                    // Convert to percentage for state
+                    const newPercentagePosition = {
+                        x: pixelsToPercent(newPixelX, containerWidth),
+                        y: pixelsToPercent(newPixelY, containerHeight),
+                    };
+                    setState(s => ({
+                        ...s,
+                        position: newPercentagePosition,
+                    }));
+                    // Update snapshot position to the corrected position so Undo restores to visible position
+                    if (stateSnapshot.current) {
+                        stateSnapshot.current.position = newPercentagePosition;
                     }
                 }
-                else {
-                    if (state.position.y + floating.height > window.innerHeight) {
-                        newY = Math.max(0, window.innerHeight - floating.height - 10);
-                        needsUpdate = true;
-                    }
-                }
-            }
-            if (needsUpdate) {
-                setState(s => ({
-                    ...s,
-                    position: { x: newX, y: newY },
-                }));
-                // Update snapshot position to the corrected position so Undo restores to visible position
-                if (stateSnapshot.current) {
-                    stateSnapshot.current.position = { x: newX, y: newY };
-                }
-            }
+            });
         });
-    }, [state.isConfigMode, state.orientation, isConstrained]);
+    }, [state.isConfigMode, state.orientation, isConstrained, state.items, pixelPosition.x, pixelPosition.y]);
     const handleUndo = () => {
         if (stateSnapshot.current) {
             setState(s => ({
@@ -670,6 +725,10 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
                                 onClick: toggleOrientation,
                             },
                         ], trigger: "right", children: _jsx(S.GripHandle, { "$orientation": state.orientation, onMouseDown: handleMouseDown, onTouchStart: handleTouchStart, onDoubleClick: handleGripDoubleClick, children: _jsx(IconDraggableDots, {}) }) })) : (_jsx(S.GripHandle, { "$orientation": state.orientation, onMouseDown: handleMouseDown, onTouchStart: handleTouchStart, onDoubleClick: handleGripDoubleClick, children: _jsx(IconDraggableDots, {}) })), _jsx(S.Separator, { "$orientation": state.orientation }), state.items.map((item, index) => {
+                        // Handle separator items
+                        if (item.isSeparator) {
+                            return (_jsxs(S.DraggableItem, { "$isDragging": state.draggedItemIndex === index, "$isDragOver": dragOverIndex === index && state.draggedItemIndex !== index, draggable: state.isConfigMode, onDragStart: (e) => handleDragStart(e, index), onDragEnter: (e) => handleDragEnter(e, index), onDragOver: handleDragOver, onDragLeave: (e) => handleDragLeave(e, index), onDrop: (e) => handleDrop(e, index), onDragEnd: handleDragEnd, children: [_jsx(S.ItemSeparator, { "$orientation": state.orientation, "$isConfigMode": state.isConfigMode }), state.isConfigMode && (_jsx(S.RemoveButton, { onClick: () => removeItem(item.id), children: "\u00D7" }))] }, item.id));
+                        }
                         // Get current state (disabled and onClick) from contextMenuItems
                         const currentState = getCurrentItemState(item.id);
                         const isDisabled = currentState.disabled || false;

package/lib/components/NewComponents/FloatingMenuBar/styles.d.ts

@@ -24,6 +24,10 @@ export declare const GripHandle: import("styled-components/dist/types").IStyledC
 export declare const Separator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $orientation: "horizontal" | "vertical";
 }>> & string;
+export declare const ItemSeparator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $orientation: "horizontal" | "vertical";
+    $isConfigMode: boolean;
+}>> & string;
 export declare const MenuButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
     $isActive?: boolean;
 }>> & string;

package/lib/components/NewComponents/FloatingMenuBar/styles.js

@@ -102,6 +102,45 @@ export const Separator = styled.div `
   margin: ${props => props.$orientation === 'horizontal' ? '0 4px' : '4px 0'};
   flex-shrink: 0;
 `;
+export const ItemSeparator = styled.div `
+  flex-shrink: 0;
+  transition: all 0.2s ease;
+  
+  ${props => props.$isConfigMode ? `
+    /* Edit mode: look exactly like MenuButton */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 34px;
+    height: 34px;
+    background: transparent;
+    border-radius: 8px;
+    cursor: grab;
+    position: relative;
+    
+    &::before {
+      content: '';
+      background: rgba(255, 255, 255, 0.25);
+      width: ${props.$orientation === 'horizontal' ? '2px' : '100%'};
+      height: ${props.$orientation === 'horizontal' ? '20px' : '2px'};
+      border-radius: 1px;
+    }
+    
+    &:hover {
+      background: rgba(255, 255, 255, 0.2);
+    }
+    
+    &:active {
+      opacity: 0.8;
+    }
+  ` : `
+    /* Normal mode: simple line with tight spacing */
+    background: rgba(255, 255, 255, 0.25);
+    width: ${props.$orientation === 'horizontal' ? '1px' : '100%'};
+    height: ${props.$orientation === 'horizontal' ? '24px' : '1px'};
+    margin: ${props.$orientation === 'horizontal' ? '0 2px' : '2px 0'};
+  `}
+`;
 export const MenuButton = styled.button `
   display: flex;
   align-items: center;

package/lib/components/NewComponents/FloatingMenuBar/types.d.ts

@@ -6,6 +6,7 @@ export interface TMFloatingMenuItem {
     onClick: () => void;
     disabled?: boolean;
     isPinned?: boolean;
+    isSeparator?: boolean;
 }
 export interface TMFloatingMenuBarProps {
     containerRef: React.RefObject<HTMLElement | null>;

package/lib/components/base/TMDataGrid.js

@@ -320,7 +320,7 @@ const TMDataGrid = React.forwardRef((props, ref) => {
                     // other properties
                     disabled: disabled, autoNavigateToFocusedRow: autoNavigateToFocusedRow, focusedRowKey: focusedRowKey, columnHidingEnabled: columnHidingEnabled, columnResizingMode: columnResizingMode, columnAutoWidth: columnAutoWidth, allowColumnResizing: allowColumnResizing, allowColumnReordering: allowColumnReordering, showBorders: showBorders, showRowLines: showRowLines, showColumnLines: showColumnLines, showColumnHeaders: showColumnHeaders, rowAlternationEnabled: rowAlternationEnabled, wordWrapEnabled: wordWrapEnabled, noDataText: noDataText, 
                     // styles
-                    width: width, height: height, style: { userSelect: 'none' }, children: [dataColumns.map((column, index) => (_jsx(Column, { ...column }, column.caption + index.toString()))), sorting && _jsx(Sorting, { ...sorting }), selection && _jsx(Selection, { ...selection }), scrolling && _jsx(Scrolling, { ...scrolling }), summary && _jsx(Summary, { ...summary }), showHeaderFilter && _jsx(HeaderFilter, { visible: true, ...headerFilter }), rowDragging && _jsx(RowDragging, { ...rowDragging }), filterRow && _jsx(FilterRow, { ...filterRow }), showFilterPanel && _jsx(FilterPanel, { visible: true }), showHeaderColumnChooser && _jsxs(ColumnChooser, { height: "400px", enabled: !showHeaderColumnChooser, mode: "select", children: [_jsx(Position, { my: "center", at: "center", of: window }), _jsx(ColumnChooserSearch, { enabled: true }), _jsx(ColumnChooserSelection, { allowSelectAll: false, selectByClick: true, recursive: true })] }), stateStoring && _jsx(StateStoring, { ...stateStoring }), groupPanel && _jsx(GroupPanel, { ...groupPanel }), _jsx(Grouping, { contextMenuEnabled: true, ...grouping }), _jsx(LoadPanel, { enabled: showLoadPanel }), _jsx(SearchPanel, { visible: showSearchPanel, searchVisibleColumnsOnly: true, highlightSearchText: true }), editing && _jsx(Editing, { ...editing }), paging && _jsx(Paging, { ...paging }), pager && _jsx(Pager, { ...pager, visible: totalRecordCount > pageSize }), masterDetail && _jsx(MasterDetail, { ...masterDetail })] }) }), counterConfig.show && _jsx("div", { style: { width: "100%", height: "25px", display: "flex", alignItems: "center", gap: "15px", backgroundColor: "#e0e0e0" }, children: _jsx(TMCounterContainer, { items: counterValues, bgColorContainer: counterConfig.bgColorContainer, bgColorItem: counterConfig.bgColorItem, hoverColorItem: counterConfig.hoverColorItem, textColorItem: counterConfig.textColorItem }) }), customContextMenuItems && (_jsx(TMContextMenu, { items: processCustomContextMenuItems(customContextMenuItems, customContextMenuRowKey), externalControl: {
+                    width: width, height: height, style: { userSelect: 'none' }, children: [dataColumns.map((column, index) => (_jsx(Column, { ...column }, column.caption + index.toString()))), sorting && _jsx(Sorting, { ...sorting }), selection && _jsx(Selection, { ...selection }), scrolling && _jsx(Scrolling, { ...scrolling }), summary && _jsx(Summary, { ...summary }), showHeaderFilter && _jsx(HeaderFilter, { visible: true, ...headerFilter }), rowDragging && _jsx(RowDragging, { ...rowDragging }), filterRow && _jsx(FilterRow, { ...filterRow }), showFilterPanel && _jsx(FilterPanel, { visible: true }), showHeaderColumnChooser && _jsxs(ColumnChooser, { height: "400px", enabled: !showHeaderColumnChooser, mode: "select", children: [_jsx(Position, { my: "center", at: "center", of: window }), _jsx(ColumnChooserSearch, { enabled: true }), _jsx(ColumnChooserSelection, { allowSelectAll: false, selectByClick: true, recursive: true })] }), stateStoring && _jsx(StateStoring, { ...stateStoring }), groupPanel && _jsx(GroupPanel, { ...groupPanel }), _jsx(Grouping, { contextMenuEnabled: true, ...grouping }), _jsx(LoadPanel, { enabled: showLoadPanel }), _jsx(SearchPanel, { visible: showSearchPanel, searchVisibleColumnsOnly: true, highlightSearchText: true }), editing && _jsx(Editing, { ...editing }), paging && _jsx(Paging, { ...paging }), pager && _jsx(Pager, { ...pager, visible: totalRecordCount > pageSize }), masterDetail && _jsx(MasterDetail, { ...masterDetail })] }) }), counterConfig.show && _jsx("div", { style: { width: "100%", height: "25px", display: "flex", alignItems: "center", gap: "15px", backgroundColor: "#e0e0e0" }, children: _jsx(TMCounterContainer, { items: counterValues, bgColorContainer: counterConfig.bgColorContainer, bgColorItem: counterConfig.bgColorItem, hoverColorItem: counterConfig.hoverColorItem, textColorItem: counterConfig.textColorItem }) }), customContextMenuItems && (_jsx(TMContextMenu, { target: ".dx-data-row", items: processCustomContextMenuItems(customContextMenuItems, customContextMenuRowKey), externalControl: {
                     visible: customContextMenuVisible,
                     position: customContextMenuPosition,
                     onClose: () => setCustomContextMenuVisible(false)

package/lib/components/features/documents/TMDcmtPreview.js

@@ -145,8 +145,8 @@ export const TMFileViewer = ({ fileBlob, isResizingActive }) => {
             setFormattedXml(undefined);
             const fileName = fileBlob.name || '';
             const fileExtension = fileName.split('.').pop()?.toLowerCase() || '';
-            const isConfigFile = ['config', 'cfg'].includes(fileExtension);
-            if (fileBlob.type.includes("xml") && !isConfigFile) {
+            const isTextBasedFile = ['config', 'cfg', 'sql'].includes(fileExtension);
+            if (fileBlob.type.includes("xml") && !isTextBasedFile) {
                 fileBlob.text().then((text) => {
                     const parser = new DOMParser();
                     const xmlDoc = parser.parseFromString(text, "application/xml");
@@ -165,7 +165,7 @@ export const TMFileViewer = ({ fileBlob, isResizingActive }) => {
                 });
                 setBlobUrl(undefined);
             }
-            else if (isConfigFile) {
+            else if (isTextBasedFile) {
                 fileBlob.text().then((text) => {
                     const escapedText = text
                         .replace(/&/g, "&")

package/lib/components/features/search/TMSignatureInfoContent.js

@@ -92,7 +92,25 @@ const TMSignatureInfoContent = (props) => {
     if (!signerInfo) {
         return null;
     }
-    return (_jsxs("div", { style: { lineHeight: "1.5em", overflowY: "auto", maxHeight: "500px", paddingRight: "8px", boxSizing: "border-box", userSelect: 'text' }, children: [signerInfo.shA256 && (_jsxs("div", { style: {
+    return (_jsxs("div", { style: { lineHeight: "1.5em", overflowY: "auto", maxHeight: "500px", paddingRight: "8px", boxSizing: "border-box", userSelect: 'text' }, children: [signerInfo.signers && signerInfo.signers.length > 0 ? (_jsxs("div", { children: [_jsxs("h4", { style: { margin: '0 0 12px 0', color: '#0078d4', fontSize: '16px' }, children: ["Firme digitali (", signerInfo.signers.length, ")"] }), signerInfo.signers.map((signer, idx) => (_jsxs("div", { style: {
+                            border: "1px solid #d0d0d0",
+                            borderRadius: "8px",
+                            padding: "16px",
+                            marginBottom: "12px",
+                            background: "linear-gradient(135deg, #ffffff 0%, #f9f9f9 100%)",
+                            boxShadow: "0 2px 4px rgba(0,0,0,0.08)",
+                            userSelect: 'text',
+                        }, children: [_jsxs("h3", { style: { margin: "0 0 12px", color: "#0078d4", fontSize: '15px', fontWeight: '600' }, children: ["Firma ", signer.levelAndIndex] }), _jsxs("div", { style: {
+                                    display: 'grid',
+                                    gap: '10px',
+                                    fontSize: '13px'
+                                }, children: [_jsxs("div", { children: [_jsx("strong", { style: { color: '#555' }, children: "Intestatario:" }), _jsx("div", { style: { marginTop: '4px', color: '#333' }, children: signer.info1 ?? '-' })] }), _jsxs("div", { children: [_jsx("strong", { style: { color: '#555' }, children: "Riferimento temporale:" }), _jsx("div", { style: { marginTop: '4px', color: '#333' }, children: signer.info2 ?? '-' })] }), _jsxs("div", { children: [_jsx("strong", { style: { color: '#555' }, children: "Dettagli:" }), _jsx("div", { style: { marginTop: '4px', color: '#333' }, children: signer.info3 ?? '-' })] })] })] }, idx)))] })) : (_jsx("div", { style: {
+                    padding: '20px',
+                    textAlign: 'center',
+                    color: '#666',
+                    background: '#f5f5f5',
+                    borderRadius: '8px'
+                }, children: "Nessuna firma trovata" })), signerInfo.shA256 && (_jsxs("div", { style: {
                     marginBottom: '12px',
                     padding: '16px',
                     background: '#f5f5f5',
@@ -117,24 +135,6 @@ const TMSignatureInfoContent = (props) => {
                                             gap: '4px',
                                             transition: 'all 0.2s ease',
                                             color: copiedHash ? '#155724' : '#666'
-                                        }, title: "Copia", children: [_jsx(IconCopy, { width: 16, height: 16 }), copiedHash && _jsx("span", { style: { fontSize: '11px' }, children: "Copiato" })] })] }), _jsx("div", { style: { color: '#333' }, children: getHashValue() })] })] })), signerInfo.signers && signerInfo.signers.length > 0 ? (_jsxs("div", { children: [_jsxs("h4", { style: { margin: '0 0 12px 0', color: '#0078d4', fontSize: '16px' }, children: ["Firme digitali (", signerInfo.signers.length, ")"] }), signerInfo.signers.map((signer, idx) => (_jsxs("div", { style: {
-                            border: "1px solid #d0d0d0",
-                            borderRadius: "8px",
-                            padding: "16px",
-                            marginBottom: "12px",
-                            background: "linear-gradient(135deg, #ffffff 0%, #f9f9f9 100%)",
-                            boxShadow: "0 2px 4px rgba(0,0,0,0.08)",
-                            userSelect: 'text',
-                        }, children: [_jsxs("h3", { style: { margin: "0 0 12px", color: "#0078d4", fontSize: '15px', fontWeight: '600' }, children: ["Firma ", signer.levelAndIndex] }), _jsxs("div", { style: {
-                                    display: 'grid',
-                                    gap: '10px',
-                                    fontSize: '13px'
-                                }, children: [_jsxs("div", { children: [_jsx("strong", { style: { color: '#555' }, children: "Intestatario:" }), _jsx("div", { style: { marginTop: '4px', color: '#333' }, children: signer.info1 ?? '-' })] }), _jsxs("div", { children: [_jsx("strong", { style: { color: '#555' }, children: "Riferimento temporale:" }), _jsx("div", { style: { marginTop: '4px', color: '#333' }, children: signer.info2 ?? '-' })] }), _jsxs("div", { children: [_jsx("strong", { style: { color: '#555' }, children: "Dettagli:" }), _jsx("div", { style: { marginTop: '4px', color: '#333' }, children: signer.info3 ?? '-' })] })] })] }, idx)))] })) : (_jsx("div", { style: {
-                    padding: '20px',
-                    textAlign: 'center',
-                    color: '#666',
-                    background: '#f5f5f5',
-                    borderRadius: '8px'
-                }, children: "Nessuna firma trovata" }))] }));
+                                        }, title: "Copia", children: [_jsx(IconCopy, { width: 16, height: 16 }), copiedHash && _jsx("span", { style: { fontSize: '11px' }, children: "Copiato" })] })] }), _jsx("div", { style: { color: '#333' }, children: getHashValue() })] })] }))] }));
 };
 export default TMSignatureInfoContent;

package/lib/helper/TMIcons.d.ts

@@ -276,4 +276,5 @@ export declare function IconCtrlWorkflow(props: React.SVGProps<SVGSVGElement>):
 export declare function IconBackhandIndexPointingRight(props: Readonly<React.SVGProps<SVGSVGElement>>): import("react/jsx-runtime").JSX.Element;
 export declare function IconMoveToFolder(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
 export declare function IconCustom(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
+export declare function IconSeparator(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
 export { Icon123, IconABC, IconAccessPoint, IconAddressBook, IconSignCert, IconServerService, IconActivity, IconActivityLog, IconAdd, IconAddCircleOutline, IconAll, IconApply, IconApplyAndClose, IconArchive, IconArchiveDoc, IconArrowDown, IconArrowLeft, IconArrowRight, IconArrowUp, IconAtSign, IconAttachment, IconAutoConfig, IconBackward, IconBasket, IconBoard, IconBoxArchiveIn, IconBxInfo, IconBxLock, IconCalendar, IconCloseCircle, IconCloseOutline, IconCloud, IconCircleInfo, IconClear, IconColumns, IconCommand, IconCopy, IconCount, IconCrown, IconDashboard, IconDcmtType, IconDcmtTypeOnlyMetadata, IconDcmtTypeSys, IconDelete, IconDetails, IconDown, IconDownload, IconDotsVerticalCircleOutline, IconDuplicate, IconEdit, IconEqual, IconEqualNot, IconEraser, IconExpandRight, IconExport, IconFastBackward, IconFoldeAdd, IconFolderSearch, IconFolderZip, IconFastForward, IconFastSearch, IconFileDots, IconFilter, IconForceStop, IconForward, IconFreeze, IconFreeSearch, IconGreaterThan, IconGreaterThanOrEqual, IconHistory, IconImport, IconTag, IconInfo, IconInsertAbove, IconInsertBelow, IconHeart, IconHide, IconLanguage, IconLeft, IconLessThan, IconLessThanOrEqual, IconLock, IconLockClosed, IconLogin, IconLink, IconLogout, IconMail, IconMapping, IconMic, IconMenuHorizontal, IconMenuKebab, IconMenuVertical, IconMetadata, IconMetadata_Computed, IconMetadata_DataList, IconMetadata_Date, IconMetadata_DynamicDataList, IconMetadata_Numerator, IconMetadata_Numeric, IconMetadata_Special, IconMetadata_Text, IconMetadata_User, IconMonitor, IconOpenInNew, IconNotification, IconPassword, IconPencil, IconPlatform, IconPlay, IconPreview, IconPrinter, IconPrintOutline, IconProcess, IconProgressAbortRequested, IconProgressCompleted, IconProgressNotCompleted, IconProgressReady, IconProgressRunning, IconProgressStarted, IconRefresh, IconReset, IconRecentlyViewed, IconRight, IconSave, IconSearch, IconSelected, IconSettings, IconShow, IconSort, IconStop, IconStopwatch, IconSuccess, IconAlarmPlus, IconHourglass, IconNone, IconNotStarted, IconProgress, IconSuccessCirlce, IconSuitcase, IconSupport, IconUndo, IconUnFreeze, IconUp, IconUpdate, IconUpload, IconUser, IconUserProfile, IconVisible, IconWarning, IconWeb, IconWifi, IconWindowMaximize, IconWindowMinimize, IconWorkflow, IconWorkspace, IconUserGroup, IconUserGroupOutline, IconUserLevelMember, IconUserLevelAdministrator, IconUserLevelSystemAdministrator, IconUserLevelAutonomousAdministrator, IconDraggabledots, IconRelation, IconEasy, IconSum, IconDisk, IconDataList, IconPalette, IconFormatPageSplit, IconPaste, IconFileSearch, IconStar, IconStarRemove, IconSearchCheck, IconLightningFill, IconArrowUnsorted, IconArrowSortedUp, IconArrowSortedDown, IconConvertFilePdf, IconExportTo, IconSharedDcmt, IconShare, IconBatchUpdate, IconCheckFile, IconStatistics, IconSubstFile, IconAdvanced, IconSync, IconSavedQuery, IconSignature, IconSignaturePencil, IconRecursiveOps, IconCheckIn, IconTree, IconGrid, IconList, IconFolder, IconFolderOpen, IconFactory, IconTest, IconCheck, IconUncheck, IconSortAsc, IconSortDesc, IconRoundFileUpload, IconSortAscLetters, IconSortDescLetters, IconRotate, IconSortAscNumbers, IconSortDescNumbers, IconSortAscClock, IconSortDescClock, IconLayerGroup, IconBell, IconBellCheck, IconBellOutline, IconBellCheckOutline, IconEnvelopeOpenText, IconChangeUser, IconUserCheck, IconRelationManyToMany, IconRelationOneToMany, IconUserExpired, IconKey, IconZoomInLinear, IconZoomOutLinear, IconMenuCAWorkingGroups, IconCADossier, IconMenuCACaseflow, IconMenuDashboard, IconMenuCAAreas, IconMenuTask, IconMenuSearch, IconMenuFullTextSearch, IconMenuFavourite, IconSAPLogin, IconSAPLogin2, IconView, IconNewSignature };

package/lib/helper/TMIcons.js

@@ -690,4 +690,7 @@ export function IconMoveToFolder(props) {
 export function IconCustom(props) {
     return (_jsx("svg", { fontSize: props.fontSize ?? FONTSIZE, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "1em", height: "1em", ...props, children: _jsx("path", { fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeMiterlimit: "10", strokeWidth: "1.5", d: "M14 17h6m-3 3v-6M5.6 4h2.8A1.6 1.6 0 0 1 10 5.6v2.8A1.6 1.6 0 0 1 8.4 10H5.6A1.6 1.6 0 0 1 4 8.4V5.6A1.6 1.6 0 0 1 5.6 4m0 10h2.8a1.6 1.6 0 0 1 1.6 1.6v2.8A1.6 1.6 0 0 1 8.4 20H5.6A1.6 1.6 0 0 1 4 18.4v-2.8A1.6 1.6 0 0 1 5.6 14m10-10h2.8A1.6 1.6 0 0 1 20 5.6v2.8a1.6 1.6 0 0 1-1.6 1.6h-2.8A1.6 1.6 0 0 1 14 8.4V5.6A1.6 1.6 0 0 1 15.6 4" }) }));
 }
+export function IconSeparator(props) {
+    return (_jsx("svg", { fontSize: props.fontSize ?? FONTSIZE, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "1em", height: "1em", style: { transform: 'rotate(90deg)', ...props.style }, ...props, children: _jsxs("g", { fill: "currentColor", children: [_jsx("path", { d: "M16 5a1 1 0 1 0 0-2H8a1 1 0 1 0 0 2zm0 2a1 1 0 1 1 0 2H8a1 1 0 1 1 0-2zm1 5a1 1 0 0 1-1 1H8a1 1 0 1 1 0-2h8a1 1 0 0 1 1 1m-1 9a1 1 0 1 0 0-2H8a1 1 0 1 0 0 2z", opacity: ".5" }), _jsx("path", { fillRule: "evenodd", d: "M21 16a1 1 0 0 1-1 1H4a1 1 0 1 1 0-2h16a1 1 0 0 1 1 1", clipRule: "evenodd" })] }) }));
+}
 export { Icon123, IconABC, IconAccessPoint, IconAddressBook, IconSignCert, IconServerService, IconActivity, IconActivityLog, IconAdd, IconAddCircleOutline, IconAll, IconApply, IconApplyAndClose, IconArchive, IconArchiveDoc, IconArrowDown, IconArrowLeft, IconArrowRight, IconArrowUp, IconAtSign, IconAttachment, IconAutoConfig, IconBackward, IconBasket, IconBoard, IconBoxArchiveIn, IconBxInfo, IconBxLock, IconCalendar, IconCloseCircle, IconCloseOutline, IconCloud, IconCircleInfo, IconClear, IconColumns, IconCommand, IconCopy, IconCount, IconCrown, IconDashboard, IconDcmtType, IconDcmtTypeOnlyMetadata, IconDcmtTypeSys, IconDelete, IconDetails, IconDown, IconDownload, IconDotsVerticalCircleOutline, IconDuplicate, IconEdit, IconEqual, IconEqualNot, IconEraser, IconExpandRight, IconExport, IconFastBackward, IconFoldeAdd, IconFolderSearch, IconFolderZip, IconFastForward, IconFastSearch, IconFileDots, IconFilter, IconForceStop, IconForward, IconFreeze, IconFreeSearch, IconGreaterThan, IconGreaterThanOrEqual, IconHistory, IconImport, IconTag, IconInfo, IconInsertAbove, IconInsertBelow, IconHeart, IconHide, IconLanguage, IconLeft, IconLessThan, IconLessThanOrEqual, IconLock, IconLockClosed, IconLogin, IconLink, IconLogout, IconMail, IconMapping, IconMic, IconMenuHorizontal, IconMenuKebab, IconMenuVertical, IconMetadata, IconMetadata_Computed, IconMetadata_DataList, IconMetadata_Date, IconMetadata_DynamicDataList, IconMetadata_Numerator, IconMetadata_Numeric, IconMetadata_Special, IconMetadata_Text, IconMetadata_User, IconMonitor, IconOpenInNew, IconNotification, IconPassword, IconPencil, IconPlatform, IconPlay, IconPreview, IconPrinter, IconPrintOutline, IconProcess, IconProgressAbortRequested, IconProgressCompleted, IconProgressNotCompleted, IconProgressReady, IconProgressRunning, IconProgressStarted, IconRefresh, IconReset, IconRecentlyViewed, IconRight, IconSave, IconSearch, IconSelected, IconSettings, IconShow, IconSort, IconStop, IconStopwatch, IconSuccess, IconAlarmPlus, IconHourglass, IconNone, IconNotStarted, IconProgress, IconSuccessCirlce, IconSuitcase, IconSupport, IconUndo, IconUnFreeze, IconUp, IconUpdate, IconUpload, IconUser, IconUserProfile, IconVisible, IconWarning, IconWeb, IconWifi, IconWindowMaximize, IconWindowMinimize, IconWorkflow, IconWorkspace, IconUserGroup, IconUserGroupOutline, IconUserLevelMember, IconUserLevelAdministrator, IconUserLevelSystemAdministrator, IconUserLevelAutonomousAdministrator, IconDraggabledots, IconRelation, IconEasy, IconSum, IconDisk, IconDataList, IconPalette, IconFormatPageSplit, IconPaste, IconFileSearch, IconStar, IconStarRemove, IconSearchCheck, IconLightningFill, IconArrowUnsorted, IconArrowSortedUp, IconArrowSortedDown, IconConvertFilePdf, IconExportTo, IconSharedDcmt, IconShare, IconBatchUpdate, IconCheckFile, IconStatistics, IconSubstFile, IconAdvanced, IconSync, IconSavedQuery, IconSignature, IconSignaturePencil, IconRecursiveOps, IconCheckIn, IconTree, IconGrid, IconList, IconFolder, IconFolderOpen, IconFactory, IconTest, IconCheck, IconUncheck, IconSortAsc, IconSortDesc, IconRoundFileUpload, IconSortAscLetters, IconSortDescLetters, IconRotate, IconSortAscNumbers, IconSortDescNumbers, IconSortAscClock, IconSortDescClock, IconLayerGroup, IconBell, IconBellCheck, IconBellOutline, IconBellCheckOutline, IconEnvelopeOpenText, IconChangeUser, IconUserCheck, IconRelationManyToMany, IconRelationOneToMany, IconUserExpired, IconKey, IconZoomInLinear, IconZoomOutLinear, IconMenuCAWorkingGroups, IconCADossier, IconMenuCACaseflow, IconMenuDashboard, IconMenuCAAreas, IconMenuTask, IconMenuSearch, IconMenuFullTextSearch, IconMenuFavourite, IconSAPLogin, IconSAPLogin2, IconView, IconNewSignature };

package/lib/helper/helpers.js

@@ -505,7 +505,8 @@ export const extensionHandler = (fileExt) => {
         case 'txt': return FileExtensionHandler.READY_TO_SHOW;
         case 'config':
         case 'cfg':
-        case 'json': return FileExtensionHandler.READY_TO_SHOW;
+        case 'json':
+        case 'sql': return FileExtensionHandler.READY_TO_SHOW;
         default: return FileExtensionHandler.NONE;
     }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@topconsultnpm/sdkui-react",
-  "version": "6.20.0-dev1.57",
+  "version": "6.20.0-dev1.59",
   "description": "",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
@@ -40,7 +40,7 @@
     "lib"
   ],
   "dependencies": {
-    "@topconsultnpm/sdk-ts": "6.20.0-dev1.3",
+    "@topconsultnpm/sdk-ts": "6.20.0-dev1.4",
     "buffer": "^6.0.3",
     "devextreme": "25.1.7",
     "devextreme-react": "25.1.7",