@topconsultnpm/sdkui-react 6.20.0-dev1.3 → 6.20.0-dev1.31

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

@@ -55,7 +55,7 @@ export const FloatingContainer = styled.div.attrs(props => ({
   transition: none;
 
   &:hover {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    background: linear-gradient(135deg, #0071BC 0%, #1B1464 100%);
     border: 1px solid #667eea;
     box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3),
                 0 6px 16px rgba(0, 0, 0, 0.2);
@@ -98,6 +98,13 @@ export const GripHandle = styled.div `
     height: 14px;
   }
 `;
+export const Separator = styled.div `
+  background: rgba(255, 255, 255, 0.25);
+  width: ${props => props.$orientation === 'horizontal' ? '1px' : '100%'};
+  height: ${props => props.$orientation === 'horizontal' ? '24px' : '1px'};
+  margin: ${props => props.$orientation === 'horizontal' ? '0 4px' : '4px 0'};
+  flex-shrink: 0;
+`;
 export const MenuButton = styled.button `
   display: flex;
   align-items: center;
@@ -110,23 +117,21 @@ export const MenuButton = styled.button `
   color: white;
   font-size: 16px;
   cursor: pointer;
-  transition: all 0.2s ease;
+  transition: background 0.2s ease;
   position: relative;
 
   &:hover:not(:disabled) {
     background: rgba(255, 255, 255, 0.2);
-    transform: scale(1.1);
   }
 
   &:active:not(:disabled) {
-    transform: scale(0.95);
+    opacity: 0.8;
   }
 
   &:disabled {
-    opacity: 0.3;
+    opacity: 0.5;
     cursor: not-allowed;
-    background: rgba(255, 255, 255, 0.05);
-    color: rgba(255, 255, 255, 0.4);
+    color: rgba(255, 255, 255, 0.6);
   }
 
   svg {
@@ -138,8 +143,8 @@ export const ConfigButton = styled.button `
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 34px;
-  height: 34px;
+  width: 28px;
+  height: 28px;
   background: ${props => props.$isActive
     ? 'rgba(0, 0, 0, 0.2)'
     : 'rgba(0, 0, 0, 0.1)'};
@@ -148,9 +153,9 @@ export const ConfigButton = styled.button `
     : 'rgba(255, 255, 255, 0.15)'};
   border-radius: 8px;
   color: white;
-  font-size: 16px;
+  font-size: 14px;
   cursor: pointer;
-  transition: all 0.2s ease;
+  transition: background 0.2s ease, border-color 0.2s ease;
   position: relative;
 
   &:hover {
@@ -158,16 +163,20 @@ export const ConfigButton = styled.button `
     ? 'rgba(0, 0, 0, 0.25)'
     : 'rgba(0, 0, 0, 0.15)'};
     border-color: rgba(255, 255, 255, 0.35);
-    transform: scale(1.05);
   }
 
   &:active {
-    transform: scale(0.95);
+    opacity: 0.8;
   }
 
   svg {
-    width: 20px;
-    height: 20px;
+    width: 16px;
+    height: 16px;
+  }
+`;
+export const ContextMenuButton = styled(MenuButton) `
+  svg {
+    transform: translateY(0);
   }
 `;
 export const RemoveButton = styled.button `
@@ -177,25 +186,26 @@ export const RemoveButton = styled.button `
   width: 20px;
   height: 20px;
   background: #ef4444;
-  border: 2px solid white;
+  border: none;
   border-radius: 50%;
   color: white;
-  font-size: 12px;
+  font-size: 14px;
   font-weight: bold;
+  line-height: 1;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
+  padding: 0;
   transition: all 0.2s ease;
   z-index: 1;
 
   &:hover {
     background: #dc2626;
-    transform: scale(1.15);
   }
 
   &:active {
-    transform: scale(0.9);
+    background: #b91c1c;
   }
 `;
 export const OrientationToggle = styled.button `

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

@@ -11,7 +11,6 @@ export interface TMFloatingMenuItem {
 export interface TMFloatingMenuBarProps {
     containerRef: React.RefObject<HTMLElement | null>;
     contextMenuItems?: TMContextMenuItemProps[];
-    storageKey?: string;
     isConstrained?: boolean;
     defaultPosition?: Position;
     maxItems?: number;

package/lib/components/base/TMAccordion.js

@@ -47,12 +47,12 @@ const StyledGroupTemplate = styled.div `
     &::after {
         content: '';
         display: block;
-        width: 90%;
+        width: calc(100% - 35px);
         margin: 0 auto;
         border-bottom: 1px solid #00A99D;
         margin-top: 8px;
         position: absolute;
-        left: 5%;
+        left: 35px;
         bottom: 0;
     }
 `;

package/lib/components/base/TMCustomButton.js

@@ -4,31 +4,68 @@ import TMModal from './TMModal';
 import styled from 'styled-components';
 import { SDKUI_Localizator, TMLayoutWaitingContainer } from '../..';
 import { getButtonAttributes, getSelectedItem } from '../../helper/dcmtsHelper';
+import { DeviceType, useDeviceType } from './TMDeviceProvider';
 const IframeContainer = styled.div `
   display: flex;
   height: 100%;
   flex-direction: column;
-  padding-left: 15px;
+  position: relative;
 `;
 const StyledIframe = styled.iframe `
   border: none;
   flex: 1;
 `;
+const LoadingOverlay = styled.div `
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(128, 128, 128, 0.3);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+
+  &::after {
+    content: '';
+    width: 40px;
+    height: 40px;
+    border: 4px solid rgba(255, 255, 255, 0.3);
+    border-top-color: #fff;
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+  }
+
+  @keyframes spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+`;
 const TMCustomButton = (props) => {
     const { button, isModal = true, formData, selectedItems, onClose } = props;
     const { appName: scriptUrl, arguments: args } = button;
+    const Device = useDeviceType();
     const iframeRef = useRef(null);
     const attributes = useMemo(() => getButtonAttributes(args, formData, selectedItems), [args, formData, selectedItems]);
     const RunOnce = button.mode === "RunOnce";
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(false);
-    const selectedItemsCount = selectedItems?.length || 0;
+    const itemsToProcess = useMemo(() => selectedItems && selectedItems.length > 0 ? selectedItems : [attributes], [selectedItems, attributes]);
     // Stati per il wait panel
-    const [showWaitPanel, setShowWaitPanel] = useState(selectedItemsCount > 0 && !RunOnce);
-    const [waitPanelText, setWaitPanelText] = useState(SDKUI_Localizator.CustomButtonActions.replaceParams(1, selectedItemsCount));
+    const [showWaitPanel, setShowWaitPanel] = useState(itemsToProcess.length > 0 && !RunOnce);
+    const [waitPanelText, setWaitPanelText] = useState(SDKUI_Localizator.CustomButtonActions.replaceParams(1, itemsToProcess.length));
     const [waitPanelValue, setWaitPanelValue] = useState(0);
-    const [waitPanelMaxValue, setWaitPanelMaxValue] = useState(selectedItemsCount);
+    const [waitPanelMaxValue, setWaitPanelMaxValue] = useState(itemsToProcess.length);
     const [abortController, setAbortController] = useState(undefined);
+    // Aggiungi timestamp all'URL per evitare cache
+    const iframeUrl = useMemo(() => {
+        if (!scriptUrl)
+            return '';
+        const separator = scriptUrl.includes('?') ? '&' : '?';
+        return `${scriptUrl}${separator}t=${Date.now()}`;
+    }, [scriptUrl]);
     const targetOrigin = useMemo(() => {
         if (!scriptUrl)
             return '*';
@@ -41,26 +78,35 @@ const TMCustomButton = (props) => {
         }
     }, [scriptUrl]);
     const handleLoad = () => setLoading(false);
+    const isMobile = Device === DeviceType.MOBILE;
     const handleError = () => {
         setLoading(false);
         setError(true);
     };
     const executeSequentially = async (controller) => {
-        if (!selectedItems)
+        if (!itemsToProcess)
             return;
-        for (const [index, item] of selectedItems.entries()) {
+        for (const [index, item] of itemsToProcess.entries()) {
             if (controller.signal.aborted)
                 break;
-            setWaitPanelText(SDKUI_Localizator.CustomButtonActions.replaceParams(index + 1, selectedItemsCount));
+            setWaitPanelText(SDKUI_Localizator.CustomButtonActions.replaceParams(index + 1, itemsToProcess.length));
             setWaitPanelValue(index);
             // Attendi che l'iframe sia pronto e invia il messaggio
             await new Promise((resolve) => {
                 const checkIframe = setInterval(() => {
                     if (iframeRef.current?.contentWindow) {
                         clearInterval(checkIframe);
-                        //devo convertire item in formData
-                        const processedItem = getSelectedItem(args, formData, item);
-                        postMessageIframe(processedItem);
+                        if (selectedItems && selectedItems.length > 0) {
+                            //devo convertire item in formData
+                            const processedItem = getSelectedItem(args, formData, item);
+                            postMessageIframe(processedItem);
+                        }
+                        else {
+                            postMessageIframe(item);
+                        }
+                        //imposta 100% se sono all'ultimo item
+                        if (index === itemsToProcess.length - 1)
+                            setWaitPanelValue(index + 1);
                         // Attendi prima di passare al prossimo
                         setTimeout(() => {
                             setWaitPanelValue(index + 1);
@@ -82,8 +128,7 @@ const TMCustomButton = (props) => {
     useEffect(() => {
         if (loading || error)
             return;
-        //if(error) clearTimeout(timeoutIframe);
-        if (!RunOnce && selectedItemsCount > 0) {
+        if (!RunOnce && itemsToProcess.length > 0) {
             // esegui per ogni item selezionato
             const controller = new AbortController();
             controller.signal.addEventListener('abort', () => {
@@ -91,7 +136,7 @@ const TMCustomButton = (props) => {
                 onClose?.();
             });
             setAbortController(controller);
-            setWaitPanelMaxValue(selectedItemsCount);
+            setWaitPanelMaxValue(itemsToProcess.length);
             executeSequentially(controller);
         }
         else {
@@ -103,7 +148,6 @@ const TMCustomButton = (props) => {
                     onClose?.();
                 }, 2000);
             }
-            //clearTimeout(timeoutIframe);
         }
     }, [loading, error, RunOnce]);
     useEffect(() => {
@@ -112,7 +156,7 @@ const TMCustomButton = (props) => {
             onClose?.();
         }
     }, []);
-    const iframeContent = (_jsxs(IframeContainer, { style: !RunOnce ? { visibility: 'hidden' } : {}, 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 })] }));
-    return isModal && RunOnce ? (_jsx(TMModal, { title: button.title, width: '60%', height: '70%', resizable: true, expandable: true, onClose: onClose, children: iframeContent })) : !RunOnce && (_jsxs(_Fragment, { children: [_jsx(TMLayoutWaitingContainer, { showWaitPanel: showWaitPanel, waitPanelTitle: SDKUI_Localizator.CustomButtonAction, showWaitPanelPrimary: true, waitPanelTextPrimary: waitPanelText, waitPanelValuePrimary: waitPanelValue, waitPanelMaxValuePrimary: waitPanelMaxValue, showWaitPanelSecondary: false, isCancelable: true, abortController: abortController, children: undefined }), iframeContent] }));
+    const iframeContent = (_jsxs(IframeContainer, { style: !RunOnce ? { visibility: 'hidden' } : {}, children: [loading && _jsx(LoadingOverlay, {}), 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: iframeUrl })] }));
+    return isModal && RunOnce ? (_jsx(TMModal, { title: button.title, width: isMobile ? '95%' : '60%', height: isMobile ? '95%' : '70%', resizable: isMobile ? false : true, expandable: isMobile ? false : true, onClose: onClose, children: iframeContent })) : !RunOnce && (_jsxs(_Fragment, { children: [_jsx(TMLayoutWaitingContainer, { showWaitPanel: showWaitPanel, waitPanelTitle: SDKUI_Localizator.CustomButtonAction, showWaitPanelPrimary: true, waitPanelTextPrimary: waitPanelText, waitPanelValuePrimary: waitPanelValue, waitPanelMaxValuePrimary: waitPanelMaxValue, showWaitPanelSecondary: false, isCancelable: true, abortController: abortController, children: undefined }), iframeContent] }));
 };
 export default TMCustomButton;

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

@@ -2,6 +2,7 @@ import React from 'react';
 import { IColumnProps, IDataGridOptions, IMasterDetailProps } from 'devextreme-react/data-grid';
 import dxDataGrid from 'devextreme/ui/data_grid';
 import { ITMCounterContainerProps } from './TMCounterContainer';
+import { TMContextMenuItemProps } from '../NewComponents/ContextMenu/types';
 export interface TMDataGridContextMenuItem {
     text: string;
     icon: string;
@@ -39,8 +40,8 @@ export interface TMDataGridProps<T> extends IDataGridOptions {
     showFilterPanel?: boolean;
     /** Show the load panel */
     showLoadPanel?: boolean;
-    /** Show the column chooser */
-    showColumnChooser?: boolean;
+    /** Show the header column chooser in context menu */
+    showHeaderColumnChooser?: boolean;
     /** Show the search panel */
     showSearchPanel?: boolean;
     /** Show the group panel */
@@ -51,6 +52,8 @@ export interface TMDataGridProps<T> extends IDataGridOptions {
     masterDetail?: IMasterDetailProps;
     /** On Has Filters Change */
     onHasFiltersChange?: (hasFilters: boolean) => void;
+    /** Custom context menu items - when provided, replaces DevExtreme's native context menu with TMContextMenu */
+    customContextMenuItems?: TMContextMenuItemProps[];
 }
 declare const TMDataGrid: React.ForwardRefExoticComponent<TMDataGridProps<unknown> & React.RefAttributes<dxDataGrid<any, any>>>;
 export default TMDataGrid;

package/lib/components/base/TMDataGrid.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
-import DataGrid, { Column, HeaderFilter, Selection, Scrolling, LoadPanel, SearchPanel, Pager, Sorting, Paging, FilterPanel, ColumnChooser, Grouping, GroupPanel, Summary, Editing, FilterRow, StateStoring, RowDragging, MasterDetail } from 'devextreme-react/data-grid';
+import DataGrid, { Column, HeaderFilter, Selection, Scrolling, LoadPanel, SearchPanel, Pager, Sorting, Paging, FilterPanel, ColumnChooser, Grouping, GroupPanel, Summary, Editing, FilterRow, StateStoring, RowDragging, MasterDetail, Position, ColumnChooserSearch, ColumnChooserSelection } from 'devextreme-react/data-grid';
 import DataSource from 'devextreme/data/data_source';
 import { IconAll, IconSelected, IconVisible, SDKUI_Globals, SDKUI_Localizator } from '../../helper';
 import TMCounterContainer, { CounterItemKey } from './TMCounterContainer';
+import TMContextMenu from '../NewComponents/ContextMenu/TMContextMenu';
 ;
 export var TMDataGridPageSize;
 (function (TMDataGridPageSize) {
@@ -16,9 +17,9 @@ const TMDataGrid = React.forwardRef((props, ref) => {
     // main properties
     keyExpr = 'id', dataSource, focusedRowEnabled = true, hoverStateEnabled = true, focusedRowKey, selectedRowKeys = [], 
     // custom options
-    dataColumns = [], pageSize = TMDataGridPageSize.Large, showHeaderFilter = true, showFilterPanel = true, showLoadPanel = true, showSearchPanel = true, searchPanelToolbarPosition = 'before', searchPanelFocusStarting = false, counterConfig = { show: false, items: new Map() }, onHasFiltersChange, 
+    dataColumns = [], pageSize = TMDataGridPageSize.Large, showHeaderFilter = true, showFilterPanel = true, showHeaderColumnChooser = false, showLoadPanel = true, showSearchPanel = true, searchPanelToolbarPosition = 'before', searchPanelFocusStarting = false, counterConfig = { show: false, items: new Map() }, onHasFiltersChange, customContextMenuItems, 
     // events and callbacks
-    onSelectionChanged, onFocusedRowChanged, onRowDblClick, onRowClick, onCellClick, onCellDblClick, onOptionChanged, onContentReady, onContextMenuPreparing, onInitialized, onEditorPreparing, onCellPrepared, onRowPrepared, onRowUpdating, onRowExpanded, onRowCollapsed, onRowUpdated, onSaved, onEditCanceled, onEditingStart, onEditingChange, customizeColumns, onKeyDown, scrolling = { mode: 'standard', useNative: SDKUI_Globals.userSettings?.themeSettings.gridSettings.useNativeScrollbar === 1 }, paging = { enabled: true, pageSize: pageSize }, pager = { visible: true, showInfo: true, showNavigationButtons: true }, selection = { mode: 'multiple', showCheckBoxesMode: "always", selectAllMode: "allPages" }, sorting, summary, stateStoring, columnChooser, grouping, groupPanel, filterRow, headerFilter, editing, rowDragging, masterDetail, 
+    onSelectionChanged, onFocusedRowChanged, onRowDblClick, onRowClick, onCellClick, onCellDblClick, onOptionChanged, onContentReady, onContextMenuPreparing, onInitialized, onEditorPreparing, onCellPrepared, onRowPrepared, onRowUpdating, onRowExpanded, onRowCollapsed, onRowUpdated, onSaved, onEditCanceled, onEditingStart, onEditingChange, customizeColumns, onKeyDown, scrolling = { mode: 'standard', useNative: SDKUI_Globals.userSettings?.themeSettings.gridSettings.useNativeScrollbar === 1 }, paging = { enabled: true, pageSize: pageSize }, pager = { visible: true, showInfo: true, showNavigationButtons: true }, selection = { mode: 'multiple', showCheckBoxesMode: "always", selectAllMode: "allPages" }, sorting, summary, stateStoring, grouping, groupPanel, filterRow, headerFilter, editing, rowDragging, masterDetail, 
     // other properties
     disabled = false, autoNavigateToFocusedRow = true, columnResizingMode = 'widget', columnHidingEnabled = true, columnAutoWidth = true, allowColumnResizing = true, allowColumnReordering = true, showBorders = true, showRowLines = SDKUI_Globals.userSettings?.themeSettings.gridSettings.showRowLines === 1, showColumnLines = SDKUI_Globals.userSettings?.themeSettings.gridSettings.showColumnLines === 1, showColumnHeaders = true, rowAlternationEnabled = false, wordWrapEnabled = false, noDataText, 
     // styles
@@ -29,10 +30,42 @@ const TMDataGrid = React.forwardRef((props, ref) => {
     const [totalRecordCount, setTotalRecordCount] = useState(0);
     const [visibleItemsCount, setVisibleItemsCount] = useState(0);
     const [hasFilters, setHasFilters] = useState(false);
+    // Custom context menu states
+    const [customContextMenuVisible, setCustomContextMenuVisible] = useState(false);
+    const [customContextMenuPosition, setCustomContextMenuPosition] = useState({ x: 0, y: 0 });
+    const [customContextMenuRowKey, setCustomContextMenuRowKey] = useState(undefined);
+    const gridContainerRef = useRef(null);
     useEffect(() => {
         const count = getRecordCount(dataSource);
         setTotalRecordCount(count);
     }, [dataSource]);
+    // Handle custom context menu (only when customContextMenuItems is provided)
+    useEffect(() => {
+        if (!customContextMenuItems || !gridContainerRef.current)
+            return;
+        const gridContainer = gridContainerRef.current;
+        const handleContextMenu = (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            // Get the clicked row
+            const target = e.target;
+            const rowElement = target.closest('.dx-data-row');
+            if (rowElement && internalRef.current) {
+                const rowIndex = Array.from(rowElement.parentElement?.children || []).indexOf(rowElement);
+                const rowKey = internalRef.current.instance().getKeyByRowIndex(rowIndex);
+                // Change focused row
+                internalRef.current.instance().option('focusedRowKey', rowKey);
+                // Show custom context menu
+                setCustomContextMenuVisible(true);
+                setCustomContextMenuPosition({ x: e.clientX, y: e.clientY });
+                setCustomContextMenuRowKey(rowKey);
+            }
+        };
+        gridContainer.addEventListener('contextmenu', handleContextMenu);
+        return () => {
+            gridContainer.removeEventListener('contextmenu', handleContextMenu);
+        };
+    }, [customContextMenuItems]);
     // Creating a ref to store the timestamp of the last selection change
     const lastSelectionChangeTime = useRef(Date.now());
     useEffect(() => {
@@ -101,6 +134,8 @@ const TMDataGrid = React.forwardRef((props, ref) => {
             }
             return {
                 ...item,
+                // Ensure icon is not null/undefined to prevent DevExtreme errors
+                icon: item.icon || '',
                 disabled: disabled || disabledCalculation, // An item is disabled if it's explicitly set to `true` or if the calculation above determines so
                 // Define the behavior when the menu item is clicked
                 onClick: () => {
@@ -132,10 +167,51 @@ const TMDataGrid = React.forwardRef((props, ref) => {
             };
         });
     }, [focusedRowEnabled, focusedRowKey, selectedRowKeys]);
+    // Process custom context menu items (for TMContextMenuItemProps)
+    const processCustomContextMenuItems = useCallback((items, rowID) => {
+        return items.map(item => {
+            let disabled = item.disabled ?? false;
+            let disabledCalculation = false;
+            const id = focusedRowEnabled ? focusedRowKey : rowID;
+            if (item.operationType === 'singleRow') {
+                disabledCalculation = selectedRowKeys.length > 1 || id === undefined;
+            }
+            if (item.operationType === 'multiRow') {
+                disabledCalculation = selectedRowKeys.length === 0 && id === undefined;
+            }
+            const originalOnClick = item.onClick;
+            return {
+                ...item,
+                disabled: disabled || disabledCalculation,
+                onClick: originalOnClick ? () => {
+                    if (item.operationType === 'singleRow' && id !== undefined) {
+                        originalOnClick(id);
+                    }
+                    else if (item.operationType === 'multiRow' && id !== undefined) {
+                        if (selectedRowKeys.length > 0) {
+                            originalOnClick(selectedRowKeys);
+                        }
+                        else {
+                            originalOnClick([id]);
+                        }
+                    }
+                    else {
+                        originalOnClick();
+                    }
+                } : undefined,
+                submenu: item.submenu ? processCustomContextMenuItems(item.submenu, id) : undefined,
+            };
+        });
+    }, [focusedRowEnabled, focusedRowKey, selectedRowKeys]);
     // Handle context menu preparation
     const onContextMenuPreparingCallback = useCallback((e) => {
         if (e === undefined)
             return;
+        // If custom context menu is enabled, completely disable DevExtreme's native context menu
+        if (customContextMenuItems && e.target === 'content') {
+            e.items = undefined;
+            return;
+        }
         if (onContextMenuPreparing)
             onContextMenuPreparing(e);
         if (e.target === 'content') {
@@ -146,7 +222,18 @@ const TMDataGrid = React.forwardRef((props, ref) => {
                 e.items = [...updatedContextMenuItems];
             }
         }
-    }, [updateContextMenuItems, onContextMenuPreparing]);
+        // Add column chooser to header context menu
+        if (e.target === 'header' && showHeaderColumnChooser) {
+            e.items = e.items || [];
+            e.items.push({
+                text: SDKUI_Localizator.ShowColumnSelection,
+                icon: 'columnchooser',
+                onItemClick: () => {
+                    internalRef.current?.instance().showColumnChooser();
+                }
+            });
+        }
+    }, [updateContextMenuItems, onContextMenuPreparing, showHeaderColumnChooser, customContextMenuItems]);
     // Handle toolbar preparation, especially for the search panel
     const onToolbarPreparingCallback = useCallback((e) => {
         if (e === undefined || e.toolbarOptions === undefined || e.toolbarOptions.items === undefined)
@@ -215,15 +302,19 @@ const TMDataGrid = React.forwardRef((props, ref) => {
         // Propaga l'evento originale
         onOptionChanged?.(e);
     }, [onOptionChanged, onHasFiltersChange]);
-    return _jsxs("div", { style: { width: "100%", height: "100%" }, children: [_jsx("div", { style: { width: "100%", height: counterConfig.show ? "calc(100% - 25px)" : "100%" }, children: _jsxs(DataGrid, { ref: internalRef, id: id, className: `tm-datagrid ${hasFilters ? 'has-filters' : ''}`, 
+    return _jsxs("div", { style: { width: "100%", height: "100%" }, children: [_jsx("div", { ref: gridContainerRef, style: { width: "100%", height: counterConfig.show ? "calc(100% - 25px)" : "100%" }, children: _jsxs(DataGrid, { ref: internalRef, id: id, className: `tm-datagrid ${hasFilters ? 'has-filters' : ''}`, 
                     // main properties
                     keyExpr: keyExpr, dataSource: dataSource, selectedRowKeys: selectedRowKeys, focusedRowEnabled: focusedRowEnabled, hoverStateEnabled: hoverStateEnabled, 
                     // events and callbacks
-                    onSelectionChanged: onSelectionChangedCallback, onRowDblClick: onRowDblClickCallback, onRowPrepared: onRowPrepared, onContextMenuPreparing: onContextMenuPreparingCallback, onToolbarPreparing: onToolbarPreparingCallback, onFocusedRowChanged: onFocusedRowChanged, onRowClick: onRowClick, onCellClick: onCellClick, onCellDblClick: onCellDblClick, onOptionChanged: onOptionChangedCallback, onContentReady: onContentReadyCallback, onInitialized: onInitialized, customizeColumns: customizeColumns, onEditorPreparing: onEditorPreparing, onCellPrepared: onCellPrepared, onRowUpdating: onRowUpdating, onRowExpanded: onRowExpanded, onRowCollapsed: onRowCollapsed, onRowUpdated: onRowUpdated, onSaved: onSaved, onEditCanceled: onEditCanceled, onEditingStart: onEditingStart, onEditingChange: onEditingChange, onKeyDown: onKeyDown, 
+                    onSelectionChanged: onSelectionChangedCallback, onRowDblClick: onRowDblClickCallback, onRowPrepared: onRowPrepared, onContextMenuPreparing: customContextMenuItems ? undefined : onContextMenuPreparingCallback, onToolbarPreparing: onToolbarPreparingCallback, onFocusedRowChanged: onFocusedRowChanged, onRowClick: onRowClick, onCellClick: onCellClick, onCellDblClick: onCellDblClick, onOptionChanged: onOptionChangedCallback, onContentReady: onContentReadyCallback, onInitialized: onInitialized, customizeColumns: customizeColumns, onEditorPreparing: onEditorPreparing, onCellPrepared: onCellPrepared, onRowUpdating: onRowUpdating, onRowExpanded: onRowExpanded, onRowCollapsed: onRowCollapsed, onRowUpdated: onRowUpdated, onSaved: onSaved, onEditCanceled: onEditCanceled, onEditingStart: onEditingStart, onEditingChange: onEditingChange, onKeyDown: onKeyDown, 
                     // 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 }), columnChooser && _jsx(ColumnChooser, { ...columnChooser }), 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 }) })] });
+                    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: {
+                    visible: customContextMenuVisible,
+                    position: customContextMenuPosition,
+                    onClose: () => setCustomContextMenuVisible(false)
+                } }))] });
 });
 export default TMDataGrid;
 const getRecordCount = (dataSource) => {

package/lib/components/editors/TMHtmlEditor.js

@@ -170,7 +170,7 @@ const TMHtmlEditor = (props) => {
                         justifyContent: 'flex-end',
                         fontSize: 12,
                         color: '#6c757d',
-                        marginTop: 4,
+                        marginTop: showInfoIcon ? 0 : 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({

package/lib/components/editors/TMMetadataValues.js

@@ -389,17 +389,35 @@ const TMMetadataValues = ({ showCheckBoxes = ShowCheckBoxesMode.Never, checkPerm
         return (_jsxs("div", { style: { width: '100%' }, children: [draftData.length > 0 && _jsx(TMAccordion, { title: SDKUI_Localizator.Draft, children: draftData.map(item => renderMetadataItem(item, isReadOnly)) }), checkOutData.length > 0 && _jsx(TMAccordion, { title: `${SDKUI_Localizator.CheckIn}/${SDKUI_Localizator.CheckOut}`, children: checkOutData.map(item => renderMetadataItem(item, true)) })] }));
     }, [metadataValues, showCheckBoxes, showNullValueCheckBoxes, isReadOnly, dynDataListsToBeRefreshed, validationItems, selectedMID, isOpenDistinctValues, openChooserBySingleClick, metadataValuesOrig]);
     const layoutChronology = useMemo(() => {
-        const chronologyData = [];
+        // Definiamo l'ordine desiderato: Version, Tipo, Dimensione, Autore, Data Ultima modifica
+        const desiredChronologyOrder = [
+            ChronologyMIDs.Ver,
+            SystemMIDsAsNumber.FileExt,
+            SystemMIDsAsNumber.FileSize,
+            ChronologyMIDs.AuthorID,
+            ChronologyMIDs.CheckInTime,
+        ];
+        const tempChronologyDataMap = {};
         metadataValues.forEach(item => {
             switch (item.md?.id) {
                 case ChronologyMIDs.Ver:
                 case ChronologyMIDs.AuthorID:
-                    chronologyData.push(item);
+                case ChronologyMIDs.CheckInTime:
+                case SystemMIDsAsNumber.FileExt:
+                case SystemMIDsAsNumber.FileSize:
+                    tempChronologyDataMap[item.md.id] = item;
                     break;
                 default:
                     break;
             }
         });
+        // Visualizziamo nell'ordine desiderato
+        const chronologyData = [];
+        desiredChronologyOrder.forEach(id => {
+            if (tempChronologyDataMap[id]) {
+                chronologyData.push(tempChronologyDataMap[id]);
+            }
+        });
         return (_jsx("div", { style: { width: '100%' }, children: chronologyData.length > 0 && chronologyData.map(item => renderMetadataItem(item, isReadOnly)) }));
     }, [metadataValues, showCheckBoxes, showNullValueCheckBoxes, isReadOnly, dynDataListsToBeRefreshed, validationItems, selectedMID, isOpenDistinctValues, openChooserBySingleClick, metadataValuesOrig]);
     const layoutDsAttachs = useMemo(() => {

package/lib/components/features/documents/TMDcmtBlog.d.ts

@@ -1,16 +1,10 @@
 import React from 'react';
 import { HomeBlogPost, TaskDescriptor } from '@topconsultnpm/sdk-ts';
 interface ITMDcmtBlogProps {
-    blogsDatasource: HomeBlogPost[];
-    setBlogsDatasource: (posts: HomeBlogPost[]) => void;
-    hasLoadedDataOnce: boolean;
-    setHasLoadedDataOnce: (loaded: boolean) => void;
-    lastLoadedDid: number | undefined;
-    setLastLoadedDid: (did: number | undefined) => void;
     tid: number | undefined;
     did: number | undefined;
-    fetchBlogDataAsync: (tid: number | undefined, did: number | undefined) => Promise<void>;
     isVisible?: boolean;
+    fetchBlogDataTrigger?: number;
     allTasks?: Array<TaskDescriptor>;
     getAllTasks?: () => Promise<void>;
     deleteTaskByIdsCallback?: (deletedTaskIds: Array<number>) => Promise<void>;

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

@@ -6,13 +6,40 @@ import { TMNothingToShow } from './TMDcmtPreview';
 import { IconBoard, SDKUI_Localizator } from '../../../helper';
 import TMBlogCommentForm from '../blog/TMBlogCommentForm';
 import TMBlogsPost from '../../grids/TMBlogsPost';
-const TMDcmtBlog = ({ blogsDatasource, setBlogsDatasource, hasLoadedDataOnce, setHasLoadedDataOnce, lastLoadedDid, setLastLoadedDid, tid, did, fetchBlogDataAsync, isVisible, allTasks = [], getAllTasks, deleteTaskByIdsCallback, addTaskCallback, editTaskCallback, handleNavigateToWGs, handleNavigateToDossiers }) => {
+import TMSpinner from '../../base/TMSpinner';
+import { TMExceptionBoxManager } from '../../base/TMPopUp';
+const TMDcmtBlog = ({ tid, did, isVisible, fetchBlogDataTrigger, allTasks = [], getAllTasks, deleteTaskByIdsCallback, addTaskCallback, editTaskCallback, handleNavigateToWGs, handleNavigateToDossiers }) => {
+    const [blogsDatasource, setBlogsDatasource] = useState([]);
+    const [hasLoadedDataOnce, setHasLoadedDataOnce] = useState(false); //traccia se *qualsiasi* dato è stato caricato per la prima volta
+    const [lastLoadedDid, setLastLoadedDid] = useState(undefined); // `lastLoadedDid` tiene traccia dell'ultimo `did` per cui abbiamo caricato i dati
     // State to manage show comment form selected file
     const [showCommentForm, setShowCommentForm] = useState(false);
     const [externalBlogPost, setExternalBlogPost] = useState(undefined);
+    const fetchBlogDataAsync = useCallback(async (tid, did) => {
+        try {
+            TMSpinner.show({ description: 'Caricamento - Bacheca...' });
+            const res = await SDK_Globals.tmSession?.NewSearchEngine().BlogRetrieveAsync(tid, did);
+            setBlogsDatasource(res ?? []);
+            setHasLoadedDataOnce(true);
+            setLastLoadedDid(did);
+        }
+        catch (e) {
+            let err = e;
+            TMExceptionBoxManager.show({ exception: err });
+        }
+        finally {
+            TMSpinner.hide();
+        }
+    }, []);
     const showCommentFormCallback = useCallback(() => {
         setShowCommentForm(true);
     }, []);
+    // useEffect per triggerare il fetch dall'esterno tramite props
+    useEffect(() => {
+        if (fetchBlogDataTrigger !== undefined && fetchBlogDataTrigger > 0) {
+            fetchBlogDataAsync(tid, did);
+        }
+    }, [fetchBlogDataTrigger, fetchBlogDataAsync, tid, did]);
     useEffect(() => {
         if (!tid || !did) {
             setBlogsDatasource([]);
@@ -21,7 +48,7 @@ const TMDcmtBlog = ({ blogsDatasource, setBlogsDatasource, hasLoadedDataOnce, se
         }
         // Condizione per eseguire il fetch:
         // 1. Il pannello è visibile
-        // 2. E (non abbiamo ancora caricato dati O il `did` è cambiato rispetto all'ultima volta)
+        // 2. E (non abbiamo ancora caricato dati o il `did` è cambiato rispetto all'ultima volta)
         const shouldFetch = isVisible && (!hasLoadedDataOnce || did !== lastLoadedDid);
         // Esegui la chiamata API solo se il pannello è visibile E i dati non sono già stati caricati
         // O, se vuoi ricaricare ogni volta che diventa visibile (ma è meno efficiente per "pesante")