@topconsultnpm/sdkui-react 6.22.0-t1 → 6.22.0-t2

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { DcmtTypeListCacheService, LayoutModes, SDK_Localizator, TreeCacheService, TreeItemTypes } from '@topconsultnpm/sdk-ts';
 import { TreeList, Column, Scrolling, Selection } from 'devextreme-react/tree-list';
 import { DropDownBox } from 'devextreme-react';
@@ -13,6 +13,15 @@ import { TMColors } from '../../../utils/theme';
 import styled from 'styled-components';
 import { useOutsideClick } from '../../../hooks/useOutsideClick';
 import { DeviceType, useDeviceType } from '../../base/TMDeviceProvider';
+const TMTreeDcmtTypeCell = ({ tid, isMobile }) => {
+    const [dtd, setDtd] = useState();
+    const loadDTD = useCallback(async () => {
+        if (isMobile || dtd || !tid)
+            return;
+        setDtd(await DcmtTypeListCacheService.GetAsync(tid));
+    }, [isMobile, dtd, tid]);
+    return (_jsxs(StyledTreeDcmtTypeRow, { onMouseEnter: loadDTD, children: [_jsx("span", { style: { cursor: 'pointer', flex: 1, minWidth: 0 }, children: _jsx(TMTidViewer, { tid: tid, showIcon: false }) }), !isMobile && (_jsx("span", { className: 'info-icon', children: _jsx(TMDcmtTypeTooltip, { dtd: dtd, children: _jsx(IconInfo, { color: TMColors.info }) }) }))] }));
+};
 const TMTreeSelector = ({ layoutMode = LayoutModes.Update, isVisible, onSelectedTIDChanged, onClosePanel, allowMaximize = true, onMaximizePanel }) => {
     const [trees, setTrees] = useState([]);
     const [treeItems, setTreeItems] = useState([]);
@@ -22,80 +31,76 @@ const TMTreeSelector = ({ layoutMode = LayoutModes.Update, isVisible, onSelected
     const [selectedRowKeys, setSelectedRowKeys] = useState([]);
     // State hook to store the currently focused row key, initially set to undefined
     const [focusedRowKey, setFocusedRowKey] = useState(undefined);
+    // Elemento selezionato nell'albero: dopo un refresh va riproposto se esiste ancora
+    const [selectedTreeItemKey, setSelectedTreeItemKey] = useState(undefined);
+    const selectedTreeItemKeys = useMemo(() => selectedTreeItemKey !== undefined ? [selectedTreeItemKey] : [], [selectedTreeItemKey]);
     const [isGridBoxOpened, setIsGridBoxOpened] = useState(false);
     const [defaultTreeId, setDefaultTreeId] = useState(-1);
     const deviceType = useDeviceType();
     const isMobile = deviceType === DeviceType.MOBILE;
     const panelRef = useOutsideClick(() => setInfoDTD(undefined));
-    // useEffect(() => {
-    //     if (treeItems.length > 0 && treeItems[0].id) {
-    //         setSelectedRowKeys([treeItems[0].id])
-    //     }
-    // }, [treeItems])
-    useEffect(() => {
-        const setResultCache = (result) => {
-            if (result && result.length > 0) {
-                setTrees(result);
-                let defaultTree = SDKUI_Globals.userSettings.searchSettings.defaultTree;
-                let initialTreeId;
-                let treeToSelect;
-                if (defaultTree > 0) {
-                    initialTreeId = defaultTree;
-                    treeToSelect = result.find(o => o.id == defaultTree);
-                }
-                else {
-                    initialTreeId = result[0]?.id ?? 0;
-                    treeToSelect = result[0];
-                }
-                setSelectedTreeId(initialTreeId);
-                if (treeToSelect?.id) {
-                    setSelectedRowKeys([treeToSelect.id]);
-                }
+    // Tiene traccia dell'albero selezionato senza far dipendere loadTreesAsync da selectedTreeId:
+    // così il refresh può riproporre la selezione corrente senza ricaricare a ogni cambio di albero
+    const selectedTreeIdRef = useRef(selectedTreeId);
+    useEffect(() => { selectedTreeIdRef.current = selectedTreeId; }, [selectedTreeId]);
+    // Carica tutti gli alberi del contesto corrente (ricerca o archiviazione).
+    // Con forceRefresh la cache viene invalidata, altrimenti GetAll* restituirebbe gli alberi già in memoria.
+    const loadTreesAsync = useCallback(async (forceRefresh = false) => {
+        const isSearchContext = layoutMode == LayoutModes.Update;
+        if (forceRefresh) {
+            if (isSearchContext)
+                TreeCacheService.RemoveAllSearch();
+            else
+                TreeCacheService.RemoveAllArchive();
+        }
+        const result = isSearchContext
+            ? await TreeCacheService.GetAllSearchAsync()
+            : await TreeCacheService.GetAllArchiveAsync();
+        if (!result || result.length === 0) {
+            // Sul refresh gli alberi possono essere spariti lato server: allinea anche lo stato vuoto
+            if (forceRefresh) {
+                setTrees([]);
+                setSelectedTreeId(0);
+                setSelectedRowKeys([]);
             }
-        };
-        if (layoutMode == LayoutModes.Update) {
-            TreeCacheService.GetAllSearchAsync().then((result) => { setResultCache(result); });
+            return;
+        }
+        setTrees(result);
+        // Dopo un refresh mantiene l'albero corrente, se ancora presente
+        const currentTreeId = selectedTreeIdRef.current;
+        if (forceRefresh && result.some(o => o.id == currentTreeId)) {
+            setSelectedTreeId(currentTreeId);
+            setSelectedRowKeys([currentTreeId]);
+            return;
+        }
+        let defaultTree = SDKUI_Globals.userSettings.searchSettings.defaultTree;
+        let initialTreeId;
+        let treeToSelect;
+        if (defaultTree > 0) {
+            initialTreeId = defaultTree;
+            treeToSelect = result.find(o => o.id == defaultTree);
         }
         else {
-            TreeCacheService.GetAllArchiveAsync().then((result) => { setResultCache(result); });
+            initialTreeId = result[0]?.id ?? 0;
+            treeToSelect = result[0];
+        }
+        setSelectedTreeId(initialTreeId);
+        if (treeToSelect?.id) {
+            setSelectedRowKeys([treeToSelect.id]);
         }
     }, [layoutMode]);
+    useEffect(() => { loadTreesAsync(); }, [loadTreesAsync]);
     useEffect(() => {
         let newTreeItems = trees.find(o => o.id == selectedTreeId)?.items ?? [];
         setTreeItems(newTreeItems);
+        // Mantiene la selezione dopo il refresh solo se l'elemento e' ancora presente (al cambio albero si azzera)
+        setSelectedTreeItemKey(prev => prev !== undefined && newTreeItems.some(o => o.id == prev) ? prev : undefined);
     }, [selectedTreeId, trees]);
     const renderCell = useCallback((data) => {
         const treeItem = data.data;
-        const [showInfo, setShowInfo] = useState(false);
         // Documento (DcmtType)
         if (treeItem.type === TreeItemTypes.DcmtType) {
-            return (_jsxs(StyledDivHorizontal, { style: {
-                    alignItems: 'center',
-                    minWidth: 0,
-                    width: '100%',
-                    gap: 2,
-                    position: 'relative'
-                }, onMouseEnter: async () => {
-                    if (!isMobile) {
-                        setShowInfo(true);
-                        let dtd = await DcmtTypeListCacheService.GetAsync(treeItem.tid);
-                        setInfoDTD(dtd);
-                    }
-                }, onMouseLeave: () => {
-                    if (!isMobile) {
-                        setShowInfo(false);
-                        setInfoDTD(undefined);
-                    }
-                }, children: [_jsx("span", { style: { cursor: 'pointer', flex: 1, minWidth: 0 }, children: _jsx(TMTidViewer, { tid: treeItem.tid, showIcon: false }) }), !isMobile && (_jsx("span", { style: {
-                            opacity: showInfo ? 1 : 0,
-                            transition: 'opacity 0.2s',
-                            pointerEvents: showInfo ? 'auto' : 'none',
-                            cursor: 'pointer',
-                            display: 'flex',
-                            alignItems: 'center',
-                            marginLeft: 'auto',
-                            zIndex: 2
-                        }, children: _jsx(TMDcmtTypeTooltip, { dtd: infoDTD, children: _jsx(IconInfo, { color: TMColors.info }) }) }))] }));
+            return _jsx(TMTreeDcmtTypeCell, { tid: treeItem.tid, isMobile: isMobile });
         }
         // Folder (altri tipi)
         return (_jsxs(StyledDivHorizontal, { style: { gap: 5, alignItems: 'center', minWidth: 0 }, children: [_jsx("span", { style: {
@@ -113,7 +118,7 @@ const TMTreeSelector = ({ layoutMode = LayoutModes.Update, isVisible, onSelected
                         whiteSpace: 'nowrap',
                         flex: 1,
                     }, children: treeItem.nameLoc })] }));
-    }, [isMobile, infoDTD, setInfoDTD]);
+    }, [isMobile]);
     // Handles selection change in the data grid
     const onSelectionChanged = useCallback((e) => {
         const selectedKeys = e.component.getSelectedRowKeys() ?? [];
@@ -126,6 +131,16 @@ const TMTreeSelector = ({ layoutMode = LayoutModes.Update, isVisible, onSelected
         setSelectedRowKeys(selectedKeys);
         setIsGridBoxOpened(false);
     }, []);
+    // Handles click on a tree row in the trees data grid: clicking the already selected tree
+    // does not raise onSelectionChanged, so the drop down must be closed here as well
+    const onRowClickTrees = useCallback((e) => {
+        const tree = e.data;
+        if (tree?.id === undefined)
+            return;
+        setSelectedTreeId(tree.id);
+        setSelectedRowKeys([tree.id]);
+        setIsGridBoxOpened(false);
+    }, []);
     // Handles focus change in the data grid
     const onFocusedRowChanged = useCallback((e) => {
         setFocusedRowKey(e.row?.key);
@@ -161,7 +176,18 @@ const TMTreeSelector = ({ layoutMode = LayoutModes.Update, isVisible, onSelected
             }
         }
     }, []);
-    return (_jsx(TMPanel, { title: SDK_Localizator.Trees, isVisible: isVisible, totalItems: trees.length, onClose: onClosePanel, allowMaximize: allowMaximize, onMaximize: onMaximizePanel, onHeaderDoubleClick: onMaximizePanel, toolbar: _jsx(TMButton, { btnStyle: 'icon', caption: defaultTreeId == selectedTreeId ? SDKUI_Localizator.TreeRemoveDefault : SDKUI_Localizator.SetAsDefault, icon: defaultTreeId == selectedTreeId ? _jsx(IconStarRemove, { color: 'rgb(243, 114, 92)' }) : _jsx(IconStar, { color: 'rgb(248, 215, 117)' }), onClick: () => {
+    // Callback function to handle click events on a tree view row.
+    const onRowClickTreeView = useCallback((e) => {
+        const treeItem = e.data;
+        if (treeItem?.type === TreeItemTypes.DcmtType) {
+            onSelectedTIDChanged?.(treeItem.tid, selectedTreeId);
+        }
+    }, [onSelectedTIDChanged, selectedTreeId]);
+    // La selezione la decide il widget (click, ctrl+click che deseleziona, barra spaziatrice): qui si allinea solo lo stato
+    const onSelectionChangedTreeView = useCallback((e) => {
+        setSelectedTreeItemKey(e.selectedRowKeys?.[0]);
+    }, []);
+    return (_jsx(TMPanel, { title: SDK_Localizator.Trees, isVisible: isVisible, totalItems: trees.length, onClose: onClosePanel, allowMaximize: allowMaximize, onMaximize: onMaximizePanel, onHeaderDoubleClick: onMaximizePanel, onRefresh: () => loadTreesAsync(true), toolbar: _jsx(TMButton, { btnStyle: 'icon', caption: defaultTreeId == selectedTreeId ? SDKUI_Localizator.TreeRemoveDefault : SDKUI_Localizator.SetAsDefault, icon: defaultTreeId == selectedTreeId ? _jsx(IconStarRemove, { color: 'rgb(243, 114, 92)' }) : _jsx(IconStar, { color: 'rgb(248, 215, 117)' }), onClick: () => {
                 if (defaultTreeId == selectedTreeId) {
                     if (layoutMode == LayoutModes.Update)
                         SDKUI_Globals.userSettings.searchSettings.defaultTree = -1;
@@ -193,14 +219,33 @@ const TMTreeSelector = ({ layoutMode = LayoutModes.Update, isVisible, onSelected
                                 }, value: selectedTreeId, opened: isGridBoxOpened, valueExpr: "id", displayExpr: "nameLoc", deferRendering: false, dataSource: trees, onValueChanged: syncDataGridSelection, onOptionChanged: onGridBoxOpened, style: { height: 30, padding: '5px' }, children: _jsx(TMDataGrid, { height: "100%", width: "100%", dataSource: trees, dataColumns: [
                                         { dataField: 'nameLoc', caption: SDKUI_Localizator.Name, width: 'auto' },
                                         { dataField: 'description', caption: SDKUI_Localizator.Description, width: 'auto' },
-                                    ], selection: { mode: 'single', showCheckBoxesMode: "none" }, showHeaderFilter: false, selectedRowKeys: selectedRowKeys, onSelectionChanged: onSelectionChanged, focusedRowKey: focusedRowKey, onFocusedRowChanged: onFocusedRowChanged }) }) }), _jsxs(StyledTreeListWrapper, { children: [_jsxs(TreeList, { height: "100%", dataSource: treeItems, showRowLines: false, showColumnLines: false, showBorders: false, columnAutoWidth: false, keyExpr: "id", parentIdExpr: "parentID", dataStructure: "plain", showColumnHeaders: false, onContentReady: (e) => e.component.clearSelection(), onCellDblClick: onCellDblClickTreeView, onSelectionChanged: (e) => {
-                                        if (e.selectedRowsData[0] && e.selectedRowsData[0].type == TreeItemTypes.DcmtType) {
-                                            onSelectedTIDChanged?.(e.selectedRowsData[0].tid, selectedTreeId);
-                                        }
-                                    }, children: [_jsx(Column, { dataField: "nameLoc", caption: SDKUI_Localizator.Name, cellRender: renderCell, width: "100%" }), _jsx(Scrolling, { mode: "virtual", useNative: Number(SDKUI_Globals.userSettings?.themeSettings.gridSettings.useNativeScrollbar) === 1 }), _jsx(Selection, { mode: "single" })] }), _jsxs(StyledOffCanvasPanel, { ref: panelRef, "$isOpen": isMobile && infoDTD !== undefined, children: [_jsxs(StyledDivHorizontal, { style: { gap: 10, padding: '10px 8px', width: '100%', alignItems: 'center' }, children: [_jsx("p", { style: { fontSize: '1.1rem', fontWeight: 'bold' }, children: `${SDKUI_Localizator.DcmtType} - ${SDKUI_Localizator.About}` }), _jsx(IconCloseOutline, { style: { marginLeft: 'auto', cursor: 'pointer' }, onClick: () => setInfoDTD(undefined) })] }), renderDTDTooltipContent(infoDTD)] })] })] })
+                                    ], selection: { mode: 'single', showCheckBoxesMode: "none" }, showHeaderFilter: false, selectedRowKeys: selectedRowKeys, onSelectionChanged: onSelectionChanged, onRowClick: onRowClickTrees, focusedRowKey: focusedRowKey, onFocusedRowChanged: onFocusedRowChanged }) }) }), _jsxs(StyledTreeListWrapper, { children: [_jsxs(TreeList, { height: "100%", dataSource: treeItems, showRowLines: false, showColumnLines: false, showBorders: false, columnAutoWidth: false, keyExpr: "id", parentIdExpr: "parentID", dataStructure: "plain", showColumnHeaders: false, selectedRowKeys: selectedTreeItemKeys, onSelectionChanged: onSelectionChangedTreeView, onCellDblClick: onCellDblClickTreeView, onRowClick: onRowClickTreeView, children: [_jsx(Column, { dataField: "nameLoc", caption: SDKUI_Localizator.Name, cellRender: renderCell, width: "100%" }), _jsx(Scrolling, { mode: "virtual", useNative: Number(SDKUI_Globals.userSettings?.themeSettings.gridSettings.useNativeScrollbar) === 1 }), _jsx(Selection, { mode: "single" })] }), _jsxs(StyledOffCanvasPanel, { ref: panelRef, "$isOpen": isMobile && infoDTD !== undefined, children: [_jsxs(StyledDivHorizontal, { style: { gap: 10, padding: '10px 8px', width: '100%', alignItems: 'center' }, children: [_jsx("p", { style: { fontSize: '1.1rem', fontWeight: 'bold' }, children: `${SDKUI_Localizator.DcmtType} - ${SDKUI_Localizator.About}` }), _jsx(IconCloseOutline, { style: { marginLeft: 'auto', cursor: 'pointer' }, onClick: () => setInfoDTD(undefined) })] }), renderDTDTooltipContent(infoDTD)] })] })] })
             : _jsx("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', width: '100%', fontSize: '1.5rem' }, children: SDKUI_Localizator.TreesNoAvailable }) }));
 };
 export default TMTreeSelector;
+const StyledTreeDcmtTypeRow = styled(StyledDivHorizontal) `
+    align-items: center;
+    min-width: 0;
+    width: 100%;
+    gap: 2px;
+    position: relative;
+
+    .info-icon {
+        display: flex;
+        align-items: center;
+        margin-left: auto;
+        z-index: 2;
+        cursor: pointer;
+        opacity: 0;
+        pointer-events: none;
+        transition: opacity 0.2s;
+    }
+
+    &:hover .info-icon {
+        opacity: 1;
+        pointer-events: auto;
+    }
+`;
 const StyledTreeListWrapper = styled.div `
     width: 100%;
     height: 100%;

package/lib/components/features/workflow/TMWorkflowPopup.d.ts

@@ -4,6 +4,16 @@ import { DeviceType } from "../../base/TMDeviceProvider";
 import { WorkItemDetail } from "../../../ts";
 interface IWorkflowOperationButtonsProps {
     dtd: DcmtTypeDescriptor | undefined;
+    /**
+     * Forza la forma dei pulsanti: `true` = flusso di FIRMA (Firma e approva),
+     * `false` = flusso di APPROVAZIONE. Se omesso si deduce dal tipo documento
+     * (widget Sign4Top), che è il comportamento del workflow.
+     *
+     * Serve a chi conosce la natura dell'attività meglio del tipo documento: un
+     * work item di sola approvazione su un tipo ABILITATO alla firma non deve
+     * mostrare "Firma e approva".
+     */
+    signFlow?: boolean;
     approveDisable?: boolean;
     signApproveDisable?: boolean;
     rejectDisable?: boolean;

package/lib/components/features/workflow/TMWorkflowPopup.js

@@ -53,16 +53,20 @@ const StyledHorizontalContainer = styled.div `
     /* align-items: flex-end; */
 `;
 export const WorkFlowOperationButtons = (props) => {
-    const { dtd = undefined, deviceType = DeviceType.DESKTOP, approveDisable = false, signApproveDisable = false, rejectDisable = false, reassignDisable = false, infoDisable = false, onApprove, onSignApprove, onReject, onReAssign, onMoreInfo, } = props;
+    const { dtd = undefined, signFlow = undefined, deviceType = DeviceType.DESKTOP, approveDisable = false, signApproveDisable = false, rejectDisable = false, reassignDisable = false, infoDisable = false, onApprove, onSignApprove, onReject, onReAssign, onMoreInfo, } = props;
     const isMobile = deviceType === DeviceType.MOBILE;
-    // Calcola direttamente se è un workflow di firma per evitare flickering durante il render
+    // Calcola direttamente se è un workflow di firma per evitare flickering durante il render.
+    // `signFlow`, se fornito, ha la precedenza: chi lo passa conosce la natura
+    // dell'attività (es. categoria del work item) meglio del tipo documento.
     const isSignWorkflow = useMemo(() => {
+        if (signFlow !== undefined)
+            return signFlow;
         if (dtd && dtd.widgets && dtd.widgets.length > 0) {
             return isSign4TopEnabled(dtd.widgets);
         }
         return false;
-    }, [dtd]);
-    return (_jsx(StyledWorkFlowOperationButtonsContainer, { "$isMobile": isMobile, children: isSignWorkflow ? (_jsxs(_Fragment, { children: [_jsx(TMButton, { btnStyle: isMobile ? 'toolbar' : 'advanced', showTooltip: isMobile, icon: _jsx(IconSignaturePencil, {}), caption: SDKUI_Localizator.SignatureAndApprove, width: "160px", disabled: signApproveDisable, onClick: () => !signApproveDisable && onSignApprove?.(), onMouseDown: e => e.stopPropagation(), advancedColor: "#1a9a49", color: "success" }), _jsx(TMButton, { btnStyle: isMobile ? 'toolbar' : 'advanced', showTooltip: isMobile, icon: _jsx(IconCloseOutline, {}), caption: SDKUI_Localizator.Reject, disabled: rejectDisable, onClick: () => !rejectDisable && onReject?.(), onMouseDown: e => e.stopPropagation(), advancedColor: TMColors.error, color: "error" }), _jsx(TMButton, { btnStyle: isMobile ? 'toolbar' : 'advanced', showTooltip: isMobile, icon: _jsx(IconInfo, { fontSize: 16 }), caption: SDKUI_Localizator.MoreInformation, width: "180px", disabled: infoDisable, onClick: () => !infoDisable && onMoreInfo?.(), onMouseDown: e => e.stopPropagation(), advancedColor: TMColors.info, color: "info" })] })) : (_jsxs(_Fragment, { children: [_jsx(TMButton, { btnStyle: isMobile ? 'toolbar' : 'advanced', showTooltip: isMobile, icon: _jsx(IconApply, {}), caption: SDKUI_Localizator.Approve, disabled: approveDisable, onClick: () => !approveDisable && onApprove?.(), advancedColor: "#1a9a49", color: "success" }), _jsx(TMButton, { btnStyle: isMobile ? 'toolbar' : 'advanced', showTooltip: isMobile, icon: _jsx(IconCloseOutline, {}), caption: SDKUI_Localizator.Reject, disabled: rejectDisable, onClick: () => !rejectDisable && onReject?.(), advancedColor: TMColors.error, color: "error" }), _jsx(TMButton, { btnStyle: isMobile ? 'toolbar' : 'advanced', showTooltip: isMobile, icon: _jsx(IconUser, { fontSize: 16 }), caption: SDKUI_Localizator.Reassign, disabled: reassignDisable, onClick: () => !reassignDisable && onReAssign?.(), advancedColor: TMColors.tertiary, color: "tertiary" }), _jsx(TMButton, { btnStyle: isMobile ? 'toolbar' : 'advanced', showTooltip: isMobile, icon: _jsx(IconInfo, { fontSize: 16 }), caption: SDKUI_Localizator.MoreInformation, width: "180px", disabled: infoDisable, onClick: () => !infoDisable && onMoreInfo?.(), advancedColor: TMColors.info, color: "info" })] })) }));
+    }, [dtd, signFlow]);
+    return (_jsx(StyledWorkFlowOperationButtonsContainer, { "$isMobile": isMobile, children: isSignWorkflow ? (_jsxs(_Fragment, { children: [_jsx(TMButton, { btnStyle: isMobile ? 'toolbar' : 'advanced', showTooltip: isMobile, icon: _jsx(IconSignaturePencil, {}), caption: SDKUI_Localizator.SignatureAndApprove, width: "160px", disabled: signApproveDisable, onClick: () => !signApproveDisable && onSignApprove?.(), onMouseDown: e => e.stopPropagation(), advancedColor: "#1a9a49", color: "success" }), _jsx(TMButton, { btnStyle: isMobile ? 'toolbar' : 'advanced', showTooltip: isMobile, icon: _jsx(IconCloseOutline, {}), caption: SDKUI_Localizator.Reject, disabled: rejectDisable, onClick: () => !rejectDisable && onReject?.(), onMouseDown: e => e.stopPropagation(), advancedColor: TMColors.error, color: "error" }), onMoreInfo && (_jsx(TMButton, { btnStyle: isMobile ? 'toolbar' : 'advanced', showTooltip: isMobile, icon: _jsx(IconInfo, { fontSize: 16 }), caption: SDKUI_Localizator.MoreInformation, width: "180px", disabled: infoDisable, onClick: () => !infoDisable && onMoreInfo?.(), onMouseDown: e => e.stopPropagation(), advancedColor: TMColors.info, color: "info" }))] })) : (_jsxs(_Fragment, { children: [_jsx(TMButton, { btnStyle: isMobile ? 'toolbar' : 'advanced', showTooltip: isMobile, icon: _jsx(IconApply, {}), caption: SDKUI_Localizator.Approve, disabled: approveDisable, onClick: () => !approveDisable && onApprove?.(), advancedColor: "#1a9a49", color: "success" }), _jsx(TMButton, { btnStyle: isMobile ? 'toolbar' : 'advanced', showTooltip: isMobile, icon: _jsx(IconCloseOutline, {}), caption: SDKUI_Localizator.Reject, disabled: rejectDisable, onClick: () => !rejectDisable && onReject?.(), advancedColor: TMColors.error, color: "error" }), onReAssign && (_jsx(TMButton, { btnStyle: isMobile ? 'toolbar' : 'advanced', showTooltip: isMobile, icon: _jsx(IconUser, { fontSize: 16 }), caption: SDKUI_Localizator.Reassign, disabled: reassignDisable, onClick: () => !reassignDisable && onReAssign?.(), advancedColor: TMColors.tertiary, color: "tertiary" })), onMoreInfo && (_jsx(TMButton, { btnStyle: isMobile ? 'toolbar' : 'advanced', showTooltip: isMobile, icon: _jsx(IconInfo, { fontSize: 16 }), caption: SDKUI_Localizator.MoreInformation, width: "180px", disabled: infoDisable, onClick: () => !infoDisable && onMoreInfo?.(), advancedColor: TMColors.info, color: "info" }))] })) }));
 };
 export const WorkFlowApproveRejectPopUp = ({ TID = 0, DID = 0, deviceType = DeviceType.DESKTOP, isReject, selectedItems = [], onClose, onCompleted }) => {
     const { refreshWorkflowApprove } = useWorkflowApprove();

package/lib/components/features/workflow/diagram/WorkitemRecipientsEditor.d.ts

@@ -1,7 +1,9 @@
 import React from 'react';
 import { QueryDescriptor } from '@topconsultnpm/sdk-ts';
 import { WorkItemActor } from './RecipientList';
-export declare const RecipientsContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const RecipientsContainer: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: React.CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
 export declare const tosToActors: (tosString: string) => {
     andRecipients: WorkItemActor[];
     orRecipients: WorkItemActor[];

package/lib/components/forms/Login/ChangePasswordInputs.d.ts

@@ -11,4 +11,6 @@ interface ChangePasswordInputsProps {
 }
 declare const ChangePasswordInputs: React.FC<ChangePasswordInputsProps>;
 export default ChangePasswordInputs;
-export declare const Divider: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const Divider: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: React.CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;

package/lib/components/grids/TMBlogAttachments.js

@@ -1,10 +1,13 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { SDK_Globals } from "@topconsultnpm/sdk-ts";
-import { getAttachmentInfo, lightenColor, removeFileExtension } from "./TMBlogsPostUtils";
+import { findFileItemByDraftID, getAttachmentInfo, lightenColor, removeFileExtension } from "./TMBlogsPostUtils";
 import TMDcmtIcon from "../features/documents/TMDcmtIcon";
 import { IconAttachment } from "../../helper";
+import { getFileItemLinkUrl } from "../base/TMFileManagerUtils";
 const TMBlogAttachments = (props) => {
     const { layoutMode, attachments, isSelected, isLoading = false, searchText, dcmtTypeDescriptors, treeFs, draftLatestInfoMap, archivedDocumentMap, handleAttachmentFocus, openDcmtForm } = props;
+    // Ritorna l'url del link associato all'allegato: gli allegati che sono link non hanno un documento da scaricare o da aprire nella form
+    const getAttachmentLinkUrl = (blogPostAttachment) => getFileItemLinkUrl(findFileItemByDraftID(treeFs, blogPostAttachment.draftID) ?? undefined);
     const handleMouseEnter = (e, blogPostAttachment, name, fileExt) => {
         e.currentTarget.style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.15)';
         e.currentTarget.style.backgroundColor = isSelected ? lightenColor("#135596", 40) : '#cfcfcf';
@@ -18,12 +21,20 @@ const TMBlogAttachments = (props) => {
         handleAttachmentFocus(undefined);
     };
     const onDoubleClick = (e, blogPostAttachment, name, fileExt) => {
+        // i link non hanno un documento da aprire: il doppio click (su icona o testo) apre l'url in un nuovo tab
+        const linkUrl = getAttachmentLinkUrl(blogPostAttachment);
+        if (linkUrl) {
+            window.open(linkUrl, '_blank', 'noopener,noreferrer');
+            return;
+        }
         const archiveID = SDK_Globals.tmSession?.SessionDescr?.archiveID;
         const fileName = `${removeFileExtension(name)}_${archiveID}_${blogPostAttachment.tid}_${blogPostAttachment.did}.${fileExt}`;
         openDcmtForm({ TID: blogPostAttachment.tid, DID: blogPostAttachment.did, fileName });
     };
     return _jsx("div", { style: { width: "100%", marginTop: "5px", overflow: "hidden" }, children: attachments.map((blogPostAttachment, index) => {
             const { name, nameElement, tooltipContent, fileExt, archivedDocumentsExist, draftExist, isSigned } = getAttachmentInfo(blogPostAttachment, treeFs, draftLatestInfoMap, archivedDocumentMap, dcmtTypeDescriptors, isSelected, searchText);
+            // i link non hanno un file associato: l'icona non deve avviare il download
+            const isLink = getAttachmentLinkUrl(blogPostAttachment) !== undefined;
             return _jsx("div", { onDoubleClick: (e) => !isLoading && onDoubleClick(e, blogPostAttachment, name, fileExt), onMouseEnter: (e) => !isLoading && handleMouseEnter(e, blogPostAttachment, name, fileExt), onMouseLeave: (e) => !isLoading && handleMouseLeave(e), style: {
                     display: layoutMode === "extended" ? "inline-flex" : "flex",
                     padding: '4px 8px',
@@ -63,7 +74,7 @@ const TMBlogAttachments = (props) => {
                                     }
                                     ` })] })) : (_jsxs(_Fragment, { children: [(!archivedDocumentsExist && !draftExist) ?
                                 _jsx(IconAttachment, { style: { marginRight: "5px", flexShrink: 0 } }) :
-                                _jsx("div", { style: { marginRight: "10px", flexShrink: 0, width: isSigned ? "40px" : undefined }, children: _jsx(TMDcmtIcon, { tid: blogPostAttachment.tid, did: blogPostAttachment.did, fileExtension: fileExt, downloadMode: 'openInNewWindow', tooltipContent: tooltipContent, isSigned: isSigned }) }), _jsx("span", { title: layoutMode === 'compact' ? name + " (DID: " + blogPostAttachment.did + ")" : undefined, style: {
+                                _jsx("div", { style: { marginRight: "10px", flexShrink: 0, width: isSigned ? "40px" : undefined }, children: _jsx(TMDcmtIcon, { tid: blogPostAttachment.tid, did: blogPostAttachment.did, fileExtension: fileExt, downloadMode: isLink ? 'none' : 'openInNewWindow', tooltipContent: tooltipContent, isSigned: isSigned }) }), _jsx("span", { title: layoutMode === 'compact' ? name + " (DID: " + blogPostAttachment.did + ")" : undefined, style: {
                                     whiteSpace: 'nowrap',
                                     overflow: 'hidden',
                                     textOverflow: 'ellipsis',

package/lib/components/grids/TMBlogHeader.js

@@ -4,7 +4,11 @@ import TMDropDown from "../editors/TMDropDown";
 import TMTreeDropDown from "../editors/TMTreeDropDown";
 import { TMSearchBar } from "../sidebar/TMHeader";
 const TMBlogHeader = (props) => {
-    const { isVisible, layoutMode, height, width, allPosts, postsToShow, onPostsToShowChange, categoryIdDataSource, appliedCategoryIdFilters, setAppliedCategoryIdFilters, searchText, onSearchChange } = props;
+    const { isVisible, layoutMode, height, width, 
+    // Difensivo: un chiamante che passa una bacheca non ancora caricata (o
+    // assente perche' il ramo blog e' fallito lato server) non deve far
+    // esplodere l'header sulla lettura di length.
+    allPosts = [], postsToShow, onPostsToShowChange, categoryIdDataSource, appliedCategoryIdFilters, setAppliedCategoryIdFilters, searchText, onSearchChange } = props;
     // Data source for the number of posts to display in the UI
     const postsToShowDataSource = [
         { value: 30, display: SDKUI_Localizator.Latest + ' 30' },

package/lib/components/grids/TMBlogsPost.d.ts

@@ -86,6 +86,8 @@ interface TMBlogsPostProps {
     addTaskCallback?: (task: TaskDescriptor) => Promise<void>;
     handleNavigateToWGs?: (value: HomeBlogPost | number) => Promise<void>;
     handleNavigateToDossiers?: (value: HomeBlogPost | number) => Promise<void>;
+    /** Apre la pratica CaseFlow di una notizia con `classID === 'CF'` (bacheca Home V6). */
+    handleNavigateToCaseflows?: (value: HomeBlogPost | number) => Promise<void>;
 }
 declare const TMBlogsPost: (props: TMBlogsPostProps) => React.JSX.Element;
 export default TMBlogsPost;

package/lib/components/grids/TMBlogsPost.js

@@ -5,6 +5,7 @@ import { ContextMenu as TMContextMenu } from "../NewComponents/ContextMenu";
 import { SDKUI_Localizator, Globalization, getExceptionMessage, TMConditionalWrapper, getMoreInfoTasksForDocument, taskModalSizes } from "../../helper";
 import TMToppyMessage from "../../helper/TMToppyMessage";
 import { useDcmtOperations } from "../../hooks/useDcmtOperations";
+import { CaseFlowService } from "../../services/caseflow/CaseFlowService";
 import { DownloadTypes, FormModes } from "../../ts";
 import { TMColors } from "../../utils/theme";
 import ShowAlert from "../base/TMAlert";
@@ -21,7 +22,11 @@ import TMTaskForm from "../features/tasks/TMTaskForm";
 import { useDeviceType } from "../base/TMDeviceProvider";
 let localAbortController = new AbortController();
 const TMBlogsPost = (props) => {
-    const { scrollToSelected, id, posts, displayMode = "stacked", height = "100%", width = "100%", scrollToBottom = true, header, showExtendedAttachments = true, treeFs, draftLatestInfoMap, archivedDocumentMap, context, participants, contextMenuParams = {
+    const { scrollToSelected, id, 
+    // Difensivo: `posts` e' obbligatoria nei tipi, ma a runtime puo' arrivare
+    // undefined (dato non ancora caricato o risposta parziale del server):
+    // il default evita i crash su filter/length.
+    posts = [], displayMode = "stacked", height = "100%", width = "100%", scrollToBottom = true, header, showExtendedAttachments = true, treeFs, draftLatestInfoMap, archivedDocumentMap, context, participants, contextMenuParams = {
         isShowHideFilterEnabled: true,
         isShowHideIDEnaled: true,
         isCommentEnabled: false,
@@ -32,7 +37,7 @@ const TMBlogsPost = (props) => {
         isRestoreEnabled: false,
         isRefreshEnabled: false,
         isCreateContextualTask: false,
-    }, showFloatingCommentButton = false, showCommentFormCallback, refreshCallback, showId, setShowId, refreshHomePageNews, markBlogAsRead, externalBlogPost, resetExternalBlogPost, visible = true, allTasks = [], getAllTasks, deleteTaskByIdsCallback, addTaskCallback, editTaskCallback, afterTaskSaved, handleNavigateToWGs, handleNavigateToDossiers, } = props;
+    }, showFloatingCommentButton = false, showCommentFormCallback, refreshCallback, showId, setShowId, refreshHomePageNews, markBlogAsRead, externalBlogPost, resetExternalBlogPost, visible = true, allTasks = [], getAllTasks, deleteTaskByIdsCallback, addTaskCallback, editTaskCallback, afterTaskSaved, handleNavigateToWGs, handleNavigateToDossiers, handleNavigateToCaseflows, } = props;
     const { abortController, showWaitPanel, waitPanelTitle, showPrimary, waitPanelTextPrimary, waitPanelValuePrimary, waitPanelMaxValuePrimary, showSecondary, waitPanelTextSecondary, waitPanelValueSecondary, waitPanelMaxValueSecondary, downloadDcmtsAsync } = useDcmtOperations();
     // Get the current device type (e.g., mobile, tablet, desktop) using a custom hook.
     const deviceType = useDeviceType();
@@ -292,6 +297,8 @@ const TMBlogsPost = (props) => {
             handleNavigateToWGs(blogPost);
         if (handleNavigateToDossiers && id && blogPost.classID === 'DS')
             handleNavigateToDossiers(blogPost);
+        if (handleNavigateToCaseflows && id && blogPost.classID === 'CF')
+            handleNavigateToCaseflows(blogPost);
     };
     const handleKeyDown = (event) => {
         if (!selectedItem.length)
@@ -324,6 +331,9 @@ const TMBlogsPost = (props) => {
                 if (handleNavigateToDossiers && item.id && classItemID === 'DS') {
                     handleNavigateToDossiers(item);
                 }
+                if (handleNavigateToCaseflows && item.id && classItemID === 'CF') {
+                    handleNavigateToCaseflows(item);
+                }
                 break;
             default:
                 break;
@@ -367,6 +377,17 @@ const TMBlogsPost = (props) => {
                             result.push({ rowIndex: currentBlog.id, id1: currentBlog.id, id2: currentBlog.id, resultType: ResultTypes.ERROR, description: getExceptionMessage(err) });
                         });
                         break;
+                    case 'CF':
+                        // La notizia porta il solo CFIID: il template (cftid) che l'API
+                        // richiede lo risolve CaseFlowService.setFollow.
+                        await CaseFlowService.setFollow(currentBlog.id, false).then(async () => {
+                            result.push({ rowIndex: currentBlog.id, id1: currentBlog.id, id2: currentBlog.id, description: SDKUI_Localizator.OperationSuccess, resultType: ResultTypes.SUCCESS });
+                            refreshHomePageNews?.();
+                        })
+                            .catch((err) => {
+                            result.push({ rowIndex: currentBlog.id, id1: currentBlog.id, id2: currentBlog.id, resultType: ResultTypes.ERROR, description: getExceptionMessage(err) });
+                        });
+                        break;
                     default:
                         ShowAlert({ message: 'TODO', mode: 'warning', title: SDKUI_Localizator.Unfollow, duration: 3000 });
                         break;
@@ -570,7 +591,7 @@ const TMBlogsPost = (props) => {
                 beginGroup: true
             });
         }
-        if (targetItem && Boolean(classId && (classId === 'WG' || classId === 'DS'))) {
+        if (targetItem && Boolean(classId && (classId === 'WG' || classId === 'DS' || classId === 'CF'))) {
             menuItems.push({
                 icon: _jsx("span", { className: "dx-icon-eyeclose" }),
                 name: SDKUI_Localizator.Unfollow,
@@ -632,6 +653,12 @@ const TMBlogsPost = (props) => {
                 else
                     console.log("Working Group reference missing objID");
                 break;
+            case ObjectClasses.CaseFlowInstance:
+                if (ref.objID)
+                    handleNavigateToCaseflows?.(ref.objID);
+                else
+                    console.log("CaseFlow instance reference missing objID");
+                break;
             // Handle other object types as needed
             default:
                 console.warn(`Unhandled object type: ${ref.objClass}`);
@@ -687,7 +714,7 @@ const TMBlogsPost = (props) => {
                                                             textDecoration: blogPost.isDel ? 'line-through' : 'none',
                                                             boxShadow: isFocused ? "0 4px 12px rgba(19, 85, 150, 0.6)" : "none",
                                                             cursor: 'pointer',
-                                                        }, children: [_jsx(BlogPostTitle, { displayMode: displayMode, layoutMode: layoutMode, blogPost: blogPost, isSelected: isSelected, isOwnComment: isOwnComment, searchText: searchText, isSys: isSys, isHomeBlogPost: isHomeBlogPost, showId: localShowId, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers }), isNew && _jsx(NewBadge, { layoutMode: layoutMode }), _jsx("div", { style: { fontSize: '1rem', color: "#000", marginTop: "10px", overflow: "hidden" }, children: _jsx(TMHtmlContentDisplay, { markup: blogPost.description ?? '-', searchText: searchText, isSelected: isSelected }) }), showExtendedAttachments && blogPost.attachments && blogPost.attachments.length > 0 && (_jsx(TMBlogAttachments, { attachments: blogPost.attachments, layoutMode: layoutMode, isSelected: isSelected, isLoading: !descriptorsLoaded, searchText: searchText, dcmtTypeDescriptors: dcmtTypeDescriptors, treeFs: treeFs, draftLatestInfoMap: draftLatestInfoMap, archivedDocumentMap: archivedDocumentMap, handleAttachmentFocus: handleFocusedAttachment, openDcmtForm: openDcmtForm }))] }, `${id}-blogpost-${blogPost.id}`) })] }, "blog-post-wrapper-" + id + "-" + blogPost.id);
+                                                        }, children: [_jsx(BlogPostTitle, { displayMode: displayMode, layoutMode: layoutMode, blogPost: blogPost, isSelected: isSelected, isOwnComment: isOwnComment, searchText: searchText, isSys: isSys, isHomeBlogPost: isHomeBlogPost, showId: localShowId, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers, handleNavigateToCaseflows: handleNavigateToCaseflows }), isNew && _jsx(NewBadge, { layoutMode: layoutMode }), _jsx("div", { style: { fontSize: '1rem', color: "#000", marginTop: "10px", overflow: "hidden" }, children: _jsx(TMHtmlContentDisplay, { markup: blogPost.description ?? '-', searchText: searchText, isSelected: isSelected }) }), showExtendedAttachments && blogPost.attachments && blogPost.attachments.length > 0 && (_jsx(TMBlogAttachments, { attachments: blogPost.attachments, layoutMode: layoutMode, isSelected: isSelected, isLoading: !descriptorsLoaded, searchText: searchText, dcmtTypeDescriptors: dcmtTypeDescriptors, treeFs: treeFs, draftLatestInfoMap: draftLatestInfoMap, archivedDocumentMap: archivedDocumentMap, handleAttachmentFocus: handleFocusedAttachment, openDcmtForm: openDcmtForm }))] }, `${id}-blogpost-${blogPost.id}`) })] }, "blog-post-wrapper-" + id + "-" + blogPost.id);
                                     }), _jsx("div", { ref: bottomRef })] }), _jsx(TMContextMenu, { items: menuItems, target: `#${id}-blogs-wrapper`, externalControl: {
                                     visible: menuVisible,
                                     position: menuPosition,

package/lib/components/grids/TMBlogsPostUtils.d.ts

@@ -109,6 +109,7 @@ interface BlogPostTitleProps {
     showId: boolean;
     handleNavigateToWGs?: (blogPost: BlogPost | HomeBlogPost) => void;
     handleNavigateToDossiers?: (blogPost: BlogPost | HomeBlogPost) => void;
+    handleNavigateToCaseflows?: (blogPost: BlogPost | HomeBlogPost) => void;
 }
 export declare const BlogPostTitle: (props: BlogPostTitleProps) => React.JSX.Element;
 export declare const stripHtml: (html: string) => string;

package/lib/components/grids/TMBlogsPostUtils.js

@@ -162,8 +162,16 @@ export const getDcmtTypeDescriptor = async (blogPosts) => {
     return dcmtTypeMap;
 };
 export const BlogPostHomeHeader = (header, classId, isSelected, searchText, headerClickCallback) => {
+    // 'CF' = istanza di CaseFlow (bacheca Home V6). Attenzione: nel mondo dei
+    // task PdGs.CF indica invece la pratica-dossier; qui il dominio e' il
+    // ClassID di HomeBlogPost, dove 'DS' e' la pratica e 'CF' la pratica CaseFlow.
     const isWorkGroup = classId === 'WG';
-    const iconColor = isSelected ? '#ffffff' : isWorkGroup ? PDGS_COLORS.WORKING_GROUP : PDGS_COLORS.DOSSIER;
+    const isCaseFlow = classId === 'CF';
+    const iconColor = isSelected
+        ? '#ffffff'
+        : isWorkGroup ? PDGS_COLORS.WORKING_GROUP
+            : isCaseFlow ? PDGS_COLORS.CASEFLOW
+                : PDGS_COLORS.DOSSIER;
     return (_jsxs("div", { style: {
             display: "flex",
             alignItems: "center",
@@ -171,7 +179,7 @@ export const BlogPostHomeHeader = (header, classId, isSelected, searchText, head
             fontWeight: "bold",
             color: isSelected ? "#fff" : TMColors.primary,
             gap: "4px",
-        }, children: [_jsx(TMTooltip, { content: isWorkGroup ? SDKUI_Localizator.WorkGroup : SDKUI_Localizator.Dossier, children: isWorkGroup ? (_jsx(IconMenuCAWorkingGroups, { color: iconColor, fontSize: 28, onClick: headerClickCallback })) : (_jsx(IconCADossier, { color: iconColor, fontSize: 28, onClick: headerClickCallback })) }), _jsx("div", { onClick: headerClickCallback, style: {
+        }, children: [_jsx(TMTooltip, { content: isWorkGroup ? SDKUI_Localizator.WorkGroup : isCaseFlow ? "CaseFlow" : SDKUI_Localizator.Dossier, children: isWorkGroup ? (_jsx(IconMenuCAWorkingGroups, { color: iconColor, fontSize: 28, onClick: headerClickCallback })) : isCaseFlow ? (_jsx(IconCADossier, { color: iconColor, fontSize: 28, onClick: headerClickCallback })) : (_jsx(IconCADossier, { color: iconColor, fontSize: 28, onClick: headerClickCallback })) }), _jsx("div", { onClick: headerClickCallback, style: {
                     whiteSpace: "nowrap",
                     overflow: "hidden",
                     textOverflow: "ellipsis",
@@ -218,7 +226,7 @@ export const removeFileExtension = (filename) => {
     return filename.includes('.') ? filename.substring(0, filename.lastIndexOf('.')) : filename;
 };
 export const BlogPostTitle = (props) => {
-    const { displayMode, layoutMode, blogPost, isSelected, isOwnComment, searchText, isSys, isHomeBlogPost, showId, handleNavigateToWGs, handleNavigateToDossiers } = props;
+    const { displayMode, layoutMode, blogPost, isSelected, isOwnComment, searchText, isSys, isHomeBlogPost, showId, handleNavigateToWGs, handleNavigateToDossiers, handleNavigateToCaseflows } = props;
     const showOwnerBadge = (displayMode === "stacked" || !isOwnComment) && layoutMode === "extended";
     let subtitle = "";
     if (isHomeBlogPost) {
@@ -239,6 +247,9 @@ export const BlogPostTitle = (props) => {
         if (handleNavigateToDossiers && blogPost.id && blogPost.classID === 'DS') {
             handleNavigateToDossiers(blogPost);
         }
+        if (handleNavigateToCaseflows && blogPost.id && blogPost.classID === 'CF') {
+            handleNavigateToCaseflows(blogPost);
+        }
     };
     return _jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [showOwnerBadge && (_jsx("div", { style: { width: "40px", height: "40px", flexShrink: 0 }, children: OwnerInitialsBadge(blogPost) })), _jsxs("div", { style: {
                     display: "flex",

package/lib/components/layout/panelManager/TMPanelManagerContainer.d.ts

@@ -6,6 +6,7 @@ interface TMPanelManagerContainerProps {
     direction: TMPanelDirection;
     parentId?: string;
     minPanelSizePx?: number;
+    gutterSizePx?: number;
 }
 declare const TMPanelManagerContainer: (props: TMPanelManagerContainerProps) => React.JSX.Element | null;
 export default TMPanelManagerContainer;