@topconsultnpm/sdkui-react-beta 6.14.136 → 6.14.138

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

@@ -0,0 +1,13 @@
+interface ShowConfirmOptions {
+    message: string;
+    title: string;
+    okButtonText?: string;
+    cancelButtonText?: string;
+}
+/**
+ * Mostra una finestra di conferma personalizzata tramite un componente modale.
+ * @param options Opzioni per la finestra di conferma (messaggio, titolo, testi dei bottoni).
+ * @returns Una Promise che si risolve a `true` se l'utente conferma, `false` se annulla.
+ */
+export declare const ShowConfirm: (options: ShowConfirmOptions) => Promise<boolean>;
+export {};

package/lib/components/base/TMConfirm.js

@@ -0,0 +1,119 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import ReactDOM from 'react-dom/client';
+import { createPortal } from 'react-dom';
+import styled from 'styled-components';
+import TMModal from './TMModal';
+import TMButton from './TMButton';
+import Toppy from '../../assets/Toppy-generico.png';
+import { TMColors } from '../../utils/theme';
+// *** Stili per la modale (immutati) ***
+const StyledModalBodyWrapper = styled.div `
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+`;
+const StyledModalFooter = styled.div `
+    padding: 12px;
+    height: auto;
+    display: flex;
+    justify-content: flex-end;
+    flex-direction: row;
+    gap: 10px;
+`;
+const StyledModalContentContainer = styled.div `
+    width: 100%;
+    padding: 10px;
+    flex: 1;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 10px;
+`;
+// *** Componente della modale di conferma ***
+const TMConfirmModal = ({ isOpen, title, message, okButtonText = 'OK', cancelButtonText = 'Annulla', onConfirm, onCancel, onClose }) => {
+    // Stato per la larghezza e l'altezza della modale
+    const [modalWidth, setModalWidth] = useState('520px');
+    const [modalHeight, setModalHeight] = useState('240px');
+    useEffect(() => {
+        const handleResize = () => {
+            if (window.innerWidth <= 768) {
+                setModalWidth('300px');
+                setModalHeight('200px');
+            }
+            else {
+                setModalWidth('520px');
+                setModalHeight('240px');
+            }
+        };
+        // Imposta la dimensione iniziale
+        handleResize();
+        // Aggiungi il listener per l'evento di ridimensionamento della finestra
+        window.addEventListener('resize', handleResize);
+        // Rimuovi il listener quando il componente viene smontato
+        return () => window.removeEventListener('resize', handleResize);
+    }, []);
+    return (_jsx(TMModal, { title: title, width: modalWidth, height: modalHeight, resizable: false, onClose: onClose, children: _jsxs(StyledModalBodyWrapper, { children: [_jsxs(StyledModalContentContainer, { children: [_jsx("img", { width: 60, height: 75, src: Toppy, alt: "Toppy" }), _jsx("p", { style: { color: TMColors.primaryColor }, children: message })] }), _jsxs(StyledModalFooter, { children: [_jsx(TMButton, { btnStyle: 'text', showTooltip: false, caption: okButtonText, onClick: onConfirm }), _jsx(TMButton, { btnStyle: 'text', showTooltip: false, caption: cancelButtonText, onClick: onCancel })] })] }) }));
+};
+// *** Variabili globali per la gestione della Promise e del root dinamico ***
+let resolvePromise = null;
+let confirmRoot = null;
+let portalContainer = null;
+/**
+ * Funzione interna per creare/aggiornare/rimuovere la modale tramite un Portal.
+ * Questa non è esportata e viene gestita solo da `ShowConfirm`.
+ */
+const updateConfirmModal = (options, isOpen, onConfirm, onCancel, onClose) => {
+    if (!portalContainer) {
+        // Crea il div in cui il portal verrà renderizzato la prima volta
+        portalContainer = document.createElement('div');
+        portalContainer.id = 'confirm-modal-portal-root';
+        document.body.appendChild(portalContainer);
+        confirmRoot = ReactDOM.createRoot(portalContainer);
+    }
+    if (isOpen && options && confirmRoot) {
+        // Renderizza il componente usando un Portal
+        confirmRoot.render(createPortal(_jsx(TMConfirmModal, { isOpen: isOpen, title: options.title, message: options.message, okButtonText: options.okButtonText, cancelButtonText: options.cancelButtonText, onConfirm: onConfirm, onCancel: onCancel, onClose: onClose }), portalContainer));
+    }
+    else if (confirmRoot) {
+        // Se non è più aperto, renderizza null per smontare il componente dal portal
+        confirmRoot.render(null);
+        // È buona pratica pulire anche il container dal DOM se non è più necessario
+        if (portalContainer && portalContainer.parentNode) {
+            confirmRoot.unmount(); // Smonta il root completamente
+            portalContainer.parentNode.removeChild(portalContainer);
+            portalContainer = null;
+            confirmRoot = null;
+        }
+    }
+};
+/**
+ * Mostra una finestra di conferma personalizzata tramite un componente modale.
+ * @param options Opzioni per la finestra di conferma (messaggio, titolo, testi dei bottoni).
+ * @returns Una Promise che si risolve a `true` se l'utente conferma, `false` se annulla.
+ */
+export const ShowConfirm = (options) => {
+    return new Promise((resolve, reject) => {
+        if (resolvePromise) {
+            // Se c'è già una modale di conferma aperta, rifiuta la nuova richiesta.
+            // Potresti voler mettere in coda le richieste o gestirle diversamente.
+            reject(new Error('Another confirm modal is already open.'));
+            return;
+        }
+        resolvePromise = resolve;
+        const cleanupAndResolve = (value) => {
+            if (resolvePromise) {
+                resolvePromise(value);
+                resolvePromise = null;
+                // Chiudi e pulisci la modale
+                updateConfirmModal(null, false, () => { }, () => { }, () => { });
+            }
+        };
+        const handleConfirm = () => cleanupAndResolve(true);
+        const handleCancel = () => cleanupAndResolve(false);
+        const handleClose = () => cleanupAndResolve(false); // Gestione della chiusura tramite 'X' o ESC
+        // Mostra la modale
+        updateConfirmModal(options, true, handleConfirm, handleCancel, handleClose);
+    });
+};

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

@@ -19,8 +19,9 @@ interface ITMTreeViewProps<T extends ITMTreeItem> {
     onSelectionChanged?: (selectedItems: T[]) => void;
     onNodeUpdate?: (updatedNode: T) => void;
     onDataChanged?: (items: T[]) => void;
+    shouldDelayFocusOnEvent?: (node: T, event: React.MouseEvent) => boolean;
 }
-declare const TMTreeView: <T extends ITMTreeItem>({ dataSource, focusedItem, selectedItems, allowMultipleSelection, onDataChanged, calculateItemsForNode, itemRender, onNodeUpdate, onFocusedItemChanged, onSelectionChanged }: ITMTreeViewProps<T>) => import("react/jsx-runtime").JSX.Element;
+declare const TMTreeView: <T extends ITMTreeItem>({ dataSource, focusedItem, selectedItems, allowMultipleSelection, onDataChanged, calculateItemsForNode, itemRender, onNodeUpdate, onFocusedItemChanged, onSelectionChanged, shouldDelayFocusOnEvent }: ITMTreeViewProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default TMTreeView;
 export declare const StyledTreeNode: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $isSelected?: boolean;

package/lib/components/base/TMTreeView.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 import styled from 'styled-components';
 import { IconChevronDown, IconChevronRight } from '../../helper';
 import { TMColors } from '../../utils/theme';
-const TMTreeView = ({ dataSource = [], focusedItem, selectedItems = [], allowMultipleSelection, onDataChanged, calculateItemsForNode, itemRender, onNodeUpdate, onFocusedItemChanged, onSelectionChanged }) => {
+const TMTreeView = ({ dataSource = [], focusedItem, selectedItems = [], allowMultipleSelection, onDataChanged, calculateItemsForNode, itemRender, onNodeUpdate, onFocusedItemChanged, onSelectionChanged, shouldDelayFocusOnEvent }) => {
     useEffect(() => {
         const handleKeyDown = (event) => {
             if (!focusedItem)
@@ -102,10 +102,53 @@ const TMTreeView = ({ dataSource = [], focusedItem, selectedItems = [], allowMul
             onDataChanged?.(updatedData);
         });
     };
-    const handleNodeClick = (node, ctrlKey) => {
-        onFocusedItemChanged?.(node);
-        handleNodeToggle(node.key, ctrlKey);
-    };
+    // Ref per distinguere click singolo/doppio sulla riga (esempio TMDcmtIcon)
+    const clickTimeoutRef = useRef(null);
+    const lastClickedNodeKeyRef = useRef(undefined);
+    const handleNodeClick = useCallback((node, e) => {
+        const targetElement = e.target;
+        // Se il click non è sulla riga (es. click sul paddiing esterno), ignora.
+        if (e.currentTarget !== targetElement && !e.currentTarget.contains(targetElement)) {
+            return;
+        }
+        // Se shouldDelayFocusOnEvent non è fornita, il comportamento predefinito è il focus immediato (false)
+        const delayFocus = shouldDelayFocusOnEvent ? shouldDelayFocusOnEvent(node, e) : false;
+        // Reset del timer se il click è su un nodo diverso dal precedente
+        if (lastClickedNodeKeyRef.current && lastClickedNodeKeyRef.current !== node.key) {
+            if (clickTimeoutRef.current) {
+                clearTimeout(clickTimeoutRef.current);
+            }
+            clickTimeoutRef.current = null;
+        }
+        if (delayFocus) {
+            // Logica per il ritardo del focus (es. click singolo su icona desktop, gestito dal padre)
+            if (clickTimeoutRef.current) {
+                // Questo è il secondo click di un potenziale doppio click.
+                // Annulla l'azione di focus dal click singolo precedente.
+                clearTimeout(clickTimeoutRef.current);
+                clickTimeoutRef.current = null;
+                lastClickedNodeKeyRef.current = undefined;
+                return; // Non attivare onFocusedItemChanged per il doppio click
+            }
+            // Primo click di un potenziale doppio click o un click singolo che necessita di ritardo
+            lastClickedNodeKeyRef.current = node.key;
+            clickTimeoutRef.current = setTimeout(() => {
+                // Se il timer scade, significa che è stato solo un click singolo.
+                onFocusedItemChanged?.(node);
+                clickTimeoutRef.current = null;
+                lastClickedNodeKeyRef.current = undefined;
+            }, 200);
+        }
+        else {
+            // Logica per il focus immediato (per tutti gli altri click, o se shouldDelayFocusOnEvent è false)
+            if (clickTimeoutRef.current) {
+                clearTimeout(clickTimeoutRef.current);
+                clickTimeoutRef.current = null;
+                lastClickedNodeKeyRef.current = undefined;
+            }
+            onFocusedItemChanged?.(node); // Chiama onFocusedItemChanged immediatamente
+        }
+    }, [onFocusedItemChanged, calculateItemsForNode, onNodeUpdate]);
     const handleCheckboxChange = (node, checked) => {
         let newSelectedItems;
         if (checked) {
@@ -179,7 +222,7 @@ const TMTreeView = ({ dataSource = [], focusedItem, selectedItems = [], allowMul
                                 if (input) {
                                     input.indeterminate = isIndeterminate(node);
                                 }
-                            } })), _jsx("div", { style: { display: 'flex', alignItems: 'center', width: '100%', height: '100%' }, onClick: () => { onFocusedItemChanged?.(node); }, children: itemRender(node) })] }), node.expanded && node.items && (_jsx("div", { style: { paddingLeft: 20, width: '100%' }, children: renderTree(node.items) }))] }, node.key)));
+                            } })), _jsx("div", { style: { display: 'flex', alignItems: 'center', width: '100%', height: '100%' }, onClick: (e) => { handleNodeClick(node, e); }, children: itemRender(node) })] }), node.expanded && node.items && (_jsx("div", { style: { paddingLeft: 20, width: '100%' }, children: renderTree(node.items) }))] }, node.key)));
     }, [handleNodeClick, handleNodeToggle, handleCheckboxChange, focusedItem, selectedItems, allowMultipleSelection]);
     return (_jsx("div", { style: { height: '100%', width: '100%', overflowY: 'auto', padding: '2px 5px 2px 2px' }, children: renderTree(dataSource) }));
 };

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

@@ -1,10 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
 import styled from 'styled-components';
 import { getFileIcon } from '../../../helper';
 import TMTooltip from '../../base/TMTooltip';
 import { DownloadTypes } from '../../../ts';
 import { DeviceType, useDeviceType } from '../../base/TMDeviceProvider';
+import { useDcmtOperations } from '../../../hooks/useDcmtOperations';
+import { TMWaitPanel } from '../../base/TMWaitPanel';
 const StyledCellRenderDcmtIcon = styled.div `
     display: flex;
     flex-direction: row;
@@ -14,24 +16,40 @@ const StyledCellRenderDcmtIcon = styled.div `
     position: relative;
 `;
 const TMDcmtIcon = ({ fileExtension, fileCount, isLexProt, isSigned, isMail, isShared, tid, did, downloadMode = "none", onDownloadDcmtsAsync }) => {
+    const { downloadDcmtsAsync, showWaitPanel, waitPanelTitle, showSecondary, waitPanelTextSecondary, waitPanelValueSecondary, waitPanelMaxValueSecondary, abortController } = useDcmtOperations();
     const deviceType = useDeviceType();
     let isMobile = useMemo(() => { return deviceType === DeviceType.MOBILE; }, [deviceType]);
+    const icon = useMemo(() => {
+        return getFileIcon(isMail == 2 ? "PEC" : fileExtension, fileCount);
+    }, [fileExtension, fileCount, isMail]);
+    // Gestore unificato per l'azione di download (click singolo su mobile, doppio click su desktop)
+    const handleDownloadAction = useCallback(async (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        if (tid && did) {
+            let dcmt = [{ TID: tid, DID: did, FILEEXT: fileExtension }];
+            // Usa la funzione passata tramite prop se disponibile, altrimenti usa l'hook interno
+            if (onDownloadDcmtsAsync) {
+                await onDownloadDcmtsAsync?.(dcmt, DownloadTypes.Dcmt, downloadMode);
+            }
+            else {
+                await downloadDcmtsAsync(dcmt, DownloadTypes.Dcmt, downloadMode);
+            }
+        }
+    }, [tid, did, downloadMode, onDownloadDcmtsAsync, downloadDcmtsAsync]);
     const isDownloadable = downloadMode !== "none" &&
         tid !== undefined &&
         did !== undefined &&
-        onDownloadDcmtsAsync !== undefined;
-    const handleClick = async (e) => {
-        if (isDownloadable) {
-            e.stopPropagation();
-            let dcmt = [{ TID: tid, DID: did, FILEEXT: fileExtension }];
-            await onDownloadDcmtsAsync?.(dcmt, DownloadTypes.Dcmt, downloadMode);
-        }
-    };
+        fileCount && fileCount > 0;
     return (_jsxs(StyledCellRenderDcmtIcon, { className: "tm-dcmt-icon", style: {
             cursor: isMobile
                 ? (isDownloadable ? "pointer" : undefined)
                 : (isDownloadable ? "default" : undefined)
-        }, onClick: isMobile ? handleClick : undefined, onDoubleClick: !isMobile ? handleClick : undefined, children: [getFileIcon(isMail == 2 ? "PEC" : fileExtension, fileCount), isLexProt == 1 && _jsx("div", { style: { position: 'absolute', left: '-7px', top: isShared ? undefined : '2px' }, children: _jsx(TMTooltip, { content: "Protezione LEX", children: _jsx(IconLexProtLock, { color: 'blue', fontSize: 13 }) }) }), isShared == 1 && _jsx("div", { style: { position: 'absolute', top: '-7px', left: '-5px' }, children: _jsx(TMTooltip, { content: "Documento condiviso", children: _jsx(IconShared, { fontSize: 16 }) }) }), isSigned == 1 && _jsx("div", { style: { position: 'absolute', bottom: '-4px', right: '-7px' }, children: _jsx(TMTooltip, { content: "Documento firmato", children: _jsx(IconSignature, { fontSize: 28 }) }) })] }));
+        }, ...(deviceType === DeviceType.MOBILE
+            ? { onClick: handleDownloadAction } // Su mobile, un singolo click sull'icona avvia il download
+            : { onDoubleClick: handleDownloadAction } // Su desktop, un doppio click sull'icona avvia il download
+        ), children: [icon, isLexProt == 1 && _jsx("div", { style: { position: 'absolute', left: '-7px', top: isShared ? undefined : '2px' }, children: _jsx(TMTooltip, { content: "Protezione LEX", children: _jsx(IconLexProtLock, { color: 'blue', fontSize: 13 }) }) }), isShared == 1 && _jsx("div", { style: { position: 'absolute', top: '-7px', left: '-5px' }, children: _jsx(TMTooltip, { content: "Documento condiviso", children: _jsx(IconShared, { fontSize: 16 }) }) }), isSigned == 1 && _jsx("div", { style: { position: 'absolute', bottom: '-4px', right: '-7px' }, children: _jsx(TMTooltip, { content: "Documento firmato", children: _jsx(IconSignature, { fontSize: 28 }) }) }), showWaitPanel &&
+                _jsx(TMWaitPanel, { title: waitPanelTitle, showSecondary: showSecondary, textSecondary: waitPanelTextSecondary, valueSecondary: waitPanelValueSecondary, maxValueSecondary: waitPanelMaxValueSecondary, isCancelable: true, abortController: abortController, onAbortClick: (abortController) => { setTimeout(() => { abortController?.abort(); }, 1000); } })] }));
 };
 export default TMDcmtIcon;
 function IconLexProtLock(props) {

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

@@ -11,7 +11,7 @@ import { FormModes, SearchResultContext } from '../../../ts';
 import { TMColors } from '../../../utils/theme';
 import { StyledDivHorizontal, StyledBadge } from '../../base/Styled';
 import ShowAlert from '../../base/TMAlert';
-import { DeviceType } from '../../base/TMDeviceProvider';
+import { DeviceType, useDeviceType } from '../../base/TMDeviceProvider';
 import { TMExceptionBoxManager } from '../../base/TMPopUp';
 import TMSpinner from '../../base/TMSpinner';
 import { TMLayoutWaitingContainer } from '../../base/TMWaitPanel';
@@ -223,34 +223,9 @@ const TMMasterDetailDcmts = ({ deviceType, inputDcmts, isForMaster, showCurrentD
     const renderItem = useCallback((itemData) => {
         return (!itemData ? _jsx(_Fragment, {}) :
             _jsxs("div", { style: { minWidth: '90px', width: '100%', display: 'flex', marginLeft: itemData.did ? '5px' : '0px', gap: itemData.did ? '15px' : '10px', alignItems: 'center', opacity: !itemData.isDcmt && (itemData.items?.length ?? 0) <= 0 ? 0.5 : 1 }, children: [itemData.did && showCurrentDcmtIndicator && itemData.did === inputDcmts?.[0].DID ? _jsx(IconBackhandIndexPointingRight, { fontSize: 22, overflow: 'visible' }) : _jsx(_Fragment, {}), itemData.did
-                        ? _jsx(TMDcmtIcon, { fileExtension: itemData.values?.FILEEXT?.value, fileCount: itemData.values?.FILECOUNT?.value, isLexProt: itemData.values?.IsLexProt?.value, isMail: itemData.values?.ISMAIL?.value, isShared: itemData.values?.ISSHARED?.value, isSigned: itemData.values?.ISSIGNED?.value })
+                        ? _jsx(TMDcmtIcon, { tid: itemData.values?.TID.value, did: itemData.values?.DID.value, fileExtension: itemData.values?.FILEEXT?.value, fileCount: itemData.values?.FILECOUNT?.value, isLexProt: itemData.values?.IsLexProt?.value, isMail: itemData.values?.ISMAIL?.value, isShared: itemData.values?.ISSHARED?.value, isSigned: itemData.values?.ISSIGNED?.value, downloadMode: 'openInNewWindow' })
                         : itemData.dtd && _jsx(TMDcmtTypeTooltip, { dtd: itemData.dtd, children: _jsx("div", { style: { position: 'relative' }, children: _jsx(IconFolder, { color: itemData.isManyToMany ? '#ff8f44' : TMColors.iconLight, fontSize: 24 }) }) }), itemData.did
                         ?
-                            // <TMTooltip content={
-                            // 	<StyledTooltipContainer style={{ gap: '3px' }}>
-                            // 		<TMTidViewer tid={itemData.tid} showIcon showId />
-                            // 		<StyledTooltipSeparatorItem />
-                            // 		{
-                            // 			getMetadataKeys(itemData.values).map((key, index) => {
-                            // 				let md = itemData.values?.[key].md as MetadataDescriptor;
-                            // 				let value = itemData.values?.[key].value;
-                            // 				return (
-                            // 					<StyledDivHorizontal key={`${key}_${index}`} style={{ gap: '3px' }} >
-                            // 						<p style={{ fontSize: '1rem' }}>{`${key}: `}</p>
-                            // 						{
-                            // 							md.dataDomain == MetadataDataDomains.DataList ?
-                            // 								<TMDataListItemViewer dataListId={md.dataListID} viewMode={md.dataListViewMode} value={value} />
-                            // 								: md.dataDomain == MetadataDataDomains.UserID ?
-                            // 									<TMUserIdViewer userId={value as number} showIcon noneSelectionText='' />
-                            // 									:
-                            // 									<p style={{ fontSize: '1rem', fontWeight: 600 }}>{value}</p>
-                            // 						}
-                            // 					</StyledDivHorizontal>
-                            // 				)
-                            // 			})
-                            // 		}
-                            // 	</StyledTooltipContainer>
-                            // }>
                             _jsx(StyledDivHorizontal, { style: { whiteSpace: 'nowrap', textOverflow: 'ellipsis' }, children: getDcmtDisplayValue(itemData.values).map((key, index) => {
                                     let md = itemData.values?.[key].md;
                                     let value = itemData.values?.[key].value;
@@ -261,7 +236,6 @@ const TMMasterDetailDcmts = ({ deviceType, inputDcmts, isForMaster, showCurrentD
                                                     :
                                                         _jsx("p", { style: { fontSize: '1rem' }, children: value })] }, `${key}_${index}`));
                                 }) })
-                        // </TMTooltip>
                         : _jsxs(StyledDivHorizontal, { style: { gap: 5, overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis' }, children: [_jsx("p", { style: { whiteSpace: 'nowrap', textOverflow: 'ellipsis' }, children: itemData.name }), _jsx(StyledBadge, { "$backgroundColor": TMColors.info, children: itemData.items?.length })] })] }));
     }, []);
     /** Function for calculate related documents */
@@ -565,6 +539,17 @@ export function IconBackhandIndexPointingRight(props) {
 }
 const TMTreeViewWrapper = ({ data, allowMultipleSelection, focusedItem, selectedItems, renderItem, calculateItemsForNode, onFocusedItemChanged, onSelectionChanged, onDataChanged }) => {
     const { setPanelVisibilityById, setToolbarButtonVisibility } = useTMPanelManagerContext();
+    const deviceType = useDeviceType();
+    // Determina se il focus deve essere ritardato in base all'elemento cliccato
+    const handleShouldDelayFocusOnEvent = useCallback((node, event) => {
+        const targetElement = event.target;
+        // Se il click è sull'icona TMDcmtIcon (identificata dalla sua classe CSS)
+        // E siamo su un dispositivo NON mobile (su mobile, TMDcmtIcon gestisce già il click con stopPropagation)
+        if (targetElement.closest('.tm-dcmt-icon') && deviceType !== DeviceType.MOBILE) {
+            return true;
+        }
+        return false;
+    }, [deviceType]);
     return (_jsx(TMTreeView, { dataSource: data, allowMultipleSelection: allowMultipleSelection, calculateItemsForNode: calculateItemsForNode, itemRender: renderItem, focusedItem: focusedItem, selectedItems: selectedItems, onFocusedItemChanged: (item) => {
             onFocusedItemChanged?.(item);
             if (item?.isDcmt) {
@@ -579,7 +564,7 @@ const TMTreeViewWrapper = ({ data, allowMultipleSelection, focusedItem, selected
                 setToolbarButtonVisibility('tmSearchResult', true);
                 setToolbarButtonVisibility('tmDcmtForm', false);
             }
-        }, onSelectionChanged: onSelectionChanged, onDataChanged: onDataChanged }));
+        }, onSelectionChanged: onSelectionChanged, onDataChanged: onDataChanged, shouldDelayFocusOnEvent: handleShouldDelayFocusOnEvent }));
 };
 const TMFormOrResultWrapper = ({ deviceType, focusedItem, onTaskCreateRequest }) => {
     const { setPanelVisibilityById } = useTMPanelManagerContext();

package/lib/helper/SDKUI_Localizator.d.ts

@@ -79,6 +79,7 @@ export declare class SDKUI_Localizator {
     static get CompleteError(): "Kompletter Fehler" | "Complete error" | "Error completo" | "Erreur complète" | "Erro completo" | "Errore completo";
     static get Configure(): "Konfigurieren" | "Configure" | "Configurar" | "Configura";
     static get Confirm(): string;
+    static get ConfirmDownload(): string;
     static get ConfirmPassword(): "Bestätige das Passwort" | "Confirm password" | "Confirmar Contraseña" | "Confirmez le mot de passe" | "Confirme sua senha" | "Conferma password";
     static get ConfirmOnCancel(): "Wenn wir fortfahren, gehen die vorgenommenen Änderungen verloren. Fortfahren?" | "All modifications will be lost. Continue?" | "Si sigue adelante, se perderán las modificaciones aportadas. ¿Seguir?" | "Continuant, les changements seront perdus. Continuer?" | "Continuando as alterações feitas serão perdidas. Continuar?" | "Proseguendo le modifiche apportate andranno perse. Proseguire?";
     static get Continue(): string;
@@ -169,6 +170,7 @@ export declare class SDKUI_Localizator {
     static get FEFormats_SDI_HTML(): "SdI Style Sheet (HTML)" | "Hoja de estilo SdI (HTML)" | "Feuille de style SdI (HTML)" | "Folha de estilo SdI (HTML)" | "Foglio di stile SdI (HTML)";
     static get FEFormats_SDI_PDF(): "SdI Style Sheet (PDF)" | "Hoja de estilo SdI (PDF)" | "Feuille de style SdI (PDF)" | "Folha de estilo SdI (PDF)" | "Foglio di stile SdI (PDF)";
     static get FileCheck(): string;
+    static get FileExtensionNotViewable(): string;
     static get FileConversion(): string;
     static get FileManager_QuestionAlreadyExistsFile(): "Ziel enthält bereits eine Datei mit der Bezeichnung {{0}}, ersetzen durch die neue Datei?" | "The destination already contains a file called {{0}}, replace with the new file?" | "El destino ya contiene un archivo llamado {{0}}, ¿sustituir con el nuevo archivo?" | "La destination contient déjà un fichier appelé {{0}}, remplacer avec le nouveau fichier?" | "O destino já contém um ficheiro chamado {{0}}, substitua com o novo arquivo?" | "La destinazione contiene già un file denominato {{0}}, sostituire con il nuovo file?";
     static get FileManager_QuestionAlreadyExistsFiles(): "Ziel enthält {{0}} Datei mit dem gleichen Namen, ersetzen durch neue Dateien?" | "Destination contains {{0}} files with the same name, replace with new files?" | "El destino contiene {{0}} archivos con el mismo nombre, ¿sustituir con los nuevos archivos?" | "La destination contient {{0}} fichier portant le même nom, remplacer avec les nouveaux fichiers?" | "O destino contém ficheiros {{0}} com o mesmo nome, substitua por novos arquivos?" | "La destinazione contiene {{0}} file con lo stesso nome, sostituire con i nuovi file?";

package/lib/helper/SDKUI_Localizator.js

@@ -739,6 +739,16 @@ export class SDKUI_Localizator {
             default: return "Conferma";
         }
     }
+    static get ConfirmDownload() {
+        switch (this._cultureID) {
+            case CultureIDs.De_DE: return "Download bestätigen";
+            case CultureIDs.En_US: return "Confirm Download";
+            case CultureIDs.Es_ES: return "Confirmar Descarga";
+            case CultureIDs.Fr_FR: return "Confirmer le téléchargement";
+            case CultureIDs.Pt_PT: return "Confirmar Download";
+            default: return "Conferma Download";
+        }
+    }
     static get ConfirmPassword() {
         switch (this._cultureID) {
             case CultureIDs.De_DE: return "Bestätige das Passwort";
@@ -1651,6 +1661,16 @@ export class SDKUI_Localizator {
             default: return "Controllo file";
         }
     }
+    static get FileExtensionNotViewable() {
+        switch (this._cultureID) {
+            case CultureIDs.De_DE: return "Die Datei mit der Erweiterung \"{{0}}\" kann möglicherweise nicht direkt im Browser angezeigt werden. Möchten Sie mit dem Download fortfahren?";
+            case CultureIDs.En_US: return "The file with extension \"{{0}}\" might not be viewable directly in the browser. Do you want to proceed with the download?";
+            case CultureIDs.Es_ES: return "El archivo con extensión \"{{0}}\" podría no ser visible directamente en el navegador. ¿Desea proceder con la descarga?";
+            case CultureIDs.Fr_FR: return "Le fichier avec l'extension \"{{0}}\" pourrait ne pas être visualisable directement dans le navigateur. Voulez-vous procéder au téléchargement ?";
+            case CultureIDs.Pt_PT: return "O arquivo com a extensão \"{{0}}\" pode não ser visível diretamente no navegador. Deseja prosseguir com o download?";
+            default: return "Il file con estensione \"{{0}}\" potrebbe non essere visualizzabile direttamente nel browser. Vuoi procedere con il download?";
+        }
+    }
     static get FileConversion() {
         switch (this._cultureID) {
             case CultureIDs.De_DE: return "Dateikonvertierung";

package/lib/hooks/useDcmtOperations.js

@@ -6,6 +6,7 @@ import { Globalization, getExceptionMessage, dialogConfirmOperation, extensionHa
 import { DcmtOperationTypes, DownloadTypes, FileExtensionHandler } from '../ts';
 import { useFileDialog } from './useInputDialog';
 import { isXMLFileExt } from '../helper/dcmtsHelper';
+import { ShowConfirm } from '../components/base/TMConfirm';
 let abortController = new AbortController();
 export function useDcmtOperations() {
     const [showWaitPanel, setShowWaitPanel] = useState(false);
@@ -24,6 +25,21 @@ export function useDcmtOperations() {
             return;
         if (inputDcmts.length <= 0)
             return;
+        if (inputDcmts.length === 1 && downloadMode === "openInNewWindow") {
+            if (!inputDcmts[0].FILEEXT)
+                return;
+            let readyToShow = extensionHandler(inputDcmts[0].FILEEXT) === FileExtensionHandler.READY_TO_SHOW;
+            if (!readyToShow) {
+                const confirmDownload = await ShowConfirm({
+                    message: SDKUI_Localizator.FileExtensionNotViewable.replaceParams(inputDcmts[0].FILEEXT),
+                    title: SDKUI_Localizator.ConfirmDownload,
+                    okButtonText: 'Download',
+                    cancelButtonText: SDKUI_Localizator.Cancel
+                });
+                if (!confirmDownload)
+                    return;
+            }
+        }
         let operationTitle = 'Download File';
         setShowWaitPanel(true);
         setShowPrimary(inputDcmts.length > 1);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@topconsultnpm/sdkui-react-beta",
-    "version": "6.14.136",
+    "version": "6.14.138",
     "description": "",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
@@ -42,7 +42,7 @@
         "lib"
     ],
     "dependencies": {
-        "@topconsultnpm/sdk-ts-beta": "6.14.19",
+        "@topconsultnpm/sdk-ts-beta": "6.14.20",
         "buffer": "^6.0.3",
         "devextreme": "24.2.6",
         "devextreme-react": "24.2.6",