@topconsultnpm/sdkui-react 6.22.0-dev2.16 → 6.22.0-dev2.18

package/lib/components/editors/TMDropDown.js

@@ -1,11 +1,13 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
-import styled from "styled-components";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import styled, { css } from "styled-components";
 import { FontSize, TMColors } from '../../utils/theme';
 import { StyledEditorContainer, StyledEditorIcon, StyledEditorLabel, TMEditorsDefaultBorderRadius, editorColorManager } from "./TMEditorStyled";
 import TMLayoutContainer, { TMLayoutItem } from "../base/TMLayout";
 import TMVilViewer from "../base/TMVilViewer";
 import TMTooltip from "../base/TMTooltip";
+import { SDKUI_Localizator } from "../../helper";
 const StyledDropDownWrapper = styled.div `
   position: relative;
   width: ${props => props.$width};
@@ -54,9 +56,199 @@ const StyledDropDownEditorButton = styled.div `
     align-items: center;
     cursor: pointer;
 `;
-const TMDropDown = ({ validationItems = [], disabled = false, elementStyle, isModifiedWhen, labelPosition = 'left', label, icon, width = '100%', fontSize = FontSize.defaultFontSize, dataSource, value, onValueChanged, buttons = [], placeHolder, }) => {
+// Variante filtrabile: un input di testo con la stessa resa grafica della select nativa
+const StyledSearchInput = styled.input `
+    width: 100%;
+    padding: 5px 35px 3px 9px;
+    border: 1px solid;
+    border-color: ${props => props.$isModified ? TMColors.isModified : TMColors.border_normal};
+    border-bottom: ${props => (props.$vil.length > 0) ? '3px' : '1px'} solid;
+    border-bottom-color: ${props => (props.$vil.length === 0) ? !props.$isModified ? TMColors.border_normal : TMColors.isModified : editorColorManager(props.$vil)};
+    color: ${props => !props.$disabled ? (props.$vil.length === 0 ? (!props.$isModified ? TMColors.text_normal : TMColors.isModified) : editorColorManager(props.$vil)) : TMColors.disabled};
+    border-radius: ${props => props.$borderRadius ?? TMEditorsDefaultBorderRadius};
+    font-size: ${props => props.$fontSize};
+    background-color: ${props => props.$disabled ? '#F5F5F5' : 'white'};
+    text-overflow: ellipsis;
+
+    &:focus {
+        outline: none;
+        border: ${props => props.$isModified ? `1px solid ${TMColors.isModified}` : '1px solid rgb(180,180,180)'};
+        border-bottom: 2px solid;
+        border-bottom-color: ${props => (props.$vil.length === 0) ? !props.$isModified ? TMColors.primary : TMColors.isModified : editorColorManager(props.$vil)};
+    }
+`;
+const OPTIONS_PANEL_MAX_HEIGHT = 220;
+const OPTIONS_PANEL_MIN_HEIGHT = 80;
+const OPTIONS_PANEL_MARGIN = 4;
+// L'elenco aperto con usePortal esce dal contenitore dell'editor: deve stare sopra tutto ciò che può trovarsi nella stessa pagina
+const DROPDOWN_OPTIONS_PANEL_Z_INDEX = 100001;
+const optionsPanelCss = css `
+    overflow-y: auto;
+    background-color: white;
+    border: 1px solid ${TMColors.border_normal};
+    border-radius: ${TMEditorsDefaultBorderRadius};
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
+`;
+// Elenco ancorato all'editor: resta nel flusso del DOM e quindi soggetto al clipping dei contenitori con overflow
+const StyledOptionsPanel = styled.div `
+    ${optionsPanelCss}
+    position: absolute;
+    top: calc(100% + 2px);
+    left: 0;
+    right: 0;
+    z-index: 10001;
+    max-height: ${OPTIONS_PANEL_MAX_HEIGHT}px;
+`;
+// Variante usePortal: posizione calcolata rispetto alla finestra, così l'elenco non viene tagliato da nessun contenitore
+const StyledPortalOptionsPanel = styled.div `
+    ${optionsPanelCss}
+    position: fixed;
+    left: ${props => props.$left}px;
+    ${props => props.$top !== undefined ? `top: ${props.$top}px;` : ''}
+    ${props => props.$bottom !== undefined ? `bottom: ${props.$bottom}px;` : ''}
+    width: ${props => props.$width}px;
+    z-index: ${DROPDOWN_OPTIONS_PANEL_Z_INDEX};
+    max-height: ${props => props.$maxHeight}px;
+`;
+const StyledOption = styled.div `
+    padding: 5px 9px;
+    font-size: ${props => props.$fontSize};
+    cursor: pointer;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-weight: ${props => props.$isSelected ? 600 : 'normal'};
+    background-color: ${props => props.$isHighlighted ? TMColors.primary_container : 'transparent'};
+`;
+const StyledNoOptions = styled.div `
+    padding: 5px 9px;
+    font-size: ${props => props.$fontSize};
+    color: ${TMColors.disabled};
+`;
+// L'elenco si apre sotto l'editor se c'è spazio, altrimenti sopra, e in ogni caso non esce dalla finestra
+const calcOptionsPanelPosition = (rect) => {
+    const spaceBelow = window.innerHeight - rect.bottom - OPTIONS_PANEL_MARGIN;
+    const spaceAbove = rect.top - OPTIONS_PANEL_MARGIN;
+    const openUpwards = spaceBelow < OPTIONS_PANEL_MAX_HEIGHT && spaceAbove > spaceBelow;
+    const availableHeight = openUpwards ? spaceAbove : spaceBelow;
+    return {
+        left: Math.max(OPTIONS_PANEL_MARGIN, Math.min(rect.left, window.innerWidth - rect.width - OPTIONS_PANEL_MARGIN)),
+        top: openUpwards ? undefined : rect.bottom + OPTIONS_PANEL_MARGIN,
+        bottom: openUpwards ? window.innerHeight - rect.top + OPTIONS_PANEL_MARGIN : undefined,
+        width: rect.width,
+        maxHeight: Math.max(OPTIONS_PANEL_MIN_HEIGHT, Math.min(OPTIONS_PANEL_MAX_HEIGHT, availableHeight)),
+    };
+};
+const TMDropDown = ({ validationItems = [], disabled = false, elementStyle, isModifiedWhen, labelPosition = 'left', label, icon, width = '100%', fontSize = FontSize.defaultFontSize, dataSource, value, searchEnabled = false, usePortal = false, itemRender, onValueChanged, buttons = [], placeHolder, }) => {
     const [isFocused, setIsFocused] = useState(false);
-    const renderedLeftLabelTextBox = () => (_jsxs(TMLayoutContainer, { direction: 'horizontal', children: [icon && _jsx(TMLayoutItem, { width: '20px', children: _jsx(StyledEditorIcon, { "$disabled": disabled, "$vil": validationItems, "$isModified": isModifiedWhen, children: icon }) }), _jsx(TMLayoutItem, { children: _jsxs(StyledEditorContainer, { "$width": width, children: [label && _jsx(StyledEditorLabel, { "$isFocused": isFocused, "$labelPosition": labelPosition, "$disabled": disabled, children: label }), _jsxs(StyledDropDownWrapper, { "$width": width, children: [_jsxs(StyledDropDown, { value: value, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), "$disabled": disabled, disabled: disabled, "$fontSize": fontSize, "$isModified": isModifiedWhen, "$vil": validationItems, onChange: onValueChanged, children: [placeHolder && _jsx("option", { value: "", disabled: true, hidden: true, children: placeHolder }), dataSource?.map((data, index) => (_jsx("option", { value: data.value, children: data.display }, index)))] }), buttons.length > 0 && (_jsx(ButtonsContainer, { children: buttons.map((buttonItem) => (_jsx(StyledDropDownEditorButton, { onClick: buttonItem.onClick, children: _jsx(TMTooltip, { content: buttonItem.text, children: buttonItem.icon }) }, buttonItem.text))) })), _jsx(CustomArrow, {})] }), _jsx(TMVilViewer, { vil: validationItems })] }) })] }));
+    const [isOpen, setIsOpen] = useState(false);
+    const [searchText, setSearchText] = useState('');
+    const [highlightedIndex, setHighlightedIndex] = useState(-1);
+    const [optionsPanelPosition, setOptionsPanelPosition] = useState();
+    const optionsPanelRef = useRef(null);
+    const dropDownWrapperRef = useRef(null);
+    const selectedItem = dataSource?.find(o => String(o.value) === String(value));
+    // A elenco chiuso l'input mostra la voce selezionata, ad elenco aperto il testo digitato
+    const filteredDataSource = (!isOpen || !searchText) ? (dataSource ?? []) : (dataSource ?? []).filter(o => String(o.display ?? '').toLocaleLowerCase().includes(searchText.toLocaleLowerCase()));
+    // Mantiene visibile la voce evidenziata durante la navigazione da tastiera
+    useEffect(() => {
+        if (!isOpen || highlightedIndex < 0)
+            return;
+        const option = optionsPanelRef.current?.children[highlightedIndex];
+        option?.scrollIntoView({ block: 'nearest' });
+    }, [isOpen, highlightedIndex]);
+    // Solo nel portal la posizione va ricalcolata: essendo fissa non segue lo scorrimento o il ridimensionamento del contenitore
+    useEffect(() => {
+        if (!isOpen || !usePortal)
+            return;
+        const updatePosition = () => updateOptionsPanelPosition();
+        window.addEventListener('scroll', updatePosition, true);
+        window.addEventListener('resize', updatePosition);
+        return () => {
+            window.removeEventListener('scroll', updatePosition, true);
+            window.removeEventListener('resize', updatePosition);
+        };
+    }, [isOpen, usePortal]);
+    const updateOptionsPanelPosition = () => {
+        const rect = dropDownWrapperRef.current?.getBoundingClientRect();
+        if (rect)
+            setOptionsPanelPosition(calcOptionsPanelPosition(rect));
+    };
+    const openOptions = () => {
+        if (disabled)
+            return;
+        if (usePortal)
+            updateOptionsPanelPosition();
+        setIsOpen(true);
+        setSearchText('');
+        setHighlightedIndex(dataSource?.findIndex(o => String(o.value) === String(value)) ?? -1);
+    };
+    const closeOptions = () => {
+        setIsOpen(false);
+        setSearchText('');
+        setHighlightedIndex(-1);
+    };
+    const selectItem = (item) => {
+        closeOptions();
+        // La select nativa notifica un ChangeEvent: qui viene ricostruito il solo dato letto dai consumatori (target.value)
+        onValueChanged?.({ target: { value: String(item.value) } });
+    };
+    const onSearchKeyDown = (e) => {
+        switch (e.key) {
+            case 'ArrowDown':
+            case 'ArrowUp':
+                e.preventDefault();
+                if (!isOpen) {
+                    openOptions();
+                    return;
+                }
+                if (filteredDataSource.length <= 0)
+                    return;
+                setHighlightedIndex(prev => {
+                    const delta = e.key === 'ArrowDown' ? 1 : -1;
+                    const next = prev + delta;
+                    if (next < 0)
+                        return filteredDataSource.length - 1;
+                    if (next >= filteredDataSource.length)
+                        return 0;
+                    return next;
+                });
+                break;
+            case 'Enter': {
+                if (!isOpen)
+                    return;
+                e.preventDefault();
+                const item = filteredDataSource[highlightedIndex] ?? filteredDataSource[0];
+                if (item)
+                    selectItem(item);
+                break;
+            }
+            case 'Escape':
+                if (isOpen) {
+                    e.preventDefault();
+                    closeOptions();
+                }
+                break;
+        }
+    };
+    const renderOptions = () => (filteredDataSource.length > 0
+        ? filteredDataSource.map((data, index) => (_jsx(StyledOption, { "$fontSize": fontSize, "$isSelected": String(data.value) === String(value), "$isHighlighted": index === highlightedIndex, onMouseEnter: () => setHighlightedIndex(index), onClick: () => selectItem(data), children: itemRender ? itemRender(data) : data.display }, index)))
+        : _jsx(StyledNoOptions, { "$fontSize": fontSize, children: SDKUI_Localizator.NoDataToDisplay }));
+    // onMouseDown va bloccato: senza preventDefault il blur dell'input chiuderebbe l'elenco prima del click
+    const renderOptionsPanel = () => {
+        if (!isOpen)
+            return null;
+        if (!usePortal) {
+            return (_jsx(StyledOptionsPanel, { ref: optionsPanelRef, onMouseDown: (e) => e.preventDefault(), children: renderOptions() }));
+        }
+        if (!optionsPanelPosition)
+            return null;
+        return createPortal(_jsx(StyledPortalOptionsPanel, { ref: optionsPanelRef, "$left": optionsPanelPosition.left, "$top": optionsPanelPosition.top, "$bottom": optionsPanelPosition.bottom, "$width": optionsPanelPosition.width, "$maxHeight": optionsPanelPosition.maxHeight, onMouseDown: (e) => e.preventDefault(), children: renderOptions() }), document.body);
+    };
+    const renderSearchableDropDown = () => (_jsxs(_Fragment, { children: [_jsx(StyledSearchInput, { value: isOpen ? searchText : (selectedItem?.display ?? ''), placeholder: isOpen ? SDKUI_Localizator.Search : placeHolder, readOnly: disabled, disabled: disabled, "$disabled": disabled, "$fontSize": fontSize, "$isModified": isModifiedWhen, "$vil": validationItems, onFocus: () => { setIsFocused(true); openOptions(); }, onBlur: () => { setIsFocused(false); closeOptions(); }, onClick: () => { if (!isOpen)
+                    openOptions(); }, onChange: (e) => { setSearchText(e.target.value); setIsOpen(true); setHighlightedIndex(0); }, onKeyDown: onSearchKeyDown }), renderOptionsPanel()] }));
+    const renderNativeDropDown = () => (_jsxs(StyledDropDown, { value: value, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), "$disabled": disabled, disabled: disabled, "$fontSize": fontSize, "$isModified": isModifiedWhen, "$vil": validationItems, onChange: onValueChanged, children: [placeHolder && _jsx("option", { value: "", disabled: true, hidden: true, children: placeHolder }), dataSource?.map((data, index) => (_jsx("option", { value: data.value, children: data.display }, index)))] }));
+    const renderedLeftLabelTextBox = () => (_jsxs(TMLayoutContainer, { direction: 'horizontal', children: [icon && _jsx(TMLayoutItem, { width: '20px', children: _jsx(StyledEditorIcon, { "$disabled": disabled, "$vil": validationItems, "$isModified": isModifiedWhen, children: icon }) }), _jsx(TMLayoutItem, { children: _jsxs(StyledEditorContainer, { "$width": width, children: [label && _jsx(StyledEditorLabel, { "$isFocused": isFocused, "$labelPosition": labelPosition, "$disabled": disabled, children: label }), _jsxs(StyledDropDownWrapper, { ref: dropDownWrapperRef, "$width": width, children: [searchEnabled ? renderSearchableDropDown() : renderNativeDropDown(), buttons.length > 0 && (_jsx(ButtonsContainer, { children: buttons.map((buttonItem) => (_jsx(StyledDropDownEditorButton, { onClick: buttonItem.onClick, children: _jsx(TMTooltip, { content: buttonItem.tooltipContent ?? buttonItem.text, children: buttonItem.icon }) }, buttonItem.text))) })), _jsx(CustomArrow, {})] }), _jsx(TMVilViewer, { vil: validationItems })] }) })] }));
     return _jsx("div", { style: elementStyle, children: renderedLeftLabelTextBox() });
 };
 export default TMDropDown;

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

@@ -26,6 +26,7 @@ import { useTMPanelManagerContext } from '../../layout/panelManager/TMPanelManag
 import TMPanelManagerContainer from '../../layout/panelManager/TMPanelManagerContainer';
 import { TMPanelManagerWithPersistenceProvider } from '../../layout/panelManager/TMPanelManagerWithPersistenceProvider';
 import { useWorkflowApprove } from '../../../hooks/useWorkflowApprove';
+import { useCaseFlowApprove } from '../../../hooks/useCaseFlowApprove';
 import TMBlogCommentForm from '../blog/TMBlogCommentForm';
 import WFDiagram from '../workflow/diagram/WFDiagram';
 import TMTooltip from '../../base/TMTooltip';
@@ -116,6 +117,10 @@ const TMDcmtForm = ({ TID, DID, groupId, layoutMode = LayoutModes.Update, formMo
     const [wfError, setWfError] = useState(null);
     const [metadataDcmtOrigin, setMetadataDcmtOrigin] = useState(null);
     const { workflowApproveData, getWorkItemsByDID } = useWorkflowApprove();
+    // Attività delle PRATICHE (CaseFlow) su questo documento. Come per il workflow
+    // la scoperta avviene QUI: da qualunque punto si apra il form, l'utente trova
+    // le sue azioni nel Toppy.
+    const { caseFlowWorkItems, completeCaseFlowWorkItem, rejectCaseFlowWorkItem } = useCaseFlowApprove(TID, DID);
     // Get the current device type (e.g., mobile, tablet, desktop) using a custom hook.
     const deviceType = useDeviceType();
     // This avoids unnecessary re-renders by only recalculating when deviceType changes.
@@ -804,7 +809,10 @@ const TMDcmtForm = ({ TID, DID, groupId, layoutMode = LayoutModes.Update, formMo
         // Verifica che ci siano riferimenti renderizzabili (solo Dossier o WorkingGroup)
         return dcmtReferences.some(ref => ref.objClass === ObjectClasses.Dossier || ref.objClass === ObjectClasses.WorkingGroup);
     }, [allowButtonsRefs, layoutMode, dcmtReferences, isOpenDetails, isOpenMaster]);
-    const isToppyVisible = useMemo(() => Boolean((showToppyForApprove || showToppyForCompleteMoreInfo || showToppyForReferences) && !openS4TViewer && !showTodoDcmtForm && !editPdfForm), [showToppyForApprove, showToppyForCompleteMoreInfo, showToppyForReferences, openS4TViewer, showTodoDcmtForm, editPdfForm]);
+    // Attività di pratica: stesse condizioni dell'approvazione workflow (documento
+    // in consultazione, senza errori, non dentro master/detail).
+    const showToppyForCaseFlow = useMemo(() => layoutMode === LayoutModes.Update && !fetchError && caseFlowWorkItems.length > 0 && !isOpenDetails && !isOpenMaster, [layoutMode, fetchError, caseFlowWorkItems.length, isOpenDetails, isOpenMaster]);
+    const isToppyVisible = useMemo(() => Boolean((showToppyForApprove || showToppyForCompleteMoreInfo || showToppyForReferences || showToppyForCaseFlow) && !openS4TViewer && !showTodoDcmtForm && !editPdfForm), [showToppyForApprove, showToppyForCompleteMoreInfo, showToppyForReferences, showToppyForCaseFlow, openS4TViewer, showTodoDcmtForm, editPdfForm]);
     const isModified = useMemo(() => calcIsModified(formData, formDataOrig), [formData, formDataOrig]);
     const formToolbar = useMemo(() => _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '10px' }, children: [allowNavigation && canPrev != undefined && _jsx("p", { style: { textAlign: 'center', padding: '1px 4px', display: 'flex' }, children: `${itemIndex}/${count}` }), allowNavigation && canPrev != undefined && _jsx(TMSaveFormButtonPrevious, { btnStyle: 'icon', iconColor: 'white', isModified: isModified, formMode: formMode, canPrev: canPrev, onPrev: onPrev }), allowNavigation && canNext != undefined && _jsx(TMSaveFormButtonNext, { btnStyle: 'icon', iconColor: 'white', isModified: isModified, formMode: formMode, canNext: canNext, onNext: onNext }), layoutMode === LayoutModes.Update &&
                 _jsx(ContextMenu, { items: operationItems, trigger: "left", children: _jsx(IconMenuVertical, { color: 'white', cursor: 'pointer' }) }), layoutMode === LayoutModes.Ark &&
@@ -1571,7 +1579,7 @@ const TMDcmtForm = ({ TID, DID, groupId, layoutMode = LayoutModes.Update, formMo
                                                             isEditable: true,
                                                             value: FormulaHelper.addFormulaTag(newFormula.expression)
                                                         }));
-                                                    } }), (isModal && onClose) && _jsx("div", { id: "TMDcmtFormShowConfirmForClose-" + id })] }) }), _jsx(TMToppyDraggableHelpCenter, { isVisible: isToppyVisible, content: _jsx(TMDcmtFormActionButtons, { showToppyForApprove: showToppyForApprove, workItems: workItems, deviceType: deviceType, isMobile: isMobile, handleSignApprove: handleSignApprove, updateShowApprovePopup: updateShowApprovePopup, updateShowRejectPopup: updateShowRejectPopup, updateShowReAssignPopup: updateShowReAssignPopup, updateShowMoreInfoPopup: updateShowMoreInfoPopup, fromDTD: fromDTD, showToppyForCompleteMoreInfo: showToppyForCompleteMoreInfo, moreInfoTasks: moreInfoTasks, setShowCommentForm: setShowCommentForm, showToppyForReferences: showToppyForReferences, dcmtReferences: dcmtReferences, referenceActionMap: referenceActionMap, handleNavigateToReference: handleNavigateToReference, setShowMoreInfoTaskPopup: setShowMoreInfoTaskPopup, setShowMoreInfoTaskTask: setShowMoreInfoTaskTask }) })] }), (showCommentForm && TID && DID) &&
+                                                    } }), (isModal && onClose) && _jsx("div", { id: "TMDcmtFormShowConfirmForClose-" + id })] }) }), _jsx(TMToppyDraggableHelpCenter, { isVisible: isToppyVisible, content: _jsx(TMDcmtFormActionButtons, { showToppyForApprove: showToppyForApprove, workItems: workItems, caseFlowWorkItems: showToppyForCaseFlow ? caseFlowWorkItems : [], onCompleteCaseFlowWorkItem: completeCaseFlowWorkItem, onRejectCaseFlowWorkItem: rejectCaseFlowWorkItem, deviceType: deviceType, isMobile: isMobile, handleSignApprove: handleSignApprove, updateShowApprovePopup: updateShowApprovePopup, updateShowRejectPopup: updateShowRejectPopup, updateShowReAssignPopup: updateShowReAssignPopup, updateShowMoreInfoPopup: updateShowMoreInfoPopup, fromDTD: fromDTD, showToppyForCompleteMoreInfo: showToppyForCompleteMoreInfo, moreInfoTasks: moreInfoTasks, setShowCommentForm: setShowCommentForm, showToppyForReferences: showToppyForReferences, dcmtReferences: dcmtReferences, referenceActionMap: referenceActionMap, handleNavigateToReference: handleNavigateToReference, setShowMoreInfoTaskPopup: setShowMoreInfoTaskPopup, setShowMoreInfoTaskTask: setShowMoreInfoTaskTask }) })] }), (showCommentForm && TID && DID) &&
                             _jsx(TMBlogCommentForm, { maxLength: 500, context: blogCommentFormContext, onClose: handleBlogCommentFormClose, onCustomSave: onBlogCommentFormCustomSave, participants: emptyParticipants, showAttachmentsSection: false, allArchivedDocumentsFileItems: emptyArchivedDocumentsFileItems })] }), renderDcmtOperations, renderFloatingBar] }));
     };
     return (_jsxs("div", { style: { width: '100%', height: '100%' }, children: [(isModal && onClose)

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

@@ -2,9 +2,20 @@ import React from "react";
 import { DcmtTypeDescriptor, TaskDescriptor, ObjectRef } from "@topconsultnpm/sdk-ts";
 import { IWorkItemData } from "../../../ts";
 import { DeviceType } from "../../base/TMDeviceProvider";
+import { CaseFlowDcmtWorkItem } from "../../../hooks/useCaseFlowApprove";
 interface TMDcmtFormActionButtonsProps {
     showToppyForApprove: boolean;
     workItems: Array<IWorkItemData>;
+    /** Attività delle PRATICHE (CaseFlow) pendenti su QUESTO documento. */
+    caseFlowWorkItems?: Array<CaseFlowDcmtWorkItem>;
+    /**
+     * Completa l'attività di pratica. NON usato per la FIRMA: là si apre il viewer
+     * di firma ed è quello, a firma riuscita, a completare — esattamente come per
+     * i work item del workflow.
+     */
+    onCompleteCaseFlowWorkItem?: (item: CaseFlowDcmtWorkItem, comment?: string) => Promise<void>;
+    /** Rifiuta l'attività di pratica con un motivo. */
+    onRejectCaseFlowWorkItem?: (item: CaseFlowDcmtWorkItem, reason: string) => Promise<void>;
     deviceType: DeviceType | undefined;
     isMobile: boolean;
     handleSignApprove: () => void;

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

@@ -1,18 +1,34 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useMemo, useRef, useState } from "react";
 import { ObjectClasses, SDK_Globals } from "@topconsultnpm/sdk-ts";
-import { TASK_MORE_INFO_PREFIX_NAME, SDKUI_Localizator, PDGS_COLORS, calcResponsiveSizes } from "../../../helper";
+import { TASK_MORE_INFO_PREFIX_NAME, SDKUI_Localizator, PDGS_COLORS, calcResponsiveSizes, isSign4TopEnabled } from "../../../helper";
 import { TMColors } from "../../../utils/theme";
 import { StyledReferenceButton } from "../../base/Styled";
 import TMButton from "../../base/TMButton";
 import TMModal from "../../base/TMModal";
 import TMTooltip from "../../base/TMTooltip";
 import { WorkFlowOperationButtons } from "../workflow/TMWorkflowPopup";
+import { getWorkItemActionName, isSignatureWorkItem } from "../../../services/caseflow/caseFlowWorkItemUtils";
 const TMDcmtFormActionButtons = (props) => {
-    const { showToppyForApprove, workItems, deviceType, isMobile, handleSignApprove, updateShowApprovePopup, updateShowRejectPopup, updateShowReAssignPopup, updateShowMoreInfoPopup, fromDTD, showToppyForCompleteMoreInfo, moreInfoTasks, setShowCommentForm, showToppyForReferences, dcmtReferences, referenceActionMap, handleNavigateToReference, setShowMoreInfoTaskPopup, setShowMoreInfoTaskTask } = props;
+    const { showToppyForApprove, workItems, caseFlowWorkItems, onCompleteCaseFlowWorkItem, onRejectCaseFlowWorkItem, deviceType, isMobile, handleSignApprove, updateShowApprovePopup, updateShowRejectPopup, updateShowReAssignPopup, updateShowMoreInfoPopup, fromDTD, showToppyForCompleteMoreInfo, moreInfoTasks, setShowCommentForm, showToppyForReferences, dcmtReferences, referenceActionMap, handleNavigateToReference, setShowMoreInfoTaskPopup, setShowMoreInfoTaskTask } = props;
     const [showAllMoreInfoModal, setShowAllMoreInfoModal] = useState(false);
     const [showAllDossiersModal, setShowAllDossiersModal] = useState(false);
     const [showAllWorkingGroupsModal, setShowAllWorkingGroupsModal] = useState(false);
+    // Rifiuto di un'attività di pratica: il motivo è obbligatorio, quindi si passa
+    // da un dialogo. `busyItemId` disabilita i pulsanti dell'attività in corso.
+    const [rejectingItem, setRejectingItem] = useState(null);
+    const [rejectReason, setRejectReason] = useState('');
+    const [busyItemId, setBusyItemId] = useState(null);
+    const cfItems = useMemo(() => caseFlowWorkItems ?? [], [caseFlowWorkItems]);
+    const runCaseFlowAction = useCallback(async (item, action) => {
+        setBusyItemId(item.workItem.id ?? null);
+        try {
+            await action();
+        }
+        finally {
+            setBusyItemId(null);
+        }
+    }, []);
     const tasksNumber = useMemo(() => moreInfoTasks?.length ?? 0, [moreInfoTasks]);
     const firstTask = useMemo(() => {
         if (!moreInfoTasks || moreInfoTasks.length === 0)
@@ -31,19 +47,63 @@ const TMDcmtFormActionButtons = (props) => {
             return false;
         return true;
     }, [firstTask]);
-    const { hasMoreInfo, hasApprove, hasReferences } = useMemo(() => {
+    const { hasMoreInfo, hasApprove, hasReferences, hasCaseFlow } = useMemo(() => {
         const referencesExist = showToppyForReferences && dcmtReferences?.some(ref => ref.objClass === ObjectClasses.Dossier || ref.objClass === ObjectClasses.WorkingGroup);
         return {
             hasMoreInfo: Boolean(showToppyForCompleteMoreInfo),
             hasApprove: Boolean(showToppyForApprove),
-            hasReferences: Boolean(referencesExist)
+            hasReferences: Boolean(referencesExist),
+            hasCaseFlow: cfItems.length > 0
         };
     }, [
         showToppyForCompleteMoreInfo,
         showToppyForApprove,
         showToppyForReferences,
-        dcmtReferences
+        dcmtReferences,
+        cfItems
     ]);
+    /**
+     * Attività di pratica: contesto (pratica + testo dell'attività) e gli STESSI
+     * pulsanti dei work item del workflow (`WorkFlowOperationButtons`), così le due
+     * provenienze si comportano allo stesso modo davanti all'utente.
+     *
+     * La forma dei pulsanti la decide la CATEGORIA dell'attività, non il tipo
+     * documento: un'approvazione su un tipo abilitato alla firma non deve mostrare
+     * "Firma e approva" (per questo si passa `signFlow`). La firma richiede comunque
+     * il widget Sign4Top sul tipo, altrimenti il viewer non avrebbe come aprirsi.
+     *
+     * Per la FIRMA il pulsante apre il viewer (`handleSignApprove`, lo stesso del
+     * workflow) e il completamento avviene lì a firma riuscita: il form non sa
+     * firmare, e completare qui "a fiducia" chiuderebbe l'attività su un documento
+     * non firmato.
+     */
+    const renderCaseFlowWorkItemCard = (item) => {
+        const { caseflow, workItem } = item;
+        const isBusy = busyItemId === workItem.id;
+        const canSign = !!fromDTD?.widgets && isSign4TopEnabled(fromDTD.widgets);
+        const requiresSignature = isSignatureWorkItem(workItem) && canSign;
+        const description = workItem.description || getWorkItemActionName(caseflow, workItem);
+        return (_jsxs("div", { style: {
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                textAlign: 'center',
+                gap: '10px',
+                cursor: 'default',
+            }, children: [_jsx("div", { style: {
+                        padding: '8px 10px',
+                        maxWidth: '240px',
+                        color: '#FFFFFF',
+                        background: 'linear-gradient(135deg, #7E57C2 0%, #5E35B1 60%, #4527A0 100%)',
+                        border: '1px solid rgba(255,255,255,0.15)',
+                        borderRadius: 10,
+                        boxShadow: '0 8px 20px rgba(0, 0, 50, 0.4)',
+                    }, children: description && _jsx("div", { style: { whiteSpace: 'pre-line' }, children: description }) }), _jsx(WorkFlowOperationButtons, { dtd: fromDTD, deviceType: deviceType, signFlow: requiresSignature, approveDisable: isBusy, signApproveDisable: isBusy, rejectDisable: isBusy, onSignApprove: handleSignApprove, onApprove: onCompleteCaseFlowWorkItem
+                        ? () => void runCaseFlowAction(item, () => onCompleteCaseFlowWorkItem(item))
+                        : undefined, onReject: onRejectCaseFlowWorkItem
+                        ? () => { setRejectReason(''); setRejectingItem(item); }
+                        : undefined })] }, workItem.id));
+    };
     // Raggruppa references per categoria
     const { dossierRefs, workingGroupRefs } = useMemo(() => {
         const dossiers = dcmtReferences?.filter(ref => ref.objClass === ObjectClasses.Dossier) ?? [];
@@ -171,10 +231,17 @@ const TMDcmtFormActionButtons = (props) => {
                         e.currentTarget.style.transform = 'translateY(-50%)';
                     }, children: formatBadgeCount(othersCount) }))] }));
     };
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '10px' }, children: [hasMoreInfo && firstTask && isMoreInfoCardVisible && (_jsx("div", { style: { display: 'flex', gap: "10px", flexDirection: 'column', alignItems: 'center', paddingRight: tasksNumber > 1 ? '36px' : '0' }, children: renderMoreInfoCard(firstTask, tasksNumber > 1) })), hasMoreInfo && isMoreInfoCardVisible && hasApprove && _jsx(Divider, {}), hasApprove && (workItems.length === 1 ?
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '10px' }, children: [hasMoreInfo && firstTask && isMoreInfoCardVisible && (_jsx("div", { style: { display: 'flex', gap: "10px", flexDirection: 'column', alignItems: 'center', paddingRight: tasksNumber > 1 ? '36px' : '0' }, children: renderMoreInfoCard(firstTask, tasksNumber > 1) })), hasMoreInfo && isMoreInfoCardVisible && hasCaseFlow && _jsx(Divider, {}), hasCaseFlow && (_jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: '10px', alignItems: 'center' }, children: cfItems.map(item => renderCaseFlowWorkItemCard(item)) })), hasCaseFlow && hasApprove && _jsx(Divider, {}), hasMoreInfo && isMoreInfoCardVisible && !hasCaseFlow && hasApprove && _jsx(Divider, {}), hasApprove && (workItems.length === 1 ?
                         _jsx(WorkFlowOperationButtons, { dtd: fromDTD, deviceType: deviceType, onApprove: () => updateShowApprovePopup(true), onSignApprove: handleSignApprove, onReject: () => updateShowRejectPopup(true), onReAssign: () => updateShowReAssignPopup(true), onMoreInfo: () => updateShowMoreInfoPopup(true) })
                         :
-                            _jsxs("div", { style: { padding: 10, color: 'white', maxWidth: '180px', borderRadius: 10, background: '#1B1464 0% 0% no-repeat padding-box', border: '1px solid #FFFFFF' }, children: [`Questo documento è associato a ${workItems.length} workitem.`, _jsx("br", {}), `Per approvare, vai alla pagina "Approvazione workflow".`] })), (hasApprove && hasReferences) || (hasMoreInfo && isMoreInfoCardVisible && !hasApprove && hasReferences) ? (_jsx(Divider, {})) : null, hasReferences && (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '10px', alignItems: 'center' }, children: [dossierRefs.length > 0 && (_jsx("div", { style: { paddingRight: dossierRefs.length > 1 ? '36px' : '0' }, children: renderReferenceCard(dossierRefs[0], dossierRefs, dossierRefs.length > 1, () => setShowAllDossiersModal(true)) })), workingGroupRefs.length > 0 && (_jsx("div", { style: { paddingRight: workingGroupRefs.length > 1 ? '36px' : '0' }, children: renderReferenceCard(workingGroupRefs[0], workingGroupRefs, workingGroupRefs.length > 1, () => setShowAllWorkingGroupsModal(true)) }))] }))] }), showAllMoreInfoModal && moreInfoTasks && moreInfoTasks.length > 1 && (_jsx(TMModal, { title: `Altre richieste maggiori informazioni (${moreInfoTasks.length - 1})`, onClose: () => setShowAllMoreInfoModal(false), width: calcResponsiveSizes(deviceType, '450px', '450px', '95%'), height: 'auto', children: _jsx("div", { style: {
+                            _jsxs("div", { style: { padding: 10, color: 'white', maxWidth: '180px', borderRadius: 10, background: '#1B1464 0% 0% no-repeat padding-box', border: '1px solid #FFFFFF' }, children: [`Questo documento è associato a ${workItems.length} workitem.`, _jsx("br", {}), `Per approvare, vai alla pagina "Approvazione workflow".`] })), (hasApprove && hasReferences) || (hasMoreInfo && isMoreInfoCardVisible && !hasApprove && hasReferences) ? (_jsx(Divider, {})) : null, hasReferences && (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '10px', alignItems: 'center' }, children: [dossierRefs.length > 0 && (_jsx("div", { style: { paddingRight: dossierRefs.length > 1 ? '36px' : '0' }, children: renderReferenceCard(dossierRefs[0], dossierRefs, dossierRefs.length > 1, () => setShowAllDossiersModal(true)) })), workingGroupRefs.length > 0 && (_jsx("div", { style: { paddingRight: workingGroupRefs.length > 1 ? '36px' : '0' }, children: renderReferenceCard(workingGroupRefs[0], workingGroupRefs, workingGroupRefs.length > 1, () => setShowAllWorkingGroupsModal(true)) }))] }))] }), rejectingItem && onRejectCaseFlowWorkItem && (_jsx(TMModal, { title: rejectingItem.workItem.rejectLabel || SDKUI_Localizator.Reject, onClose: () => { setRejectingItem(null); setRejectReason(''); }, width: calcResponsiveSizes(deviceType, '450px', '450px', '95%'), height: 'auto', children: _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 12, padding: 15 }, children: [_jsx("div", { style: { fontSize: 13, color: '#555' }, children: `${SDKUI_Localizator.Description}:` }), _jsx("textarea", { value: rejectReason, onChange: (e) => setRejectReason(e.target.value), rows: 4, style: { width: '100%', resize: 'vertical', fontFamily: 'inherit', fontSize: 13, padding: 8 } }), _jsxs("div", { style: { display: 'flex', justifyContent: 'flex-end', gap: 8 }, children: [_jsx(TMButton, { caption: SDKUI_Localizator.Cancel, showTooltip: false, onClick: () => { setRejectingItem(null); setRejectReason(''); } }), _jsx(TMButton, { caption: rejectingItem.workItem.rejectLabel || SDKUI_Localizator.Reject, color: 'error', showTooltip: false, disabled: !rejectReason.trim() || busyItemId === rejectingItem.workItem.id, onClick: () => {
+                                        const item = rejectingItem;
+                                        void runCaseFlowAction(item, async () => {
+                                            await onRejectCaseFlowWorkItem(item, rejectReason.trim());
+                                            setRejectingItem(null);
+                                            setRejectReason('');
+                                        });
+                                    } })] })] }) })), showAllMoreInfoModal && moreInfoTasks && moreInfoTasks.length > 1 && (_jsx(TMModal, { title: `Altre richieste maggiori informazioni (${moreInfoTasks.length - 1})`, onClose: () => setShowAllMoreInfoModal(false), width: calcResponsiveSizes(deviceType, '450px', '450px', '95%'), height: 'auto', children: _jsx("div", { style: {
                         display: 'flex',
                         flexDirection: 'column',
                         gap: '8px',

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

@@ -3,7 +3,7 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import styled from 'styled-components';
 import { LoadIndicator } from 'devextreme-react';
 import { AppModules, DataColumnTypes, DataListViewModes, DcmtTypeListCacheService, LayoutCacheService, LayoutModes, MetadataDataDomains, SDK_Globals, SystemMIDsAsNumber, UserListCacheService, } from '@topconsultnpm/sdk-ts';
-import { deepCompare, formatDateTimeByMetadataFormat, formatNumberByMetadataFormat, generateUniqueColumnKeys, genUniqueId, getColumnFormatInfo, getSearchToolbarVisibility, IconAll, IconBoard, IconDcmtTypeSys, IconDelete, IconMenuVertical, IconPlatform, IconRefresh, IconSearchCheck, IconShow, isApprovalWorkflowView, isSign4TopEnabled, searchResultDescriptorToSimpleArray, searchResultToMetadataValues, SDKUI_Globals, SDKUI_Localizator } from '../../../helper';
+import { customizeSearchByDisplayText, deepCompare, formatDateTimeByMetadataFormat, formatNumberByMetadataFormat, generateUniqueColumnKeys, genUniqueId, getColumnFormatInfo, getDateDisplayText, getNumberDisplayText, getSearchToolbarVisibility, IconAll, IconBoard, IconDcmtTypeSys, IconDelete, IconMenuVertical, IconPlatform, IconRefresh, IconSearchCheck, IconShow, isApprovalWorkflowView, isSign4TopEnabled, searchResultDescriptorToSimpleArray, searchResultToMetadataValues, SDKUI_Globals, SDKUI_Localizator } from '../../../helper';
 import { CounterItemKey } from '../../base/TMCounterContainer';
 import { getDcmtCicoStatus } from '../../../helper/checkinCheckoutManager';
 import { DcmtOperationTypes, SearchResultContext, } from '../../../ts';
@@ -926,8 +926,8 @@ const TMSearchResultGrid = ({ openInOffice, fromDTD, operationItems, allUsers, i
     useEffect(() => {
         updateDataSourceFromDataGrid(dataSource ?? []);
     }, [dataSource]);
-    const { loadDataListsAsync, renderDataListCell, dataListsCache } = useDataListItem();
-    const { loadUsersAsync, renderUserIdViewer, usersCache } = useDataUserIdItem();
+    const { loadDataListsAsync, renderDataListCell, dataListsCache, getDataListItem } = useDataListItem();
+    const { loadUsersAsync, renderUserIdViewer, usersCache, getUserItem, getCompleteUserName } = useDataUserIdItem();
     useEffect(() => {
         // Sincronizza focusedItem con inputFocusedItem dal padre
         if (deepCompare(inputFocusedItem, focusedItem))
@@ -1159,6 +1159,57 @@ const TMSearchResultGrid = ({ openInOffice, fromDTD, operationItems, allUsers, i
         });
         return cols;
     }, [searchResult, dataType, cellRender, getDisplayFormat, dataListsCache, usersCache]);
+    /**
+     * Colonne in cui il testo mostrato è diverso dal valore archiviato: date e numeri formattati, descrizioni
+     * di liste dati e utenti. Su queste la ricerca della griglia va fatta sul testo mostrato, altrimenti non
+     * trova nulla (es. cercando 29/01/2023 su una data, che nei dati è una stringa ISO).
+     * Le cache sono ref lette al momento della ricerca: a quel punto sono già popolate.
+     */
+    const searchTextGetters = useMemo(() => {
+        const getters = new Map();
+        const columnsOfResult = searchResult?.dtdResult?.columns;
+        if (!columnsOfResult)
+            return getters;
+        const uniqueKeys = generateUniqueColumnKeys(columnsOfResult, searchResult?.fromTID);
+        columnsOfResult.forEach((col, index) => {
+            const dataField = uniqueKeys[index];
+            if (!dataField)
+                return;
+            const dataDomain = MetadataDataDomains[(col.extendedProperties?.["DataDomain"] ?? "None")];
+            const dataListID = Number(col.extendedProperties?.["DataListID"]);
+            if (dataDomain === MetadataDataDomains.DataList && dataListID) {
+                getters.set(dataField, (rowData) => getDataListItem(dataListID, rowData?.[dataField])?.name ?? String(rowData?.[dataField] ?? ''));
+                return;
+            }
+            if (dataDomain === MetadataDataDomains.UserID) {
+                getters.set(dataField, (rowData) => {
+                    const rawValue = rowData?.[dataField];
+                    // Un campo utente vuoto non mostra nulla: senza questo controllo Number('') darebbe 0, cioè l'utente di sistema
+                    if (rawValue === undefined || rawValue === null || rawValue === '')
+                        return '';
+                    const userId = Number(rawValue);
+                    if (Number.isNaN(userId))
+                        return String(rawValue);
+                    if (userId === 0)
+                        return SDKUI_Localizator.SystemUser ?? '';
+                    const ud = getUserItem(userId);
+                    return (ud ? getCompleteUserName(ud.domain, ud.name) : undefined) ?? String(rawValue);
+                });
+                return;
+            }
+            // Data e numero vengono mostrati con il formato definito sulle proprietà estese della colonna
+            const { format, formatCulture } = getColumnFormatInfo(col);
+            if (col.dataType === DataColumnTypes.DateTime) {
+                getters.set(dataField, (rowData) => getDateDisplayText(rowData?.[dataField], format, formatCulture));
+                return;
+            }
+            if (col.dataType === DataColumnTypes.Number) {
+                getters.set(dataField, (rowData) => getNumberDisplayText(rowData?.[dataField], format, formatCulture));
+            }
+        });
+        return getters;
+    }, [searchResult, getDataListItem, getUserItem, getCompleteUserName]);
+    const customizeColumns = useMemo(() => customizeSearchByDisplayText(searchTextGetters), [searchTextGetters]);
     /**
      * Effect che carica i dati necessari e genera le colonne della griglia.
      * Esegue il caricamento delle cache (DataList e UserID) in parallelo prima di generare le colonne,
@@ -1289,7 +1340,7 @@ const TMSearchResultGrid = ({ openInOffice, fromDTD, operationItems, allUsers, i
         setVisibleItems(visibleData);
     }, []);
     useEffect(() => { onVisibleItemChanged?.(visibleItems); }, [visibleItems]);
-    return _jsxs("div", { style: { width: "100%", height: "100%" }, children: [!isDataGridReady && (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', width: '100%', gap: '10px' }, children: [_jsx(LoadIndicator, { height: 60, width: 60 }), _jsx("div", { children: SDKUI_Localizator.Loading })] })), isDataGridReady && _jsx(TMDataGrid, { ref: dataGridRef, id: "tm-search-result", keyExpr: "rowIndex", dataColumns: dataColumns, dataSource: dataSource, repaintChangesOnly: true, selectedRowKeys: selectedRowKeys, focusedRowKey: disableAutoFocus ? undefined : Number(focusedItem?.rowIndex ?? 0), showSearchPanel: showSearchTMDatagrid, showFilterPanel: true, sorting: { mode: "multiple" }, selection: { mode: allowMultipleSelection ? 'multiple' : 'single' }, pageSize: pageSize, onSelectionChanged: handleSelectionChange, onFocusedRowChanged: handleFocusedRowChange, onRowDblClick: onRowDblClick, onContentReady: onContentReady, showHeaderColumnChooser: true, onKeyDown: onKeyDown, customContextMenuItems: operationItems, counterConfig: {
+    return _jsxs("div", { style: { width: "100%", height: "100%" }, children: [!isDataGridReady && (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', width: '100%', gap: '10px' }, children: [_jsx(LoadIndicator, { height: 60, width: 60 }), _jsx("div", { children: SDKUI_Localizator.Loading })] })), isDataGridReady && _jsx(TMDataGrid, { ref: dataGridRef, id: "tm-search-result", keyExpr: "rowIndex", dataColumns: dataColumns, dataSource: dataSource, customizeColumns: customizeColumns, repaintChangesOnly: true, selectedRowKeys: selectedRowKeys, focusedRowKey: disableAutoFocus ? undefined : Number(focusedItem?.rowIndex ?? 0), showSearchPanel: showSearchTMDatagrid, showFilterPanel: true, sorting: { mode: "multiple" }, selection: { mode: allowMultipleSelection ? 'multiple' : 'single' }, pageSize: pageSize, onSelectionChanged: handleSelectionChange, onFocusedRowChanged: handleFocusedRowChange, onRowDblClick: onRowDblClick, onContentReady: onContentReady, showHeaderColumnChooser: true, onKeyDown: onKeyDown, customContextMenuItems: operationItems, counterConfig: {
                     show: true,
                     items: dcmtsReturned !== undefined && dcmtsFound !== undefined
                         ? new Map([

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

@@ -3,6 +3,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/viewers/TMMidViewer.js

@@ -92,8 +92,11 @@ export const TMMetadataIcon = ({ tid, md, color, layoutMode = LayoutModes.Update
                 break;
         }
     }
+    // color='inherit' serve solo all'icona (eredita il colore dell'editor): il tooltip è renderizzato in overlay,
+    // dove 'inherit' non risolverebbe al colore dell'editor, quindi lì manteniamo la palette normale
+    let tooltipColor = color === 'inherit' ? undefined : color;
     return (_jsx(_Fragment, { children: icon
-            ? _jsx(TMMetadataTooltip, { tid: tid, md: md, layoutMode: layoutMode, color: color, children: icon })
+            ? _jsx(TMMetadataTooltip, { tid: tid, md: md, layoutMode: layoutMode, color: tooltipColor, children: icon })
             : null }));
 };
 export const TMMetadataTooltip = ({ tid, md, color, children, layoutMode = LayoutModes.Update }) => {