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

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

@@ -0,0 +1,30 @@
+import type { TMContextMenuItemProps } from '../ContextMenu';
+export interface TMFloatingMenuItem {
+    id: string;
+    name: string;
+    icon: React.ReactNode;
+    onClick: () => void;
+    disabled?: boolean;
+    isPinned?: boolean;
+    originalMenuItem?: TMContextMenuItemProps;
+}
+export interface TMFloatingMenuBarProps {
+    containerRef: React.RefObject<HTMLElement | null>;
+    contextMenuItems?: TMContextMenuItemProps[];
+    storageKey?: string;
+    isConstrained?: boolean;
+    defaultPosition?: Position;
+    maxItems?: number;
+}
+export interface Position {
+    x: number;
+    y: number;
+}
+export interface TMFloatingMenuBarState {
+    position: Position;
+    isDragging: boolean;
+    isConfigMode: boolean;
+    orientation: 'horizontal' | 'vertical';
+    items: TMFloatingMenuItem[];
+    draggedItemIndex: number | null;
+}

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

@@ -0,0 +1 @@
+export {};

package/lib/components/NewComponents/Notification/Notification.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { NotificationProps } from './types';
+declare const Notification: React.FC<NotificationProps>;
+export default Notification;

package/lib/components/NewComponents/Notification/Notification.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useRef } from 'react';
+import * as S from './styles';
+const Notification = ({ title, message, mode = 'info', position = 'top-right', duration = 3000, closable = false, stopOnMouseEnter = true, hasProgress = true, onClose, }) => {
+    const [state, setState] = useState({
+        visible: true,
+        isPaused: false,
+        progress: 100,
+    });
+    const timeoutRef = useRef(undefined);
+    const remainingTimeRef = useRef(duration);
+    const pauseTimeRef = useRef(0);
+    const closeNotification = () => {
+        setState(prev => ({ ...prev, visible: false }));
+        setTimeout(() => {
+            onClose?.();
+        }, 300);
+    };
+    useEffect(() => {
+        // Set up auto-close timer
+        timeoutRef.current = setTimeout(() => {
+            closeNotification();
+        }, duration);
+        return () => {
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+        };
+    }, [duration]);
+    const handleMouseEnter = () => {
+        if (!stopOnMouseEnter)
+            return;
+        // Pause the timer
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+            pauseTimeRef.current = Date.now();
+        }
+        setState(prev => ({ ...prev, isPaused: true }));
+    };
+    const handleMouseLeave = () => {
+        if (!stopOnMouseEnter)
+            return;
+        // Resume the timer with remaining time
+        const pauseDuration = Date.now() - pauseTimeRef.current;
+        remainingTimeRef.current = Math.max(0, remainingTimeRef.current - pauseDuration);
+        timeoutRef.current = setTimeout(() => {
+            closeNotification();
+        }, remainingTimeRef.current);
+        setState(prev => ({ ...prev, isPaused: false }));
+    };
+    const handleClose = (e) => {
+        e.stopPropagation();
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+        }
+        closeNotification();
+    };
+    return (_jsxs(S.NotificationContainer, { "$position": position, "$mode": mode, "$visible": state.visible, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, role: "alert", "aria-live": "assertive", children: [_jsxs(S.NotificationContent, { children: [_jsx(S.NotificationTitle, { children: title }), _jsx(S.NotificationMessage, { children: message })] }), closable && (_jsx(S.CloseButton, { onClick: handleClose, "aria-label": "Close notification", children: "\u00D7" })), hasProgress && (_jsx(S.ProgressBar, { "$duration": duration, "$mode": mode, "$isPaused": state.isPaused }))] }));
+};
+export default Notification;

package/lib/components/NewComponents/Notification/NotificationContainer.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { NotificationPosition } from './types';
+interface NotificationContainerProps {
+    position: NotificationPosition;
+    children: React.ReactNode;
+}
+declare const NotificationContainer: React.FC<NotificationContainerProps>;
+export default NotificationContainer;

package/lib/components/NewComponents/Notification/NotificationContainer.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from 'styled-components';
+const Container = styled.div `
+  position: fixed;
+  z-index: 10002;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  pointer-events: none;
+
+  ${props => {
+    const isTop = props.$position.startsWith('top');
+    const isBottom = props.$position.startsWith('bottom');
+    const isLeft = props.$position.endsWith('left');
+    const isRight = props.$position.endsWith('right');
+    const isCenter = props.$position.endsWith('center');
+    return `
+      ${isTop ? 'top: 24px;' : ''}
+      ${isBottom ? 'bottom: 24px;' : ''}
+      ${isLeft ? 'left: 24px;' : ''}
+      ${isRight ? 'right: 24px;' : ''}
+      ${isCenter ? 'left: 50%; transform: translateX(-50%);' : ''}
+    `;
+}}
+
+  & > * {
+    pointer-events: auto;
+  }
+`;
+const NotificationContainer = ({ position, children }) => {
+    return _jsx(Container, { "$position": position, children: children });
+};
+export default NotificationContainer;

package/lib/components/NewComponents/Notification/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './Notification';
+export * from './types';

package/lib/components/NewComponents/Notification/index.js

@@ -0,0 +1,2 @@
+export { default } from './Notification';
+export * from './types';

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

@@ -0,0 +1,21 @@
+import type { NotificationMode, NotificationPosition } from './types';
+export declare const NotificationContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $position: NotificationPosition;
+    $mode: NotificationMode;
+    $visible: boolean;
+}>> & string;
+export declare const NotificationContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const NotificationTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const NotificationMessage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const CloseButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
+export declare const ProgressBar: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}>, {
+    $duration: number;
+    $mode: NotificationMode;
+    $isPaused: boolean;
+}>, {
+    $duration: number;
+    $mode: NotificationMode;
+    $isPaused: boolean;
+}>> & string;

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

@@ -0,0 +1,180 @@
+import styled, { keyframes } from 'styled-components';
+const slideInFromTop = keyframes `
+  from {
+    opacity: 0;
+    transform: translateY(-100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+`;
+const slideInFromBottom = keyframes `
+  from {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+`;
+const slideOut = keyframes `
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+`;
+const getModeColors = (mode) => {
+    const colors = {
+        success: {
+            bg: '#10b981',
+            bgDark: '#059669',
+            border: '#34d399',
+            text: '#ffffff',
+        },
+        error: {
+            bg: '#ef4444',
+            bgDark: '#dc2626',
+            border: '#f87171',
+            text: '#ffffff',
+        },
+        warning: {
+            bg: '#f59e0b',
+            bgDark: '#d97706',
+            border: '#fbbf24',
+            text: '#ffffff',
+        },
+        info: {
+            bg: '#3b82f6',
+            bgDark: '#2563eb',
+            border: '#60a5fa',
+            text: '#ffffff',
+        },
+    };
+    return colors[mode];
+};
+export const NotificationContainer = styled.div `
+  position: relative;
+  z-index: 1;
+  min-width: 320px;
+  max-width: 420px;
+  background: ${props => getModeColors(props.$mode).bg};
+  border-radius: 12px;
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2),
+              0 4px 12px rgba(0, 0, 0, 0.15);
+  padding: 16px 20px;
+  animation: ${props => {
+    if (!props.$visible)
+        return slideOut;
+    return props.$position.startsWith('top') ? slideInFromTop : slideInFromBottom;
+}} 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+  backdrop-filter: blur(10px);
+  border: 2px solid ${props => getModeColors(props.$mode).border};
+  color: ${props => getModeColors(props.$mode).text};
+  overflow: hidden;
+
+  [data-theme='dark'] & {
+    background: ${props => getModeColors(props.$mode).bgDark};
+    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4),
+                0 4px 12px rgba(0, 0, 0, 0.3);
+  }
+
+  @media (max-width: 768px) {
+    min-width: 280px;
+    max-width: calc(100vw - 48px);
+  }
+`;
+export const NotificationContent = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding-right: 24px;
+`;
+export const NotificationTitle = styled.div `
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 1.4;
+  letter-spacing: -0.01em;
+`;
+export const NotificationMessage = styled.div `
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.5;
+  opacity: 0.95;
+`;
+export const CloseButton = styled.button `
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  background: transparent;
+  border: none;
+  color: inherit;
+  cursor: pointer;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 6px;
+  transition: all 0.15s ease;
+  font-size: 18px;
+  line-height: 1;
+  padding: 0;
+  opacity: 0.8;
+
+  &:hover {
+    opacity: 1;
+    background: rgba(255, 255, 255, 0.2);
+    transform: scale(1.1);
+  }
+
+  &:active {
+    transform: scale(0.95);
+  }
+
+  &:focus {
+    outline: 2px solid rgba(255, 255, 255, 0.5);
+    outline-offset: 2px;
+  }
+`;
+export const ProgressBar = styled.div.attrs(props => ({
+    style: {
+        animationDuration: `${props.$duration}ms`,
+    },
+})) `
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  height: 4px;
+  width: 100%;
+  background: ${props => getModeColors(props.$mode).border};
+  border-radius: 0 0 0 10px;
+  box-shadow: 0 0 8px ${props => getModeColors(props.$mode).border};
+  transform-origin: left;
+  animation: progress-shrink linear forwards;
+  animation-play-state: ${props => props.$isPaused ? 'paused' : 'running'};
+
+  @keyframes progress-shrink {
+    from {
+      transform: scaleX(1);
+    }
+    to {
+      transform: scaleX(0);
+    }
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 20px;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4));
+  }
+`;

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

@@ -0,0 +1,18 @@
+export type NotificationMode = 'warning' | 'info' | 'error' | 'success';
+export type NotificationPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+export interface NotificationProps {
+    title: string;
+    message: string;
+    mode?: NotificationMode;
+    position?: NotificationPosition;
+    duration?: number;
+    closable?: boolean;
+    stopOnMouseEnter?: boolean;
+    hasProgress?: boolean;
+    onClose?: () => void;
+}
+export interface NotificationState {
+    visible: boolean;
+    isPaused: boolean;
+    progress: number;
+}

package/lib/components/NewComponents/Notification/types.js

@@ -0,0 +1 @@
+export {};

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/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

@@ -10,7 +10,7 @@ import TMTooltip from "../base/TMTooltip";
 import TMCheckBox from "./TMCheckBox";
 import TMMetadataEditor, { useMetadataEditableList } from "./TMMetadataEditor";
 import { FormulaHelper } from "./TMFormulaEditor";
-import { DraftsMIDs, DSAttachsMIDs } from "../../ts";
+import { ChronologyMIDs, DraftsMIDs, DSAttachsMIDs } from "../../ts";
 import { TMNothingToShow } from "../features/documents/TMDcmtPreview";
 import TMAccordion from "../base/TMAccordion";
 import TabPanel, { Item } from 'devextreme-react/tab-panel';
@@ -388,6 +388,20 @@ 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 = [];
+        metadataValues.forEach(item => {
+            switch (item.md?.id) {
+                case ChronologyMIDs.Ver:
+                case ChronologyMIDs.AuthorID:
+                    chronologyData.push(item);
+                    break;
+                default:
+                    break;
+            }
+        });
+        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(() => {
         const dsAttachsData = [];
         metadataValues.forEach(item => {
@@ -541,7 +555,7 @@ const TMMetadataValues = ({ showCheckBoxes = ShowCheckBoxesMode.Never, checkPerm
         }
         switch (currentDTD?.id) {
             case SystemTIDs.Drafts: return layoutDraft;
-            // case SystemTIDs.Chronology: break;
+            case SystemTIDs.Chronology: return layoutChronology;
             case SystemTIDs.DSAttachs: return layoutDsAttachs;
             default:
                 // Se è presente un layout personalizzato, usalo, altrimenti usa il rendering standard

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")

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

@@ -96,10 +96,11 @@ const TMDcmtForm = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallback, addTa
     const [isInitialLoading, setIsInitialLoading] = useState(true);
     const [isNavigating, setIsNavigating] = useState(false);
     const [dcmtReferences, setDcmtReferences] = useState(undefined);
-    // Dcmt Blog states
-    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
+    // Stato per triggerare il refresh del blog dall'esterno
+    const [refreshBlogTrigger, setRefreshBlogTrigger] = useState(0);
+    const triggerBlogRefresh = useCallback(async () => {
+        setRefreshBlogTrigger(prev => prev + 1);
+    }, []);
     useEffect(() => {
         if (!allowButtonsRefs)
             setDcmtReferences(undefined);
@@ -237,11 +238,11 @@ const TMDcmtForm = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallback, addTa
             // Imposta il layout e customButtonsLayout immediatamente
             setLayout(resLayout);
             if (layoutMode === LayoutModes.Update && customButtonsLayoutResult) {
-                //disabilitato per ora
-                //setCustomButtonsLayout(customButtonsLayoutResult);
+                setCustomButtonsLayout(customButtonsLayoutResult);
             }
             // Carica DTD e metadata
             let dtd = await DcmtTypeListCacheService.GetWithNotGrantedAsync(TID, DID, getMetadataResult);
+            console.log('GetWithNotGrantedAsync DTD:', dtd);
             setFromDTD(dtd);
             if (layoutMode === LayoutModes.Update || (layoutMode === LayoutModes.Ark && DID)) {
                 await setMetadataList(dtd?.metadata ?? [], getMetadataResult);
@@ -680,13 +681,11 @@ const TMDcmtForm = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallback, addTa
                 text: customButton.title || 'Bottone personalizzato',
                 onClick: () => setCustomButton(customButton)
             }));
-            //disabilitato per ora
-            /*
             items.push({
-                icon: svgToString(<IconCheck />),
+                icon: svgToString(_jsx(IconCheck, {})),
                 text: SDKUI_Localizator.CustomButtons,
                 items: customButtonsItems
-            } as TMDataGridContextMenuItem);*/
+            });
         }
         return items;
     }, [
@@ -1007,28 +1006,12 @@ const TMDcmtForm = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallback, addTa
             setShowAll(true);
         }
     }, [shouldShowAll, showAll]);
-    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 afterTaskSaved = useCallback(async (task, formMode, forceRefresh = false) => {
         const shouldRefresh = forceRefresh || (task && task.state === Task_States.Completed) || formMode === FormModes.Create || formMode === FormModes.Duplicate;
         if (TID && DID && shouldRefresh) {
-            await fetchBlogDataAsync(TID, DID);
+            await triggerBlogRefresh();
         }
-    }, [TID, DID]);
+    }, [TID, DID, triggerBlogRefresh]);
     const tmDcmtForm = useMemo(() => {
         return _jsx(_Fragment, { children: metadataValuesSource.length > 0 &&
                 _jsxs(StyledToolbarCardContainer, { children: [_jsx(TMMetadataValues, { TID: TID, metadataValues: metadataValuesSource, metadataValuesOrig: metadataValuesSourceOrig, isExpertMode: isExpertMode, isOpenDistinctValues: isOpenDistinctValues, openChooserBySingleClick: !isOpenDistinctValues, selectedMID: focusedMetadataValue?.mid, isReadOnly: formMode === FormModes.ReadOnly, layoutMode: layoutMode, deviceType: deviceType, validationItems: validationItems, inputMids: inputMids, layout: layout, onFocusedItemChanged: (item) => { (item?.mid !== focusedMetadataValue?.mid) && setFocusedMetadataValue(item); }, onValueChanged: (newItems) => {
@@ -1078,7 +1061,7 @@ const TMDcmtForm = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallback, addTa
         handleUndo,
         handleClearForm
     ]);
-    const tmBlog = useMemo(() => _jsx(TMDcmtBlog, { blogsDatasource: blogsDatasource, hasLoadedDataOnce: hasLoadedDataOnce, lastLoadedDid: lastLoadedDid, setBlogsDatasource: setBlogsDatasource, setHasLoadedDataOnce: setHasLoadedDataOnce, setLastLoadedDid: setLastLoadedDid, fetchBlogDataAsync: fetchBlogDataAsync, tid: TID, did: DID, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers }), [blogsDatasource, hasLoadedDataOnce, lastLoadedDid, TID, DID, allTasks]);
+    const tmBlog = useMemo(() => _jsx(TMDcmtBlog, { tid: TID, did: DID, allTasks: allTasks, fetchBlogDataTrigger: refreshBlogTrigger, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers }), [TID, DID, allTasks, refreshBlogTrigger]);
     const tmSysMetadata = useMemo(() => _jsx(TMMetadataValues, { layoutMode: layoutMode, openChooserBySingleClick: !isOpenDistinctValues, TID: TID, isReadOnly: true, deviceType: deviceType, metadataValues: formData.filter(o => (o.mid != undefined && o.mid <= 100)), metadataValuesOrig: formData.filter(o => (o.mid != undefined && o.mid <= 100)), validationItems: [], inputMids: inputMids }), [TID, layoutMode, formData, deviceType, inputMids]);
     const tmDcmtPreview = useMemo(() => _jsx(TMDcmtPreviewWrapper, { currentDcmt: currentDcmt, dcmtFile: dcmtFile ?? inputFile, deviceType: deviceType, fromDTD: fromDTD, layoutMode: layoutMode, onFileUpload: (file) => {
             setDcmtFile(file);