@topconsultnpm/sdkui-react 6.22.0-dev2.9 → 6.22.0-t2

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

@@ -1,13 +1,13 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } 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, IconDuplicate, IconEdit, IconMenuVertical, IconPlatform, IconRefresh, IconSearchCheck, IconShow, isApprovalWorkflowView, isSign4TopEnabled, searchResultDescriptorToSimpleArray, searchResultToMetadataValues, SDKUI_Globals, SDKUI_Localizator, IconCloseOutline, getSearchResultPanelLayout, getSearchResultPanelLayoutSignature, hasSearchResultPanelLayout, saveSearchResultPanelLayout, subscribeSearchResultPanelLayout } from '../../../helper';
 import { CounterItemKey } from '../../base/TMCounterContainer';
 import { getDcmtCicoStatus } from '../../../helper/checkinCheckoutManager';
 import { DcmtOperationTypes, SearchResultContext, } from '../../../ts';
-import { Gutters } from '../../../utils/theme';
+import { Gutters, TMColors } from '../../../utils/theme';
 import { useDataListItem } from '../../../hooks/useDataListItem';
 import { useDataUserIdItem } from '../../../hooks/useDataUserIdItem';
 import { getSelectedDcmtsOrFocused, useDocumentOperations } from '../../../hooks/useDocumentOperations';
@@ -23,7 +23,8 @@ import { StyledMultiViewPanel } from '../../base/Styled';
 import { TMLayoutWaitingContainer } from '../../base/TMWaitPanel';
 import TMMetadataValues from '../../editors/TMMetadataValues';
 import TMTidViewer from '../../viewers/TMTidViewer';
-import { TMPanelManagerProvider, useTMPanelManagerContext } from '../../layout/panelManager/TMPanelManagerContext';
+import { useTMPanelManagerContext } from '../../layout/panelManager/TMPanelManagerContext';
+import { TMPanelManagerWithPersistenceProvider } from '../../layout/panelManager/TMPanelManagerWithPersistenceProvider';
 import TMPanelManagerContainer from '../../layout/panelManager/TMPanelManagerContainer';
 import TMContextMenu from '../../NewComponents/ContextMenu/TMContextMenu';
 import TMToppyDraggableHelpCenter from '../assistant/TMToppyDraggableHelpCenter';
@@ -51,13 +52,25 @@ const orderByName = (array) => {
         return 1;
     } return 0; });
 };
+//#endregion Helper Methods
+/**
+ * Contesti che ricordano il layout dei pannelli, condividendone uno solo.
+ * Gli altri sono esclusi di proposito: FREE_SEARCH ha un pannello in più, quindi il suo layout non vale
+ * per gli altri, e i restanti mostrano il risultato dentro contenitori con esigenze di spazio loro.
+ */
+const PERSISTED_LAYOUT_CONTEXTS = [
+    SearchResultContext.METADATA_SEARCH,
+    SearchResultContext.WORKFLOW_APPROVE,
+];
 const TMSearchResult = ({ 
 // Data
 groupId, searchResults = [], context = SearchResultContext.METADATA_SEARCH, title, selectedSearchResultTID, floatingActionConfig, workingGroupContext = undefined, inputDID, 
 // Boolean flags to enable/disable features
-autoFocusFirstRow = true, formAutoOpen, isVisible = true, allowRelations = true, openDcmtFormAsModal = false, showSearchResultSidebar = true, showDcmtFormSidebar = true, showSelector = false, isClosable = false, allowFloatingBar = true, showToolbarHeader = true, showBackButton = true, disableAccordionIfSingleCategory = false, editPdfForm = false, openS4TViewer = false, showTodoDcmtForm = false, showToppyDraggableHelpCenter = true, toppyHelpCenterUsePortal = false, showNoDcmtFoundMessage = true, enablePinIcons = true, 
+autoFocusFirstRow = true, formAutoOpen, isVisible = true, allowRelations = true, openDcmtFormAsModal = false, showSearchResultSidebar = true, showDcmtFormSidebar = true, showSelector = false, isClosable = false, allowFloatingBar = true, showToolbarHeader = true, showBackButton = true, backCaption, showToolbarCloseButton = false, disableAccordionIfSingleCategory = false, editPdfForm = false, openS4TViewer = false, showTodoDcmtForm = false, showToppyDraggableHelpCenter = true, toppyHelpCenterUsePortal = false, showNoDcmtFoundMessage = true, enablePinIcons = true, showCounterConfig = true, showActionsColumn = false, compactPager = false, onRowDuplicateRequest, 
+// Counters
+counterConfig, 
 // Callbacks (optional)
-openInOffice, onRefreshAfterAddDcmtToFavs, onRefreshSearchAsyncDatagrid, onSelectedTIDChanged, onWFOperationCompleted, onClose, onFileOpened, onTaskCreateRequest, openWGsCopyMoveForm, openCommentFormCallback, openAddDocumentForm, onOpenS4TViewerRequest, onOpenPdfEditorRequest, openFileUploaderPdfEditor, passToArchiveCallback, onReferenceClick, 
+openInOffice, onRefreshAfterAddDcmtToFavs, onRefreshSearchAsyncDatagrid, onSelectedTIDChanged, onSelectedTIDCleared, onWFOperationCompleted, onClose, onFileOpened, onTaskCreateRequest, openWGsCopyMoveForm, openCommentFormCallback, openAddDocumentForm, onOpenS4TViewerRequest, onOpenPdfEditorRequest, openFileUploaderPdfEditor, passToArchiveCallback, onReferenceClick, 
 // Tasks
 allTasks = [], getAllTasks, deleteTaskByIdsCallback, addTaskCallback, editTaskCallback, 
 // Navigation
@@ -69,13 +82,19 @@ handleNavigateToWGs, handleNavigateToDossiers, fetchRemoteCertificates, graphome
     // Quando l'utente seleziona manualmente, il ref viene settato a false e il focus automatico
     // torna al comportamento normale.
     const isFirstAutoFocusRef = useRef(true);
+    // Mostra il pannello lista. È una ref perché il TMPanelManagerProvider sta dentro al JSX di
+    // questo componente, quindi qui il context non si può usare: la riempie ShowMainPanelBridge.
+    const showMainPanelRef = useRef(null);
     // ID state to force remount of components
     const [id, setID] = useState('');
     // Document type descriptor of the currently document
     const [fromDTD, setFromDTD] = useState();
     const [currentDcmt, setCurrentDcmt] = useState();
-    // State to specify if the details form is open or not
-    const [splitterSize, setSplitterSize] = useState(['100%', '0']);
+    // Passo corrente. Su mobile decide anche quale pannello è a schermo (vedi isSteppedLayout).
+    //   'auto'     -> l'utente non ha ancora scelto: si può selezionare il primo tipo documento
+    //   'selector' -> è tornato indietro col back: non selezionare niente al posto suo
+    //   'results'  -> è sulla griglia del tipo scelto
+    const [navStep, setNavStep] = useState('auto');
     // State to control the selected search result
     const [selectedSearchResult, setSelectedSearchResult] = useState();
     // State to control the search results to show in the datagrid
@@ -303,7 +322,7 @@ handleNavigateToWGs, handleNavigateToDossiers, fetchRemoteCertificates, graphome
             createTaskFromDocumentOrWorkItem();
         }
     };
-    const { operationItems, renderFloatingBar, renderDcmtOperations, features, } = useDocumentOperations({
+    const { operationItems, selectedDcmtInfos, renderFloatingBar, renderDcmtOperations, features, } = useDocumentOperations({
         context: context,
         documentData: {
             dtd: fromDTD,
@@ -377,9 +396,69 @@ handleNavigateToWGs, handleNavigateToDossiers, fetchRemoteCertificates, graphome
             openTaskFormHandler,
         },
     });
-    const { isOpenDcmtForm, openFormHandler, dcmtFormLayoutMode, onDcmtFormOpenChange, showSearchTMDatagrid, showExportForm, isOpenBatchUpdate, isModifiedBatchUpdate, updateBatchUpdateForm, closeDcmtFormHandler, handleSignApprove, checkoutInfo: { showCicoWaitPanel, cicoWaitPanelTitle, showCicoPrimaryProgress, cicoPrimaryProgressText, cicoPrimaryProgressValue, cicoPrimaryProgressMax, }, dcmtOperations: { abortController, showWaitPanel, showPrimary, waitPanelTitle, waitPanelTextPrimary, waitPanelValuePrimary, waitPanelMaxValuePrimary, showSecondary, waitPanelTextSecondary, waitPanelValueSecondary, waitPanelMaxValueSecondary, downloadDcmtsAsync, runOperationAsync, }, relatedDocumentsInfo: { isOpenDetails, isOpenMaster, checkRelatedDcmtsArchiveCapability, checkManyToManyCapability, }, toppyOperations: { showApprovePopup, showRejectPopup, showReAssignPopup, showMoreInfoPopup, updateShowApprovePopup, updateShowRejectPopup, updateShowReAssignPopup, updateShowMoreInfoPopup } } = features;
+    const { isOpenDcmtForm, isDcmtFormModal, openFormHandler, dcmtFormLayoutMode, onDcmtFormOpenChange, showSearchTMDatagrid, showDcmtTypesSelection, showExportForm, updateBatchUpdateForm, closeDcmtFormHandler, handleSignApprove, checkoutInfo: { showCicoWaitPanel, cicoWaitPanelTitle, showCicoPrimaryProgress, cicoPrimaryProgressText, cicoPrimaryProgressValue, cicoPrimaryProgressMax, }, dcmtOperations: { abortController, showWaitPanel, showPrimary, waitPanelTitle, waitPanelTextPrimary, waitPanelValuePrimary, waitPanelMaxValuePrimary, showSecondary, waitPanelTextSecondary, waitPanelValueSecondary, waitPanelMaxValueSecondary, downloadDcmtsAsync, runOperationAsync, }, relatedDocumentsInfo: { isOpenDetails, isOpenMaster, checkRelatedDcmtsArchiveCapability, checkManyToManyCapability, }, toppyOperations: { showApprovePopup, showRejectPopup, showReAssignPopup, showMoreInfoPopup, updateShowApprovePopup, updateShowRejectPopup, updateShowReAssignPopup, updateShowMoreInfoPopup } } = features;
+    // ----- Azioni della colonna di riga (showActionsColumn) -----------------------------------------
+    // Le voci di operationItems agiscono sui documenti selezionati o, in mancanza, su quello a fuoco:
+    // non accettano una riga come argomento. Il click sull'icona quindi azzera la selezione e porta il
+    // fuoco sulla riga cliccata, poi attende. L'attesa non è sul fuoco ma su selectedDcmtInfos, che
+    // l'hook ricalcola in un effect (un render più tardi): lanciare l'operazione prima significherebbe
+    // eseguirla sulla riga precedente.
+    const pendingRowActionRef = useRef(undefined);
+    // La callback è letta da una ref: dipendere dal prop renderebbe nuova requestRowAction, e con essa
+    // la colonna delle azioni, a ogni render del padre (vedi actionsColumn in TMSearchResultGrid)
+    const onRowDuplicateRequestRef = useRef(onRowDuplicateRequest);
+    onRowDuplicateRequestRef.current = onRowDuplicateRequest;
+    const requestRowAction = useCallback((operationId, rowData) => {
+        if (!showActionsColumn)
+            return;
+        if (rowData?.TID === undefined || rowData?.DID === undefined) {
+            ShowAlert({ message: SDKUI_Localizator.InvalidDcmt, mode: "warning", duration: 3000 });
+            return;
+        }
+        // Duplica ridefinita dal chiamante: agisce sulla riga cliccata, senza toccare fuoco e selezione
+        if (operationId === 'dup' && onRowDuplicateRequestRef.current) {
+            onRowDuplicateRequestRef.current(rowData);
+            return;
+        }
+        pendingRowActionRef.current = { operationId, TID: rowData.TID, DID: rowData.DID };
+        isFirstAutoFocusRef.current = false;
+        setSelectedItems([]);
+        setFocusedItem(rowData);
+    }, [showActionsColumn]);
+    // La richiesta viene scartata se il documento sparisce dai risultati (es. refresh dopo
+    // un'eliminazione): senza questo resterebbe appesa e partirebbe al prossimo cambio di fuoco.
+    useEffect(() => { pendingRowActionRef.current = undefined; }, [selectedSearchResult, lastUpdateSearchTime]);
+    useEffect(() => {
+        if (!showActionsColumn)
+            return;
+        const pending = pendingRowActionRef.current;
+        if (!pending)
+            return;
+        // L'hook non ha ancora recepito la riga richiesta: si riproverà al prossimo aggiornamento
+        if (selectedDcmtInfos.length !== 1)
+            return;
+        if (selectedDcmtInfos[0].TID !== pending.TID || selectedDcmtInfos[0].DID !== pending.DID)
+            return;
+        pendingRowActionRef.current = undefined;
+        const operation = findOperationItemById(operationItems, pending.operationId);
+        // Ora che il fuoco è sulla riga, `disabled` riflette i permessi per quel documento
+        if (!operation || operation.disabled || operation.visible === false)
+            return;
+        operation.onClick?.();
+    }, [showActionsColumn, selectedDcmtInfos, operationItems]);
     const deviceType = useDeviceType();
     const isMobile = deviceType === DeviceType.MOBILE;
+    const hasSingleDcmtType = currentSearchResults.length === 1;
+    // Su mobile si vede un pannello per volta; su desktop selettore e griglia sono affiancati
+    const isSteppedLayout = showSelector && isMobile;
+    // Un solo tipo documento su desktop: non c'è niente da scegliere, quindi il selettore sparisce
+    // (larghezza 0, nessun separatore) e lo spazio va tutto alla griglia. Il menu "Altro" permette
+    // di riaprirlo (vedi canToggleDcmtTypesSelection nell'hook).
+    const isSelectorCollapsed = showSelector && !isSteppedLayout && hasSingleDcmtType && !showDcmtTypesSelection;
+    // Senza selettore lo spazio va tutto alla griglia; altrimenti a step su mobile, affiancati su desktop
+    const splitterSizes = (!showSelector || isSelectorCollapsed) ? ['0%', '100%']
+        : isSteppedLayout ? (navStep === 'results' ? ['0', '100%'] : ['100%', '0'])
+            : ['30%', '70%'];
     const selectedDocs = getSelectedDcmtsOrFocused(selectedItems, focusedItem);
     // Disable the "Sign/Approve" button if:
     // 1. No document or multiple documents are selected, OR
@@ -400,8 +479,14 @@ handleNavigateToWGs, handleNavigateToDossiers, fetchRemoteCertificates, graphome
             setSelectedSearchResult(undefined);
             return;
         }
+        // Un solo tipo documento: selezionalo e vai ai risultati, a meno che l'utente sia tornato indietro
         if (searchResults.length === 1) {
+            if (navStep === 'selector') {
+                setSelectedSearchResult(undefined);
+                return;
+            }
             setSelectedSearchResult(searchResults[0]);
+            setNavStep('results');
             return;
         }
         // Se il TID precedentemente selezionato esiste ancora nei nuovi risultati, mantienilo.
@@ -415,6 +500,11 @@ handleNavigateToWGs, handleNavigateToDossiers, fetchRemoteCertificates, graphome
                 return;
             }
         }
+        // L'utente è sul selettore
+        if (isMobile && navStep !== 'results') {
+            setSelectedSearchResult(undefined);
+            return;
+        }
         // Altrimenti seleziona il primo risultato ordinato
         setSelectedSearchResult(orderByName(searchResults)[0]);
     }, [searchResults]);
@@ -471,7 +561,9 @@ handleNavigateToWGs, handleNavigateToDossiers, fetchRemoteCertificates, graphome
             return;
         if (focusedItem?.DID != inputDID)
             return;
-        openFormHandler(LayoutModes.Update);
+        if (focusedItem?.TID === undefined)
+            return;
+        onDcmtFormOpenChange(true, LayoutModes.Update);
     }, [inputDID, formAutoOpen, focusedItem]);
     // Quando openS4TViewer è true, apri automaticamente il viewer S4T
     useEffect(() => {
@@ -531,47 +623,75 @@ handleNavigateToWGs, handleNavigateToDossiers, fetchRemoteCertificates, graphome
         let counters = (showSelector && disableAccordionIfSingleCategory && searchResults.length > 1) ? getSearchResultCountersSingleCategory(searchResults) : "";
         if (title)
             return title + counters;
-        let titleHeader = 'Ricerca per metadati';
+        // Nome del tipo documento selezionato, accodato al titolo
+        const selectedDcmtTypeName = selectedSearchResult?.fromName ?? (searchResults?.length === 1 ? searchResults[0]?.fromName : undefined);
+        const withSelectedDcmtTypeName = (baseTitle) => selectedDcmtTypeName ? `${baseTitle} - ${selectedDcmtTypeName}` : baseTitle;
+        let titleHeader = withSelectedDcmtTypeName('Ricerca per metadati');
         switch (context) {
             case SearchResultContext.MASTER_DETAIL:
             case SearchResultContext.METADATA_SEARCH:
                 titleHeader = `${searchResults?.length > 1 ? selectedSearchResult?.fromName ?? 'Ricerca per metadati' : searchResults[0]?.fromName ?? 'Ricerca per metadati'}`;
                 break;
             case SearchResultContext.FAVORITES_AND_RECENTS:
-                titleHeader = SDKUI_Localizator.FavoritesAndRecentDcmts;
+                titleHeader = withSelectedDcmtTypeName(SDKUI_Localizator.FavoritesAndRecentDcmts);
                 break;
             case SearchResultContext.WORKFLOW_APPROVE:
-                titleHeader = SDKUI_Localizator.WorkflowApproval;
+                titleHeader = withSelectedDcmtTypeName(SDKUI_Localizator.WorkflowApproval);
                 break;
             case SearchResultContext.FREE_SEARCH:
-                titleHeader = `Risultato della ricerca full text`;
+                titleHeader = withSelectedDcmtTypeName('Risultato della ricerca full text');
                 break;
         }
         return titleHeader + counters;
     };
-    const onBack = () => {
-        if (isOpenBatchUpdate && isModifiedBatchUpdate) {
-            TMMessageBoxManager.show({
-                title: SDKUI_Localizator.Cancel, message: SDKUI_Localizator.ConfirmOnCancel, buttons: [ButtonNames.YES, ButtonNames.NO],
-                onButtonClick: (e) => {
-                    if (e !== ButtonNames.YES)
-                        return;
-                    setSplitterSize(['100%', '0']);
-                    onClose?.();
-                }
-            });
-        }
-        else if (isOpenDcmtForm) {
-            onDcmtFormOpenChange(false, LayoutModes.Update);
-        }
-        else {
-            if (isMobile && currentSearchResults.length > 1) {
-                setSelectedSearchResult(undefined);
-            }
-            setSplitterSize(['100%', '0']);
-            onClose?.();
+    // Dai risultati si risale al selettore dei tipi documento
+    const canGoBackToSelector = isSteppedLayout && navStep === 'results' && selectedSearchResult !== undefined;
+    /**
+     * Back di tutti i pannelli (e X di chiusura se isClosable). Su mobile risale un livello alla volta:
+     * pannello secondario -> lista dei risultati -> selettore dei tipi documento -> uscita.
+     * Su desktop i pannelli sono affiancati, quindi resta solo l'uscita.
+     *
+     * @param fromSecondaryPanel - true se il back arriva da un pannello secondario
+     */
+    const onBack = useCallback((fromSecondaryPanel = false) => {
+        // Non è previsto nessun modo di uscire: non fare niente
+        if (!showBackButton && !isClosable)
+            return;
+        // Torna alla lista senza toccare gli stati: l'utente deve ritrovare la sua selezione
+        if (fromSecondaryPanel) {
+            showMainPanelRef.current?.();
+            return;
         }
-    };
+        // Sia il ritorno al selettore sia l'uscita ripartono da una lista pulita
+        setSelectedSearchResult(undefined);
+        setFocusedItem(undefined);
+        setSelectedItems([]);
+        setSelectedRowKeysFromDataGrid([]);
+        setCurrentDcmt(undefined);
+        setCurrentMetadataValues([]);
+        setShowIndexingInfo(false);
+        isFirstAutoFocusRef.current = true;
+        // Il chiamante può tenere allineato il suo TID selezionato (es. selectedSearchResultTID)
+        onSelectedTIDCleared?.();
+        // [2] l'utente ha chiesto la lista: resta lì finché non sceglie lui, niente auto-selezione.
+        // [1] si esce: si riparte da capo, quindi l'auto-selezione torna permessa.
+        setNavStep(canGoBackToSelector ? 'selector' : 'auto');
+        // [2] C'è ancora un livello sopra: restiamo dentro, sul selettore
+        if (canGoBackToSelector)
+            return;
+        // [1] Si esce e si avvisa il chiamante
+        onClose?.();
+    }, [canGoBackToSelector, showBackButton, isClosable, onClose, onSelectedTIDCleared]);
+    /**
+     * Back del pannello lista. `undefined` = freccia non renderizzata, quindi la mostriamo solo se
+     * ha dove tornare: uno step intermedio, o un onClose per uscire. Con `isClosable` basta la X.
+     */
+    const backHandler = (showBackButton && !isClosable && (canGoBackToSelector || onClose !== undefined)) ? onBack : undefined;
+    /**
+     * Back dei pannelli secondari: la stessa onBack marcata come livello [3]. Solo su mobile:
+     * su desktop stanno affiancati alla lista e non c'è niente da cui tornare.
+     */
+    const backHandlerSecondary = useMemo(() => (isMobile && backHandler) ? () => backHandler(true) : undefined, [isMobile, backHandler]);
     const refreshDataGridAfterRemoveAsync = async () => {
         let index = selectedSearchResult?.dtdResult?.columns?.findIndex(col => col.caption === 'DID');
         let selectedRows = [];
@@ -603,21 +723,6 @@ handleNavigateToWGs, handleNavigateToDossiers, fetchRemoteCertificates, graphome
             return newResults;
         });
     };
-    /**
-     * Restituisce l'handler onBack per i pannelli, evitando duplicazione di codice.
-     * @param isMainPanel - Se true, è il pannello principale dei risultati di ricerca
-     */
-    const getOnBackHandler = (isMainPanel = false) => {
-        // Se showBackButton è false, non mostrare mai il back
-        if (showBackButton === false)
-            return undefined;
-        // Mobile: mostra back su tutti i pannelli (se showBackButton è definito e non è closable)
-        if (isMobile) {
-            return (showBackButton !== undefined && !isClosable) ? onBack : undefined;
-        }
-        // Desktop: mostra back solo sul pannello principale dei risultati (se showBackButton è definito e non è closable)
-        return (showBackButton !== undefined && isMainPanel && !isClosable) ? onBack : undefined;
-    };
     const removeDcmtFromFavsOrRecents = async () => {
         switch (selectedSearchResult?.category) {
             case "Favorites":
@@ -634,9 +739,9 @@ handleNavigateToWGs, handleNavigateToDossiers, fetchRemoteCertificates, graphome
     };
     const onSearchResultSelectionChanged = (e) => {
         setSelectedSearchResult(e);
-        if (deviceType === DeviceType.MOBILE) {
-            setSplitterSize(['0', '100%']);
-        }
+        // Scelto il tipo documento si passa ai risultati (a livello di layout è ignorato se i due
+        // step sono affiancati, ma vale comunque come "l'utente non è più fermo sul selettore")
+        setNavStep('results');
         onSelectedTIDChanged?.(e.fromTID);
     };
     const showToppyForApprove = useMemo(() => {
@@ -660,14 +765,15 @@ handleNavigateToWGs, handleNavigateToDossiers, fetchRemoteCertificates, graphome
             && !showTodoDcmtForm);
     }, [showToppyForApprove, showToppyDraggableHelpCenter, selectedDocs, showApprovePopup, showRejectPopup, showReAssignPopup, showMoreInfoPopup, editPdfForm, openS4TViewer, showTodoDcmtForm]);
     const searchResutlToolbar = _jsxs(_Fragment, { children: [context === SearchResultContext.FAVORITES_AND_RECENTS &&
-                _jsx("div", { style: { display: 'flex', alignItems: 'center', gap: '5px' }, children: _jsx(TMButton, { btnStyle: 'icon', icon: _jsx(IconDelete, { color: 'white' }), caption: "Rimuovi da " + (selectedSearchResult?.category === "Favorites" ? '"Preferiti"' : '"Recenti"'), disabled: getSelectedDcmtsOrFocused(selectedItems, focusedItem).length <= 0, onClick: removeDcmtFromFavsOrRecents }) }), _jsx(TMButton, { btnStyle: 'icon', icon: _jsx(IconRefresh, { color: 'white' }), caption: SDKUI_Localizator.Refresh, onClick: onRefreshSearchAsyncDatagrid }), _jsx(TMContextMenu, { items: operationItems, trigger: "left", children: _jsx(IconMenuVertical, { color: 'white', cursor: 'pointer' }) })] });
+                _jsx("div", { style: { display: 'flex', alignItems: 'center', gap: '5px' }, children: _jsx(TMButton, { btnStyle: 'icon', icon: _jsx(IconDelete, { color: 'white' }), caption: "Rimuovi da " + (selectedSearchResult?.category === "Favorites" ? '"Preferiti"' : '"Recenti"'), disabled: getSelectedDcmtsOrFocused(selectedItems, focusedItem).length <= 0, onClick: removeDcmtFromFavsOrRecents }) }), _jsx(TMButton, { btnStyle: 'icon', icon: _jsx(IconRefresh, { color: 'white' }), caption: SDKUI_Localizator.Refresh, onClick: onRefreshSearchAsyncDatagrid }), _jsx(TMContextMenu, { items: operationItems, trigger: "left", children: _jsx(IconMenuVertical, { color: 'white', cursor: 'pointer' }) }), showToolbarCloseButton && onClose &&
+                _jsx(TMButton, { btnStyle: 'icon', icon: _jsx(IconCloseOutline, { color: 'white' }), caption: SDKUI_Localizator.Close, onClick: onClose })] });
     const tmSearchResult = useMemo(() => (!searchResults || searchResults.length <= 0)
         ? _jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', width: '100%' }, children: [_jsx(IconBoard, { fontSize: 96 }), showNoDcmtFoundMessage && _jsx("div", { style: { fontSize: "15px", marginTop: "10px" }, children: SDKUI_Localizator.NoDcmtFound }), openAddDocumentForm && _jsx("div", { style: { marginTop: "10px" }, children: _jsx(TMButton, { fontSize: "15px", icon: _jsx("i", { className: 'dx-icon-share' }), caption: SDKUI_Localizator.Share, onClick: openAddDocumentForm }) })] })
         :
-            _jsxs(_Fragment, { children: [_jsxs(TMLayoutItem, { height: '100%', children: [_jsxs("div", { ref: floatingBarContainerRef, style: { position: 'relative', height: '100%', width: '100%' }, children: [_jsxs(TMSplitterLayout, { direction: 'horizontal', overflow: 'visible', separatorSize: Gutters.getGutters(), separatorActiveColor: 'transparent', separatorColor: 'transparent', min: ['0', '0'], showSeparator: showSelector && deviceType !== DeviceType.MOBILE, start: showSelector ? deviceType !== DeviceType.MOBILE ? ['30%', '70%'] : splitterSize : ['0%', '100%'], children: [showSelector ?
-                                                _jsx(TMLayoutItem, { children: _jsx(TMSearchResultSelector, { searchResults: currentSearchResults, disableAccordionIfSingleCategory: disableAccordionIfSingleCategory, selectedTID: selectedSearchResultTID, selectedSearchResult: selectedSearchResult, autoSelectFirst: !isMobile || currentSearchResults.length === 1, onSelectionChanged: onSearchResultSelectionChanged }) })
+            _jsxs(_Fragment, { children: [_jsxs(TMLayoutItem, { height: '100%', children: [_jsxs("div", { ref: floatingBarContainerRef, style: { position: 'relative', height: '100%', width: '100%' }, children: [_jsxs(TMSplitterLayout, { direction: 'horizontal', overflow: 'visible', separatorSize: Gutters.getGutters(), separatorActiveColor: 'transparent', separatorColor: 'transparent', min: ['0', '0'], showSeparator: showSelector && !isSteppedLayout && !isSelectorCollapsed, start: splitterSizes, children: [showSelector ?
+                                                _jsx(TMLayoutItem, { children: _jsx(TMSearchResultSelector, { searchResults: currentSearchResults, disableAccordionIfSingleCategory: disableAccordionIfSingleCategory, selectedTID: selectedSearchResultTID, selectedSearchResult: selectedSearchResult, autoSelectFirst: !isMobile || hasSingleDcmtType, onSelectionChanged: onSearchResultSelectionChanged }) })
                                                 :
-                                                    _jsx(_Fragment, {}), _jsx(TMLayoutItem, { children: _jsx(TMSearchResultGrid, { openInOffice: openInOffice, fromDTD: fromDTD, operationItems: operationItems, allUsers: allUsers, inputFocusedItem: focusedItem, inputSelectedItems: selectedItems, showExportForm: showExportForm, onFocusedItemChanged: handleFocusedItemChangedFromGrid, onDownloadDcmtsAsync: async (inputDcmts, downloadType, downloadMode, _y, confirmAttachments) => await downloadDcmtsAsync({ inputDcmts, downloadType, downloadMode, onFileDownloaded: onFileOpened, confirmAttachments }), lastUpdateSearchTime: lastUpdateSearchTime, searchResult: searchResults.length > 1 ? selectedSearchResult : searchResults[0], onSelectionChanged: (items) => { setSelectedItems(items); }, onDblClick: () => openFormHandler(LayoutModes.Update), showSearchTMDatagrid: showSearchTMDatagrid, onVisibleItemChanged: setVisibleItems, updateDataColumnsFromDataGrid: updateDataColumnsFromDataGrid, updateDataSourceFromDataGrid: updateDataSourceFromDataGrid, updateSelectedRowKeysFromDataGrid: updateSelectedRowKeysFromDataGrid, disableAutoFocus: autoFocusFirstRow === false && isFirstAutoFocusRef.current, dcmtsReturned: dcmtsReturned, dcmtsFound: dcmtsFound }) })] }), renderFloatingBar] }), _jsx(TMToppyDraggableHelpCenter, { usePortal: toppyHelpCenterUsePortal, isVisible: isToppyHelpCenterVisible, content: _jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: '10px' }, children: _jsx(WorkFlowOperationButtons, { dtd: fromDTD, deviceType: deviceType, onApprove: () => {
+                                                    _jsx(_Fragment, {}), _jsx(TMLayoutItem, { children: _jsx(TMSearchResultGrid, { openInOffice: openInOffice, fromDTD: fromDTD, operationItems: operationItems, allUsers: allUsers, inputFocusedItem: focusedItem, inputSelectedItems: selectedItems, showExportForm: showExportForm, onFocusedItemChanged: handleFocusedItemChangedFromGrid, onDownloadDcmtsAsync: async (inputDcmts, downloadType, downloadMode, _y, confirmAttachments) => await downloadDcmtsAsync({ inputDcmts, downloadType, downloadMode, onFileDownloaded: onFileOpened, confirmAttachments }), lastUpdateSearchTime: lastUpdateSearchTime, searchResult: searchResults.length > 1 ? selectedSearchResult : searchResults[0], onSelectionChanged: (items) => { setSelectedItems(items); }, onDblClick: () => openFormHandler(LayoutModes.Update), showSearchTMDatagrid: showSearchTMDatagrid, onVisibleItemChanged: setVisibleItems, updateDataColumnsFromDataGrid: updateDataColumnsFromDataGrid, updateDataSourceFromDataGrid: updateDataSourceFromDataGrid, updateSelectedRowKeysFromDataGrid: updateSelectedRowKeysFromDataGrid, disableAutoFocus: autoFocusFirstRow === false && isFirstAutoFocusRef.current, dcmtsReturned: dcmtsReturned, dcmtsFound: dcmtsFound, showCounterConfig: showCounterConfig, counterConfig: counterConfig, showActionsColumn: showActionsColumn, compactPager: compactPager, onRowActionRequest: requestRowAction }) })] }), renderFloatingBar] }), _jsx(TMToppyDraggableHelpCenter, { usePortal: toppyHelpCenterUsePortal, isVisible: isToppyHelpCenterVisible, content: _jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: '10px' }, children: _jsx(WorkFlowOperationButtons, { dtd: fromDTD, deviceType: deviceType, onApprove: () => {
                                             updateShowApprovePopup(true);
                                         }, onSignApprove: () => {
                                             handleSignApprove();
@@ -687,7 +793,6 @@ handleNavigateToWGs, handleNavigateToDossiers, fetchRemoteCertificates, graphome
         showApprovePopup,
         showRejectPopup,
         showReAssignPopup,
-        isOpenBatchUpdate,
         isOpenDetails,
         isOpenMaster,
         isOpenDcmtForm,
@@ -698,6 +803,10 @@ handleNavigateToWGs, handleNavigateToDossiers, fetchRemoteCertificates, graphome
         openS4TViewer,
         showBackButton,
         isMobile,
+        navStep,
+        isSteppedLayout,
+        isSelectorCollapsed,
+        currentSearchResults,
         currentMetadataValues,
         onRefreshSearchAsyncDatagrid,
         handleNavigateToWGs,
@@ -705,9 +814,14 @@ handleNavigateToWGs, handleNavigateToDossiers, fetchRemoteCertificates, graphome
         editPdfForm,
         showNoDcmtFoundMessage
     ]);
-    const tmBlog = useMemo(() => _jsx(TMDcmtBlog, { tid: focusedItem?.TID, did: focusedItem?.DID, fetchBlogDataTrigger: refreshBlogTrigger, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers }), [focusedItem, allTasks, refreshBlogTrigger, handleNavigateToWGs, handleNavigateToDossiers, onRefreshBlogDatagrid]);
+    /**
+     * Il risultato è davvero a video: le pagine restano montate anche in secondo piano, e senza questo
+     * bacheca e anteprima scaricherebbero il documento fuori campo.
+     */
+    const isSearchResultOnScreen = isVisible && !isOpenDcmtForm && !isOpenDetails && !isOpenMaster;
+    const tmBlog = useMemo(() => _jsx(TMDcmtBlog, { tid: focusedItem?.TID, did: focusedItem?.DID, isPageVisible: isSearchResultOnScreen, fetchBlogDataTrigger: refreshBlogTrigger, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers }), [focusedItem, allTasks, refreshBlogTrigger, isSearchResultOnScreen, handleNavigateToWGs, handleNavigateToDossiers, onRefreshBlogDatagrid]);
     const tmSysMetadata = useMemo(() => _jsx(TMMetadataValues, { layoutMode: LayoutModes.Update, openChooserBySingleClick: true, TID: focusedItem?.TID, isReadOnly: true, deviceType: deviceType, metadataValues: currentMetadataValues.filter(o => (o.mid != undefined && o.mid <= 100)), metadataValuesOrig: currentMetadataValues.filter(o => (o.mid != undefined && o.mid <= 100)), validationItems: [] }), [focusedItem, currentMetadataValues, deviceType]);
-    const tmDcmtPreview = useMemo(() => _jsx(TMDcmtPreviewWrapper, { refreshPreviewTrigger: refreshPreviewTrigger, currentDcmt: currentDcmt, onBack: getOnBackHandler() }), [currentDcmt, refreshPreviewTrigger]);
+    const tmDcmtPreview = useMemo(() => _jsx(TMDcmtPreviewWrapper, { refreshPreviewTrigger: refreshPreviewTrigger, currentDcmt: currentDcmt, isPageVisible: isSearchResultOnScreen, onBack: backHandlerSecondary }), [currentDcmt, refreshPreviewTrigger, isSearchResultOnScreen, backHandlerSecondary]);
     // Auto-fetch indexing info when drawer is open and focusedItem changes
     useEffect(() => {
         if (!focusedItem || !showIndexingInfo)
@@ -764,6 +878,22 @@ handleNavigateToWGs, handleNavigateToDossiers, fetchRemoteCertificates, graphome
         }
         return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', height: '100%', overflow: 'hidden', width: '100%' }, children: [_jsx("div", { style: { padding: '10px', overflow: 'auto', flex: 1 }, children: _jsx("div", { dangerouslySetInnerHTML: { __html: ftExplanation } }) }), _jsxs(StyledIndexingInfoSection, { children: [_jsxs(StyledIndexingToggle, { onClick: handleToggleIndexingInfo, disabled: loadingIndexingInfo, children: [_jsx(StyledLeftContent, { children: _jsx("span", { children: SDKUI_Localizator.IndexingInformation }) }), _jsx(StyledRightContent, { children: _jsx(StyledChevron, { "$isOpen": showIndexingInfo, children: "\u25BC" }) })] }), showIndexingInfo && indexingInfo && (_jsxs(StyledIndexingInfoBox, { children: [_jsx("div", { dangerouslySetInnerHTML: { __html: indexingInfo } }), loadingIndexingInfo && (_jsxs("div", { style: { position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', background: 'rgba(255, 255, 255, 0.9)', padding: '10px', borderRadius: '4px', boxShadow: '0 2px 8px rgba(0,0,0,0.15)' }, children: [SDKUI_Localizator.Loading, "..."] }))] }))] })] }));
     }, [selectedSearchResult, focusedItem, indexingInfo, showIndexingInfo, loadingIndexingInfo]);
+    /**
+     * Su mobile i pannelli si mostrano uno per volta, quindi il layout non va ricordato; con groupId
+     * i pannelli sono di un panel manager esterno, che ha un layout suo. Senza la barra laterale
+     * l'utente non può aprire/chiudere i pannelli: non ha senso applicargli il layout salvato (li
+     * troverebbe aperti senza poterli chiudere) né lasciargli sporcare quello condiviso.
+     * Il layout salvato vale solo per il login con Surfer: gli altri moduli hanno layout propri.
+     */
+    const isLayoutPersisted = SDK_Globals.tmSession?.SessionDescr?.appModuleID === AppModules.SURFER && !isMobile && !groupId?.length && showSearchResultSidebar && PERSISTED_LAYOUT_CONTEXTS.includes(context);
+    /**
+     * Pannelli che questo risultato non può mostrare (la bacheca è l'unico, vedi PanelDisabledStateHandler).
+     * Il layout è condiviso con gli altri risultati aperti: qui non vanno aperti quando il layout lo chiede,
+     * e il loro stato salvato non va toccato, altrimenti li si chiuderebbe dove invece sono attivi.
+     */
+    const disabledLayoutPanelIds = isBoardDisabled ? ['tmBlog'] : [];
+    /** Bacheca aperta nel layout salvato: da riaprire quando il tipo documento torna a prevederla */
+    const savedBlogVisible = isLayoutPersisted && (getSearchResultPanelLayout()['tmBlog']?.visible ?? false);
     const allInitialPanelVisibility = {
         'tmSearchResult': true,
         'tmBlog': false,
@@ -786,9 +916,11 @@ handleNavigateToWGs, handleNavigateToDossiers, fetchRemoteCertificates, graphome
                 component: tmSearchResult,
                 panelContainer: {
                     title: getTitleHeader(),
+                    enableTitleMarquee: true,
                     showHeader: showToolbarHeader,
                     allowMaximize: !isMobile,
-                    onBack: getOnBackHandler(true),
+                    onBack: backHandler,
+                    backCaption: backCaption,
                     onClose: isClosable ? onBack : undefined,
                     toolbar: searchResutlToolbar
                 },
@@ -803,7 +935,7 @@ handleNavigateToWGs, handleNavigateToDossiers, fetchRemoteCertificates, graphome
                 panelContainer: {
                     title: SDKUI_Localizator.BlogCase,
                     allowMaximize: !isMobile,
-                    onBack: getOnBackHandler(),
+                    onBack: backHandlerSecondary,
                 }
             },
             toolbarOptions: { icon: _jsx(IconBoard, { fontSize: 24 }), visible: getSearchToolbarVisibility(SDK_Globals.tmSession?.SessionDescr?.appModuleID ?? AppModules.SURFER).tmBlog, orderNumber: 2, isActive: allInitialPanelVisibility['tmBlog'] }
@@ -816,7 +948,7 @@ handleNavigateToWGs, handleNavigateToDossiers, fetchRemoteCertificates, graphome
                 panelContainer: {
                     title: SDKUI_Localizator.MetadataSystem,
                     allowMaximize: !isMobile,
-                    onBack: getOnBackHandler(),
+                    onBack: backHandlerSecondary,
                 }
             },
             toolbarOptions: { icon: _jsx(IconDcmtTypeSys, { fontSize: 24 }), visible: getSearchToolbarVisibility(SDK_Globals.tmSession?.SessionDescr?.appModuleID ?? AppModules.SURFER).tmSysMetadata, orderNumber: 3, isActive: allInitialPanelVisibility['tmSysMetadata'] }
@@ -830,7 +962,7 @@ handleNavigateToWGs, handleNavigateToDossiers, fetchRemoteCertificates, graphome
                     panelContainer: {
                         title: SDKUI_Localizator.ResultDetails,
                         allowMaximize: !isMobile,
-                        onBack: getOnBackHandler(),
+                        onBack: backHandlerSecondary,
                     }
                 },
                 toolbarOptions: { icon: _jsx(IconPlatform, { fontSize: 20 }), visible: getSearchToolbarVisibility(SDK_Globals.tmSession?.SessionDescr?.appModuleID ?? AppModules.SURFER).tmFullTextSearch, orderNumber: 4, isActive: allInitialPanelVisibility['tmFullTextSearch'] }
@@ -844,21 +976,49 @@ handleNavigateToWGs, handleNavigateToDossiers, fetchRemoteCertificates, graphome
             },
             toolbarOptions: { icon: _jsx(IconShow, { fontSize: 24 }), visible: getSearchToolbarVisibility(SDK_Globals.tmSession?.SessionDescr?.appModuleID ?? AppModules.SURFER).tmDcmtPreview, orderNumber: context === SearchResultContext.FREE_SEARCH ? 5 : 4, isActive: allInitialPanelVisibility['tmDcmtPreview'] }
         }
-    ], [tmSearchResult, tmBlog, tmSysMetadata, tmDcmtPreview, tmFullTextSearch, showToolbarHeader, context, isMobile]);
-    return (_jsxs(StyledMultiViewPanel, { "$isVisible": isVisible, children: [_jsx(StyledMultiViewPanel, { "$isVisible": !isOpenDcmtForm && !isOpenDetails && !isOpenMaster, style: {
+    ], [tmSearchResult, tmBlog, tmSysMetadata, tmDcmtPreview, tmFullTextSearch, showToolbarHeader, context, isMobile, backHandler, backHandlerSecondary, isClosable, onBack, backCaption]);
+    /** Contenuto del panel manager: con groupId sta nel provider del contenitore, altrimenti in quello qui sotto */
+    const panelManagerContent = (_jsxs(_Fragment, { children: [_jsx(PanelDisabledStateHandler, { isBoardDisabled: isBoardDisabled, savedBlogVisible: savedBlogVisible }), isLayoutPersisted && _jsx(SavedLayoutSyncHandler, { disabledPanelIds: disabledLayoutPanelIds }), _jsx(ShowMainPanelBridge, { showMainPanelRef: showMainPanelRef }), _jsx(TMPanelManagerContainer, { panels: initialPanels, direction: "horizontal", parentId: groupId, showToolbar: showSearchResultSidebar })] }));
+    return (_jsxs(StyledMultiViewPanel, { "$isVisible": isVisible, children: [_jsx(StyledMultiViewPanel, { "$isVisible": (!isOpenDcmtForm || isDcmtFormModal) && !isOpenDetails && !isOpenMaster, style: {
                     display: 'flex',
                     flexDirection: isMobile ? 'column' : 'row',
                     justifyContent: 'space-between',
                     gap: Gutters.getGutters(),
                     width: '100%',
                     height: '100%',
-                }, children: _jsx(TMLayoutWaitingContainer, { direction: 'vertical', showWaitPanel: showWaitPanel, showWaitPanelPrimary: showPrimary, showWaitPanelSecondary: showSecondary, waitPanelTitle: waitPanelTitle, waitPanelTextPrimary: waitPanelTextPrimary, waitPanelValuePrimary: waitPanelValuePrimary, waitPanelMaxValuePrimary: waitPanelMaxValuePrimary, waitPanelTextSecondary: waitPanelTextSecondary, waitPanelValueSecondary: waitPanelValueSecondary, waitPanelMaxValueSecondary: waitPanelMaxValueSecondary, isCancelable: true, abortController: abortController, children: _jsx(TMLayoutWaitingContainer, { direction: 'vertical', showWaitPanel: showCicoWaitPanel, showWaitPanelPrimary: showCicoPrimaryProgress, waitPanelTitle: cicoWaitPanelTitle, waitPanelTextPrimary: cicoPrimaryProgressText, waitPanelValuePrimary: cicoPrimaryProgressValue, waitPanelMaxValuePrimary: cicoPrimaryProgressMax, isCancelable: true, abortController: abortControllerLocal, children: (groupId && groupId.length > 0) ?
-                            _jsxs(_Fragment, { children: [_jsx(PanelDisabledStateHandler, { isBoardDisabled: isBoardDisabled }), _jsx(TMPanelManagerContainer, { panels: initialPanels, direction: "horizontal", parentId: groupId, showToolbar: showSearchResultSidebar })] })
-                            :
-                                _jsxs(TMPanelManagerProvider, { panels: initialPanels, initialVisibility: allInitialPanelVisibility, defaultDimensions: initialPanelDimensions, initialDimensions: initialPanelDimensions, initialMobilePanelId: 'tmSearchResult', children: [_jsx(PanelDisabledStateHandler, { isBoardDisabled: isBoardDisabled }), _jsx(TMPanelManagerContainer, { panels: initialPanels, direction: "horizontal", parentId: groupId, showToolbar: showSearchResultSidebar })] }) }) }) }), renderDcmtOperations] }));
+                }, children: _jsx(TMLayoutWaitingContainer, { direction: 'vertical', showWaitPanel: showWaitPanel, showWaitPanelPrimary: showPrimary, showWaitPanelSecondary: showSecondary, waitPanelTitle: waitPanelTitle, waitPanelTextPrimary: waitPanelTextPrimary, waitPanelValuePrimary: waitPanelValuePrimary, waitPanelMaxValuePrimary: waitPanelMaxValuePrimary, waitPanelTextSecondary: waitPanelTextSecondary, waitPanelValueSecondary: waitPanelValueSecondary, waitPanelMaxValueSecondary: waitPanelMaxValueSecondary, isCancelable: true, abortController: abortController, children: _jsx(TMLayoutWaitingContainer, { direction: 'vertical', showWaitPanel: showCicoWaitPanel, showWaitPanelPrimary: showCicoPrimaryProgress, waitPanelTitle: cicoWaitPanelTitle, waitPanelTextPrimary: cicoPrimaryProgressText, waitPanelValuePrimary: cicoPrimaryProgressValue, waitPanelMaxValuePrimary: cicoPrimaryProgressMax, isCancelable: true, abortController: abortControllerLocal, children: (groupId && groupId.length > 0) ? panelManagerContent
+                            // Senza le prop di persistenza il provider si comporta come quello base:
+                            // i contesti che non ricordano il layout restano come prima
+                            : _jsx(TMPanelManagerWithPersistenceProvider, { panels: initialPanels, initialVisibility: allInitialPanelVisibility, defaultDimensions: initialPanelDimensions, initialDimensions: initialPanelDimensions, initialMobilePanelId: 'tmSearchResult', isPersistenceEnabled: isLayoutPersisted && hasSearchResultPanelLayout(), persistPanelStates: isLayoutPersisted ? (state) => saveSearchResultPanelLayout(state, disabledLayoutPanelIds) : undefined, persistedPanelStates: isLayoutPersisted ? getSearchResultPanelLayout() : undefined, children: panelManagerContent }) }) }) }), renderDcmtOperations] }));
 };
 export default TMSearchResult;
-const TMSearchResultGrid = ({ openInOffice, fromDTD, operationItems, allUsers, inputFocusedItem, allowMultipleSelection = true, showExportForm = false, onFocusedItemChanged, onDownloadDcmtsAsync, onVisibleItemChanged, inputSelectedItems = [], lastUpdateSearchTime, searchResult, onSelectionChanged, onDblClick, showSearchTMDatagrid, updateDataColumnsFromDataGrid, updateDataSourceFromDataGrid, updateSelectedRowKeysFromDataGrid, disableAutoFocus = false, dcmtsReturned, dcmtsFound }) => {
+/** Cerca una voce di operazione per id, anche dentro i sottomenu */
+const findOperationItemById = (items, id) => {
+    for (const item of items) {
+        if (item.id === id)
+            return item;
+        const found = item.submenu ? findOperationItemById(item.submenu, id) : undefined;
+        if (found)
+            return found;
+    }
+    return undefined;
+};
+/**
+ * Azioni della colonna di riga. Gli id sono quelli di useDocumentOperations, così il comportamento è
+ * lo stesso del menu contestuale; icone e colori sono allineati alle altre griglie mentre il tooltip
+ * resta il nome dell'operazione. "Cancella" è la cancellazione logica: ripristino ed eliminazione
+ * fisica restano nel menu contestuale, dove la scelta è esplicita.
+ */
+const rowActions = [
+    { operationId: 'open-form', icon: _jsx(IconEdit, { fontSize: 18, color: TMColors.primary }) },
+    { operationId: 'dup', icon: _jsx(IconDuplicate, { fontSize: 18, color: TMColors.tertiary }) },
+    { operationId: 'del-log', icon: _jsx(IconDelete, { fontSize: 18, color: TMColors.error }), isVisible: (rowData) => rowData?.ISLOGDEL != 1 },
+];
+const rowActionsStyles = {
+    cell: { display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '14px' },
+    icon: { cursor: 'pointer', display: 'flex' },
+};
+const TMSearchResultGrid = ({ openInOffice, fromDTD, operationItems, allUsers, inputFocusedItem, allowMultipleSelection = true, showExportForm = false, onFocusedItemChanged, onDownloadDcmtsAsync, onVisibleItemChanged, inputSelectedItems = [], lastUpdateSearchTime, searchResult, onSelectionChanged, onDblClick, showSearchTMDatagrid, updateDataColumnsFromDataGrid, updateDataSourceFromDataGrid, updateSelectedRowKeysFromDataGrid, disableAutoFocus = false, dcmtsReturned, dcmtsFound, showCounterConfig = true, counterConfig, showActionsColumn = false, compactPager = false, onRowActionRequest, }) => {
     const [dataSource, setDataSource] = useState();
     const [columns, setColumns] = useState([]);
     const [selectedRowKeys, setSelectedRowKeys] = useState([]);
@@ -879,8 +1039,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))
@@ -1112,6 +1272,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,
@@ -1203,6 +1414,9 @@ const TMSearchResultGrid = ({ openInOffice, fromDTD, operationItems, allUsers, i
             // Era sull'icona, non fare nulla
             return;
         }
+        // Due click rapidi su un'icona della colonna azioni non devono aprire anche il form
+        if (e.event?.target.closest('.tm-row-actions'))
+            return;
         // Verifica che il documento abbia TID e DID validi prima di procedere
         if (!e.data.TID || !e.data.DID) {
             ShowAlert({
@@ -1216,8 +1430,43 @@ const TMSearchResultGrid = ({ openInOffice, fromDTD, operationItems, allUsers, i
         onFocusedItemChanged?.(e.data);
         onDblClick();
     }, [onDblClick]);
+    /**
+     * Colonna delle azioni di riga, in testa alla griglia (subito dopo la checkbox di selezione, che
+     * DevExtreme tiene sempre per prima). Vive solo qui e non nello stato `columns`, che è quello
+     * sincronizzato col padre per l'esportazione: una colonna senza dataField finirebbe in Excel come
+     * colonna vuota.
+     *
+     * Le operazioni sono lette da una ref perché `operationItems` è ricostruito a ogni render del
+     * padre: usarlo come dipendenza renderebbe nuova la colonna, e con essa `dataColumns`, ad ogni
+     * giro. La cellRender le rilegge a ogni ridisegno della griglia, quindi resta comunque aggiornata.
+     */
+    const operationItemsRef = useRef(operationItems);
+    operationItemsRef.current = operationItems;
+    const actionsColumn = useMemo(() => ({
+        caption: '',
+        width: 110,
+        alignment: 'center',
+        allowSorting: false,
+        allowFiltering: false,
+        allowHeaderFiltering: false,
+        allowResizing: false,
+        allowReordering: false,
+        allowHiding: false,
+        allowExporting: false,
+        showInColumnChooser: false,
+        cssClass: 'tm-row-actions',
+        cellRender: (cellData) => (_jsx("div", { style: rowActionsStyles.cell, children: rowActions.map(action => {
+                const operation = findOperationItemById(operationItemsRef.current, action.operationId);
+                if (!operation || operation.visible === false)
+                    return null;
+                if (action.isVisible && !action.isVisible(cellData.data))
+                    return null;
+                return (_jsx("span", { style: rowActionsStyles.icon, title: operation.name, onClick: () => onRowActionRequest?.(action.operationId, cellData.data), children: action.icon }, action.operationId));
+            }) })),
+    }), [onRowActionRequest]);
     const dataColumns = useMemo(() => {
         return [
+            ...(showActionsColumn ? [actionsColumn] : []),
             {
                 dataType: "object",
                 dataField: 'FILEEXT',
@@ -1231,7 +1480,7 @@ const TMSearchResultGrid = ({ openInOffice, fromDTD, operationItems, allUsers, i
             },
             ...columns.filter(col => col.dataField !== 'FILEEXT')
         ];
-    }, [columns, onDownloadDcmtsAsync, openInOffice]);
+    }, [columns, onDownloadDcmtsAsync, openInOffice, showActionsColumn, actionsColumn]);
     const onContentReady = useCallback((e) => {
         if (e === undefined)
             return;
@@ -1242,21 +1491,22 @@ 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: {
+    const defaultCounterItems = dcmtsReturned !== undefined && dcmtsFound !== undefined
+        ? new Map([
+            [CounterItemKey.allItems, {
+                    key: CounterItemKey.allItems,
                     show: true,
-                    items: dcmtsReturned !== undefined && dcmtsFound !== undefined
-                        ? new Map([
-                            [CounterItemKey.allItems, {
-                                    key: CounterItemKey.allItems,
-                                    show: true,
-                                    caption: `${dcmtsReturned} restituiti su ${dcmtsFound} trovati`,
-                                    value: `${dcmtsReturned}/${dcmtsFound}`,
-                                    icon: _jsx(IconAll, {}),
-                                    order: -1
-                                }]
-                        ])
-                        : undefined
-                } })] });
+                    caption: `${dcmtsReturned} restituiti su ${dcmtsFound} trovati`,
+                    value: `${dcmtsReturned}/${dcmtsFound}`,
+                    icon: _jsx(IconAll, {}),
+                    order: -1
+                }]
+        ])
+        : undefined;
+    const gridCounterConfig = showCounterConfig
+        ? { ...counterConfig, show: true, items: counterConfig?.items ?? defaultCounterItems }
+        : { show: false };
+    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, compactPager: compactPager, onSelectionChanged: handleSelectionChange, onFocusedRowChanged: handleFocusedRowChange, onRowDblClick: onRowDblClick, onContentReady: onContentReady, showHeaderColumnChooser: true, onKeyDown: onKeyDown, customContextMenuItems: operationItems, counterConfig: gridCounterConfig })] });
 };
 //#region TMSearchResultSelector
 const StyledItemTemplate = styled.div ` 
@@ -1317,14 +1567,29 @@ const TMSearchResultSelector = ({ searchResults = [], disableAccordionIfSingleCa
             }
         }
     }, [sortedCategories.length, autoSelectFirst]);
+    // La preselezione esterna va applicata una volta per valore: riapplicarla a ogni cambio di
+    // searchResults faceva sì che un refresh annullasse la navigazione dell'utente.
+    const appliedSelectedTIDRef = useRef(undefined);
     useEffect(() => {
-        if (selectedTID !== undefined) {
-            const found = searchResults.find(r => Number(r.fromTID) === selectedTID);
-            handleSelect(found);
+        // Richiesta ritirata: dimentichiamo il valore applicato, così se il chiamante richiede di
+        // nuovo lo stesso TID la preselezione riparte
+        if (selectedTID === undefined) {
+            appliedSelectedTIDRef.current = undefined;
+            return;
         }
+        if (appliedSelectedTIDRef.current === selectedTID)
+            return;
+        const found = searchResults.find(r => Number(r.fromTID) === selectedTID);
+        if (!found)
+            return; // risultati non ancora arrivati: riproviamo al prossimo giro
+        appliedSelectedTIDRef.current = selectedTID;
+        handleSelect(found);
     }, [selectedTID, searchResults]);
-    const handleSelect = useCallback((result) => {
-        if (selectedResult !== result && result !== undefined) {
+    // force = true per i click dell'utente: la selezione va notificata anche se il tipo documento è già quello selezionato
+    const handleSelect = useCallback((result, force = false) => {
+        if (result === undefined)
+            return;
+        if (selectedResult !== result || force) {
             setSelectedResult(result);
             onSelectionChanged?.(result);
         }
@@ -1369,32 +1634,88 @@ const TMSearchResultSelector = ({ searchResults = [], disableAccordionIfSingleCa
         renderItem: (result, isSelected) => (_jsxs("div", { style: { width: '100%', padding: '5px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }, children: [_jsx(TMTidViewer, { tid: result.fromTID, did: Number(result.dtdResult?.rows?.[0]?.[1]), showIcon: true }), _jsx("div", { style: { padding: 3, display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: 'white', color: 'gray', borderRadius: 3 }, children: result.dcmtsReturned })] })),
         itemHeight: 40
     })), [sortedCategories, groupedResults, searchResults]);
-    const renderCategoryItems = (category) => (_jsx("div", { style: { padding: '5px', height: '100%', overflow: 'auto' }, children: groupedResults[category].map((result, index) => (_jsx(MemoizedStyledItemTemplate, { "$isSelected": selectedResult === result, onClick: () => handleSelect(result), children: renderItemTemplate(result) }, index))) }));
+    const renderCategoryItems = (category) => (_jsx("div", { style: { padding: '5px', height: '100%', overflow: 'auto' }, children: groupedResults[category].map((result, index) => (_jsx(MemoizedStyledItemTemplate, { "$isSelected": selectedResult === result, onClick: () => handleSelect(result, true), children: renderItemTemplate(result) }, index))) }));
     if (disableAccordionIfSingleCategory && sortedCategories.length === 1) {
         const category = sortedCategories[0];
         return renderCategoryItems(category);
     }
-    return (_jsx(TMAccordionNew, { groups: accordionGroups, selectedItem: selectedResult, onSelectedItemChange: (result) => handleSelect(result) }));
+    return (_jsx(TMAccordionNew, { groups: accordionGroups, selectedItem: selectedResult, onSelectedItemChange: (result) => handleSelect(result, true) }));
 };
 //#endregion TMSearchResultSelector
-const PanelDisabledStateHandler = ({ isBoardDisabled }) => {
-    const { setPanelVisibilityById, setToolbarButtonDisabled } = useTMPanelManagerContext();
+/** Senza UI: vive dentro il provider e passa a onBack, via ref, l'azione "mostra il pannello lista". */
+const ShowMainPanelBridge = ({ showMainPanelRef }) => {
+    const { setPanelVisibilityById } = useTMPanelManagerContext();
     useEffect(() => {
-        if (isBoardDisabled) {
-            setToolbarButtonDisabled('tmBlog', true);
-            setPanelVisibilityById('tmBlog', false);
-        }
-        else {
-            setToolbarButtonDisabled('tmBlog', false);
-        }
+        // Su mobile mostrare un pannello nasconde gli altri; su desktop la lista è già visibile
+        showMainPanelRef.current = () => setPanelVisibilityById('tmSearchResult', true);
+        return () => { showMainPanelRef.current = null; };
+    }, [setPanelVisibilityById, showMainPanelRef]);
+    return null;
+};
+/** Senza UI: allinea i pannelli quando il layout viene salvato da un altro risultato di ricerca già aperto */
+const SavedLayoutSyncHandler = ({ disabledPanelIds }) => {
+    const { panelVisibility, panelDimensions, maximizedPanels, isResizingActive, setPanelVisibilityById, setPanelDimensionsById } = useTMPanelManagerContext();
+    // Il layout è condiviso fra i risultati aperti: si sottoscrive la firma, che è una stringa, perché
+    // React confronta le letture per riferimento e su un oggetto ri-renderizzerebbe all'infinito
+    const savedLayoutSignature = useSyncExternalStore(subscribeSearchResultPanelLayout, getSearchResultPanelLayoutSignature);
+    useEffect(() => {
+        // Con un pannello massimizzato o un separatore in movimento comanda l'utente di questa istanza
+        if (maximizedPanels.length > 0 || isResizingActive)
+            return;
+        // Al mount panelVisibility è ancora vuota: lo stato iniziale lo applica il provider.
+        // Un pannello disabilitato qui non va aperto, gli altri si allineano comunque
+        const panelsToApply = Object.entries(getSearchResultPanelLayout())
+            .filter(([id, state]) => panelVisibility[id] !== undefined && !(state?.visible && disabledPanelIds.includes(id)));
+        panelsToApply.forEach(([id, state]) => {
+            const isVisible = state?.visible ?? false;
+            if (panelVisibility[id] !== isVisible)
+                setPanelVisibilityById(id, isVisible);
+        });
+        // Le larghezze salvate valgono come pesi, non come percentuali: qui si normalizzano sui soli pannelli
+        // che questo risultato apre davvero, così lo spazio di quelli scartati non resta vuoto
+        const panelsToShow = panelsToApply.filter(([, state]) => state?.visible && parseFloat(state.width) > 0 && parseFloat(state.height) > 0);
+        const weightTotal = panelsToShow.reduce((total, [, state]) => total + parseFloat(state.width), 0);
+        if (weightTotal <= 0)
+            return;
+        // Dopo la visibilità, che accoda un suo ricalcolo delle quote: così restano quelle salvate.
+        // Le quote sono arrotondate, altrimenti due risultati si rincorrono sugli ultimi decimali
+        panelsToShow.forEach(([id, state]) => {
+            const width = `${Math.round(parseFloat(state.width) / weightTotal * 10000) / 100}%`;
+            if (panelDimensions[id]?.width === width && panelDimensions[id]?.height === state.height)
+                return;
+            setPanelDimensionsById(id, width, state.height);
+        });
+    }, [savedLayoutSignature]);
+    return null;
+};
+const PanelDisabledStateHandler = ({ isBoardDisabled, savedBlogVisible = false }) => {
+    const { panelVisibility, setPanelVisibilityById, setToolbarButtonDisabled } = useTMPanelManagerContext();
+    const isBlogVisible = panelVisibility['tmBlog'] ?? false;
+    useEffect(() => {
+        setToolbarButtonDisabled('tmBlog', isBoardDisabled);
     }, [isBoardDisabled]);
+    /**
+     * Senza bacheca nel tipo documento il pannello va chiuso ogni volta che ricompare, non solo al cambio
+     * di stato: il layout salvato viene applicato dopo questo effetto e può riportarlo a video.
+     * È un effetto di layout per chiuderlo prima che venga disegnato, altrimenti lampeggia.
+     */
+    useLayoutEffect(() => {
+        if (isBoardDisabled && isBlogVisible)
+            setPanelVisibilityById('tmBlog', false);
+    }, [isBoardDisabled, isBlogVisible]);
+    // Bacheca di nuovo prevista: si riapre come da layout salvato. isBlogVisible non è fra le dipendenze,
+    // altrimenti riaprirebbe il pannello appena chiuso dall'utente
+    useEffect(() => {
+        if (!isBoardDisabled && savedBlogVisible && !isBlogVisible)
+            setPanelVisibilityById('tmBlog', true);
+    }, [isBoardDisabled, savedBlogVisible]);
     return null;
 };
-const TMDcmtPreviewWrapper = ({ refreshPreviewTrigger, currentDcmt, isVisible, onBack }) => {
+const TMDcmtPreviewWrapper = ({ refreshPreviewTrigger, currentDcmt, isVisible, isPageVisible = true, onBack }) => {
     const { setPanelVisibilityById, toggleMaximize, isResizingActive, countVisibleLeafPanels } = useTMPanelManagerContext();
     const deviceType = useDeviceType();
     const isMobile = deviceType === DeviceType.MOBILE;
-    return (_jsx(TMDcmtPreview, { dcmtData: currentDcmt, onClosePanel: (!isMobile && countVisibleLeafPanels() > 1) ? () => setPanelVisibilityById('tmDcmtPreview', false) : undefined, onBack: onBack, allowMaximize: !isMobile && countVisibleLeafPanels() > 1, onMaximizePanel: (!isMobile && countVisibleLeafPanels() > 1) ? () => toggleMaximize("tmDcmtPreview") : undefined, isResizingActive: isResizingActive, isVisible: isVisible }, refreshPreviewTrigger));
+    return (_jsx(TMDcmtPreview, { dcmtData: currentDcmt, onClosePanel: (!isMobile && countVisibleLeafPanels() > 1) ? () => setPanelVisibilityById('tmDcmtPreview', false) : undefined, onBack: onBack, allowMaximize: !isMobile && countVisibleLeafPanels() > 1, onMaximizePanel: (!isMobile && countVisibleLeafPanels() > 1) ? () => toggleMaximize("tmDcmtPreview") : undefined, isResizingActive: isResizingActive, isVisible: isVisible && isPageVisible }, refreshPreviewTrigger));
 };
 // Styled Components
 const StyledPlaceholder = styled.div `