@topconsultnpm/sdkui-react 6.22.0-dev3.3 → 6.22.0-dev3.5

package/lib/components/features/search/TMSearch.d.ts

@@ -46,5 +46,5 @@ interface ITMSearchProps {
     fetchRemoteCertificates?: (email: string) => Promise<IntesiCertificateData[]>;
     graphometricManager?: IGraphometricManagerProp;
 }
-declare const TMSearch: React.FunctionComponent<ITMSearchProps>;
+declare const TMSearch: (props: ITMSearchProps) => React.JSX.Element;
 export default TMSearch;

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

@@ -1,12 +1,12 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { SavedQueryCacheService, DcmtTypeListCacheService, SDK_Localizator, LayoutModes } from '@topconsultnpm/sdk-ts';
 import TMSavedQuerySelector from './TMSavedQuerySelector';
 import TMTreeSelector from './TMTreeSelector';
-import { TabPanel, Item } from 'devextreme-react/tab-panel';
 import TMSearchQueryPanel, { refreshLastSearch } from './TMSearchQueryPanel';
 import { getSysAllDcmtsSQD, SYS_ALL_DCMTS_SQD_ID, IconFilter, IconRecentlyViewed, IconSavedQuery, IconTree, mergeSearchResultsAppend, removeMruTid, SDKUI_Globals, SDKUI_Localizator, updateMruTids } from '../../../helper';
 import TMSearchResult from './TMSearchResult';
+import TMTabControl, { TMTabPanel, useTMTabs } from '../../base/TMTabControl';
 import TMRecentsManager from '../../grids/TMRecentsManager';
 import { SearchResultContext } from '../../../ts';
 import { useDeviceType, DeviceType } from '../../base/TMDeviceProvider';
@@ -20,7 +20,7 @@ var TMSearchViews;
     TMSearchViews[TMSearchViews["Search"] = 0] = "Search";
     TMSearchViews[TMSearchViews["Result"] = 1] = "Result";
 })(TMSearchViews || (TMSearchViews = {}));
-const TMSearch = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallback, addTaskCallback, editTaskCallback, handleNavigateToWGs, handleNavigateToDossiers, openInOffice, isVisible, inputTID, inputSqdID, inputMids, isExpertMode = SDKUI_Globals.userSettings.advancedSettings.expertMode === 1, floatingActionConfig, onFileOpened, onRefreshAfterAddDcmtToFavs, onTaskCreateRequest, openWGsCopyMoveForm, editPdfForm = false, openS4TViewer, onOpenS4TViewerRequest, onOpenPdfEditorRequest, openFileUploaderPdfEditor, showTodoDcmtForm, showToppyDraggableHelpCenter = true, toppyHelpCenterUsePortal = false, passToArchiveCallback, onCurrentTIDChangedCallback, onlyShowSearchQueryPanel, onReferenceClick, refreshFavoriteSavedQueries, inputDID, formAutoOpen, fetchRemoteCertificates, graphometricManager }) => {
+const TMSearchInstance = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallback, addTaskCallback, editTaskCallback, handleNavigateToWGs, handleNavigateToDossiers, openInOffice, isVisible, inputTID, inputSqdID, inputMids, isExpertMode = SDKUI_Globals.userSettings.advancedSettings.expertMode === 1, floatingActionConfig, onFileOpened, onRefreshAfterAddDcmtToFavs, onTaskCreateRequest, openWGsCopyMoveForm, editPdfForm = false, openS4TViewer, onOpenS4TViewerRequest, onOpenPdfEditorRequest, openFileUploaderPdfEditor, showTodoDcmtForm, showToppyDraggableHelpCenter = true, toppyHelpCenterUsePortal = false, passToArchiveCallback, onCurrentTIDChangedCallback, onlyShowSearchQueryPanel, onReferenceClick, refreshFavoriteSavedQueries, inputDID, formAutoOpen, fetchRemoteCertificates, graphometricManager, onSelectedNameChanged }) => {
     const [allSQDs, setAllSQDs] = useState([]);
     const [filteredByTIDSQDs, setFilteredByTIDSQDs] = useState([]);
     const [currentSQD, setCurrentSQD] = useState();
@@ -34,6 +34,20 @@ const TMSearch = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallback, addTask
     const [lastQdSearched, setLastQdSearched] = useState();
     const [showSearchResults, setShowSearchResults] = useState(!onlyShowSearchQueryPanel);
     const [maxDcmtsToBeReturned, setMaxDcmtsToBeReturned] = useState(SDKUI_Globals.userSettings.searchSettings?.maxDcmtsToBeReturned ?? 1000);
+    // Il titolo del tab e' il nome del tipo documento dell'ultima scelta dell'utente, sia questa fatta
+    // dall'albero, dalle scorciatoie o da una ricerca rapida (di cui conta il tipo documento, non il nome).
+    // La callback sta in un ref cosi non entra nelle dipendenze di effetti e memo.
+    const selectedNameRef = useRef(onSelectedNameChanged);
+    selectedNameRef.current = onSelectedNameChanged;
+    // Il nome del tipo documento scelto arriva dal descrittore, che qui e' gia' in cache
+    const notifySelectedTIDAsync = useCallback(async (tid) => {
+        if (!tid || !selectedNameRef.current)
+            return;
+        const dtd = await DcmtTypeListCacheService.GetAsync(tid);
+        const name = dtd?.nameLoc ?? dtd?.name;
+        if (name)
+            selectedNameRef.current(name);
+    }, []);
     const deviceType = useDeviceType();
     useEffect(() => {
         if (onCurrentTIDChangedCallback) {
@@ -47,6 +61,7 @@ const TMSearch = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallback, addTask
     useEffect(() => {
         if (!inputTID)
             return;
+        notifySelectedTIDAsync(inputTID);
         setCurrentTID(inputTID);
         setCurrentSearchView(TMSearchViews.Search);
     }, [inputTID]);
@@ -54,6 +69,7 @@ const TMSearch = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallback, addTask
         const loadSqd = async () => {
             try {
                 const resultSqd = await SavedQueryCacheService.GetAsync(inputSqdID);
+                notifySelectedTIDAsync(resultSqd?.masterTID);
                 await setSQDAsync(resultSqd);
                 // Mostra la vista Search per visualizzare i filtri della SavedQuery caricata
                 setCurrentSearchView(TMSearchViews.Search);
@@ -141,12 +157,13 @@ const TMSearch = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallback, addTask
             setCurrentMruTID(0);
     };
     const onSQDItemClick = useCallback(async (sqd, setSqdAsync) => {
+        notifySelectedTIDAsync(sqd.masterTID);
         // Forza ricaricamento completo se la query è già selezionata
         if (sqd.id === currentSQD?.id) {
             await setSqdAsync(undefined);
         }
         await setSqdAsync(sqd);
-    }, [currentSQD]);
+    }, [currentSQD, notifySelectedTIDAsync]);
     const onSQDDeleted = useCallback(async (sqd, sqdToBeSet, setSqdAsync) => {
         await loadDataSQDsAsync(true, sqd.masterTID);
         if (sqdToBeSet)
@@ -230,30 +247,35 @@ const TMSearch = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallback, addTask
     const isTabletOrMobile = deviceType === DeviceType.TABLET || deviceType === DeviceType.MOBILE;
     // --- JSX WRAPPERS ---
     const tmTreeSelectorElement = useMemo(() => _jsx(TMTreeSelectorWrapper, { isMobile: isTabletOrMobile, onSelectedTIDChanged: (tid) => {
+            notifySelectedTIDAsync(tid);
             setCurrentTID(tid);
             if (tid && mruTIDs.includes(tid))
                 setCurrentMruTID(tid);
             else
                 setCurrentMruTID(0);
-        } }), [isTabletOrMobile, mruTIDs]);
+        } }), [isTabletOrMobile, mruTIDs, notifySelectedTIDAsync]);
     const tmRecentsManagerElement = useMemo(() => _jsx(TMRecentsManagerWrapper, { mruTIDs: mruTIDs, currentMruTID: currentMruTID, deviceType: deviceType, onSelectedTID: (tid) => {
+            notifySelectedTIDAsync(tid);
             setCurrentMruTID(tid);
             setCurrentTID(tid);
         }, onDeletedTID: (tid) => {
             let newMruTIDS = removeMruTid(SDKUI_Globals.userSettings.searchSettings.mruTIDs, tid);
             SDKUI_Globals.userSettings.searchSettings.mruTIDs = newMruTIDS;
             setMruTIDs(newMruTIDS);
-        } }), [mruTIDs, currentMruTID, deviceType]);
+        } }), [mruTIDs, currentMruTID, deviceType, notifySelectedTIDAsync]);
     const tmSearchQueryPanelElement = useMemo(() => _jsx(TMSearchQueryPanelWrapper, { isSearchViewOnScreen: currentSearchView === TMSearchViews.Search, passToArchiveCallback: passToArchiveCallback, isExpertMode: isExpertMode, showBackToResultButton: searchResult.length > 0, fromDTD: fromDTD, SQD: currentSQD, inputMids: inputMids, maxDcmtsToBeReturned: maxDcmtsToBeReturned, onBackToResult: () => { if (onlyShowSearchQueryPanel)
             setShowSearchResults(true); setCurrentSearchView(TMSearchViews.Result); }, onSearchCompleted: handleSearchCompleted, onRefreshRequested: refreshSearchQueryPanelAsync, onDcmtTypeReloaded: handleDcmtTypeReloaded, onSqdSaved: async (newSqd) => {
             await loadDataSQDsAsync(true, newSqd.masterTID);
             await setSQDAsync(newSqd);
         } }), [fromDTD, showSearchResults, setShowSearchResults, currentSQD, currentSearchView, isExpertMode, mruTIDs, searchResult, passToArchiveCallback, inputMids, maxDcmtsToBeReturned, handleSearchCompleted, refreshSearchQueryPanelAsync, handleDcmtTypeReloaded, onlyShowSearchQueryPanel]);
-    const tmSavedQuerySelectorElement = useMemo(() => _jsxs(TabPanel, { width: "100%", height: "100%", showNavButtons: true, repaintChangesOnly: true, selectedIndex: currentSQDMode, onSelectedIndexChange: (index) => setCurrentSQDMode(index), children: [(currentTID || currentSQD) ? _jsx(Item, { title: fromDTD?.nameLoc, children: _jsx(TMSavedQuerySelectorWrapper, { allowShowSearch: false, items: filteredByTIDSQDs, selectedId: currentSQD?.id, onRefreshData: () => { loadDataSQDsAsync(true); }, onItemClick: (sqd) => {
+    // I due tab delle ricerche rapide nell'ordine in cui compaiono: il primo c'e' solo con un tipo
+    // documento o una ricerca rapida correnti. currentSQDMode resta la posizione nell'elenco visibile.
+    const sqdTabIds = useMemo(() => (currentTID || currentSQD) ? ['byTID', 'all'] : ['all'], [currentTID, currentSQD]);
+    const tmSavedQuerySelectorElement = useMemo(() => _jsxs(TMTabControl, { variant: 'module', style: { height: '100%', width: '100%' }, contentStyle: { display: 'flex', flexDirection: 'column', flex: 1, minHeight: 0 }, selectedId: sqdTabIds[currentSQDMode] ?? sqdTabIds[sqdTabIds.length - 1], onSelectedIdChange: (id) => setCurrentSQDMode(sqdTabIds.indexOf(id)), children: [_jsx(TMTabPanel, { id: 'byTID', label: fromDTD?.nameLoc, visible: !!(currentTID || currentSQD), children: _jsx(TMSavedQuerySelectorWrapper, { allowShowSearch: false, items: filteredByTIDSQDs, selectedId: currentSQD?.id, onRefreshData: () => { loadDataSQDsAsync(true); }, onItemClick: (sqd) => {
                         onSQDItemClick(sqd, setSQDAsync);
-                    }, onDeleted: (sqd) => onSQDDeleted(sqd, sqd.id == currentSQD?.id ? filteredByTIDSQDs.find(o => o.id == 1) : currentSQD, setSQDAsync), refreshFavoriteSavedQueries: refreshFavoriteSavedQueries }) }) : _jsx(_Fragment, {}), _jsx(Item, { title: SDKUI_Localizator.AllFemale, children: _jsx(TMSavedQuerySelectorWrapper, { allowShowSearch: true, items: allSQDs, manageDefault: false, onItemClick: (sqd) => {
+                    }, onDeleted: (sqd) => onSQDDeleted(sqd, sqd.id == currentSQD?.id ? filteredByTIDSQDs.find(o => o.id == 1) : currentSQD, setSQDAsync), refreshFavoriteSavedQueries: refreshFavoriteSavedQueries }) }), _jsx(TMTabPanel, { id: 'all', label: SDKUI_Localizator.AllFemale, children: _jsx(TMSavedQuerySelectorWrapper, { allowShowSearch: true, items: allSQDs, manageDefault: false, onItemClick: (sqd) => {
                         onSQDItemClick(sqd, setSQDAsync);
-                    }, onDeleted: (sqd) => onSQDDeleted(sqd, sqd.id == currentSQD?.id ? undefined : currentSQD, setSQDAsync), refreshFavoriteSavedQueries: refreshFavoriteSavedQueries }) })] }), [currentSQDMode, currentTID, currentSQD, fromDTD, filteredByTIDSQDs, allSQDs]);
+                    }, onDeleted: (sqd) => onSQDDeleted(sqd, sqd.id == currentSQD?.id ? undefined : currentSQD, setSQDAsync), refreshFavoriteSavedQueries: refreshFavoriteSavedQueries }) })] }), [currentSQDMode, sqdTabIds, currentTID, currentSQD, fromDTD, filteredByTIDSQDs, allSQDs]);
     // Returns the current panelLayout from user settings, falling back to an empty object if not present.
     const getPanelLayoutSetting = () => {
         return SDKUI_Globals.userSettings.searchSettings.panelLayout ?? {};
@@ -347,6 +369,43 @@ const TMSearch = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallback, addTask
                 : _jsx(StyledMultiViewPanel, { $isVisible: currentSearchView === TMSearchViews.Search, children: _jsx(TMPanelManagerWithPersistenceProvider, { panels: initialPanels, initialVisibility: allInitialPanelVisibility, defaultDimensions: initialPanelDimensions, initialDimensions: initialPanelDimensions, initialMobilePanelId: 'TMRecentsManager', isPersistenceEnabled: !isMobile ? hasSavedLayout() : false, persistPanelStates: !isMobile ? (state) => persistPanelStates(state) : undefined, persistedPanelStates: getPersistedPanelStates(), children: _jsx(TMPanelManagerContainer, { panels: initialPanels, direction: "horizontal", showToolbar: true, minPanelSizePx: !isMobile ? 250 : 150 }) }) }), showSearchResults && _jsx(TMSearchResult, { isVisible: isVisible && currentSearchView === TMSearchViews.Result, context: SearchResultContext.METADATA_SEARCH, searchResults: searchResult, floatingActionConfig: floatingActionConfig, onRefreshAfterAddDcmtToFavs: onRefreshAfterAddDcmtToFavs, openInOffice: openInOffice, onRefreshSearchAsyncDatagrid: onRefreshSearchAsyncDatagrid, onClose: () => { if (onlyShowSearchQueryPanel)
                     setShowSearchResults(false); setCurrentSearchView(TMSearchViews.Search); }, backCaption: onlyShowSearchQueryPanel ? SDKUI_Localizator.BackToSearch : undefined, onFileOpened: onFileOpened, onTaskCreateRequest: onTaskCreateRequest, openWGsCopyMoveForm: openWGsCopyMoveForm, editPdfForm: editPdfForm, onOpenPdfEditorRequest: onOpenPdfEditorRequest, openS4TViewer: openS4TViewer, onOpenS4TViewerRequest: onOpenS4TViewerRequest, openFileUploaderPdfEditor: openFileUploaderPdfEditor, passToArchiveCallback: passToArchiveCallback, onSelectedTIDChanged: onCurrentTIDChangedCallback, showTodoDcmtForm: showTodoDcmtForm, showToppyDraggableHelpCenter: showToppyDraggableHelpCenter, toppyHelpCenterUsePortal: toppyHelpCenterUsePortal, onReferenceClick: onReferenceClick, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers, inputDID: inputDID, formAutoOpen: formAutoOpen, fetchRemoteCertificates: fetchRemoteCertificates, graphometricManager: graphometricManager })] }));
 };
+const ENABLE_SEARCH_TABS = false;
+// Ogni tab e' un TMSearch completo e indipendente: TMTabControl li tiene tutti montati, cosi piu ricerche
+// restano vive insieme, ognuna con i suoi tipi documento, i suoi filtri e i suoi risultati.
+const TMSearch = (props) => {
+    const { isVisible, inputTID, inputSqdID, inputDID, onlyShowSearchQueryPanel, onCurrentTIDChangedCallback } = props;
+    const tabs = useTMTabs({ label: SDKUI_Localizator.Search });
+    // Tab attivo leggibile senza rilanciare l'effetto qui sotto a ogni cambio tab
+    const activeIdRef = useRef(tabs.activeId);
+    activeIdRef.current = tabs.activeId;
+    // Titoli correnti leggibili dalla callback senza rigenerarla a ogni rinomina
+    const itemsRef = useRef(tabs.items);
+    itemsRef.current = tabs.items;
+    // Il titolo del tab e' il nome appena selezionato; se un altro tab ha gia' quel titolo si numera
+    // tra parentesi a partire da 2: NomeTipoDocumento, NomeTipoDocumento (2), NomeTipoDocumento (3)...
+    const setTabTitle = useCallback((id, name) => {
+        const used = new Set(itemsRef.current.filter(t => t.id !== id).map(t => t.label));
+        let label = name;
+        for (let i = 2; used.has(label); i++)
+            label = `${name} (${i})`;
+        tabs.rename(id, label);
+    }, [tabs.rename]);
+    // Una richiesta dall'esterno (tipo documento, ricerca rapida, documento) riguarda il tab a video in
+    // quel momento: gli altri restano sulla ricerca che stanno svolgendo.
+    const [inputsTabId, setInputsTabId] = useState(tabs.activeId);
+    useEffect(() => { setInputsTabId(activeIdRef.current); }, [inputTID, inputSqdID, inputDID]);
+    // Nella modalita a solo pannello di ricerca (es. abbinamento molti a molti) i tab non servono,
+    // cosi come non servono finche' i tab non vengono rilasciati
+    if (!ENABLE_SEARCH_TABS || onlyShowSearchQueryPanel)
+        return _jsx(TMSearchInstance, { ...props });
+    return (_jsx(TMTabControl, { ...tabs.controlProps, contentAnimation: 'none', onTabRename: undefined, variant: 'module', style: { height: '100%', width: '100%' }, contentStyle: { display: 'flex', flex: 1, minHeight: 0, position: 'relative' }, children: tabs.items.map(t => {
+            const isActiveTab = t.id === tabs.activeId;
+            const hasInputs = t.id === inputsTabId;
+            return (_jsx(TMTabPanel, { id: t.id, label: t.label, children: _jsx(TMSearchInstance, { ...props, isVisible: isVisible && isActiveTab, inputTID: hasInputs ? inputTID : undefined, inputSqdID: hasInputs ? inputSqdID : undefined, inputDID: hasInputs ? inputDID : undefined, 
+                    // Il tipo documento corrente lo comunica solo il tab a video
+                    onCurrentTIDChangedCallback: isActiveTab ? onCurrentTIDChangedCallback : undefined, onSelectedNameChanged: (name) => setTabTitle(t.id, name) }) }, t.id));
+        }) }));
+};
 export default TMSearch;
 const TMTreeSelectorWrapper = ({ isMobile, onSelectedTIDChanged }) => {
     const { setPanelVisibilityById, toggleMaximize, countVisibleLeafPanels } = useTMPanelManagerContext();

package/lib/components/features/search/TMSearchQueryPanel.d.ts

@@ -29,6 +29,12 @@ interface ITMSearchQueryPanelProps {
 declare const TMSearchQueryPanel: React.FunctionComponent<ITMSearchQueryPanelProps>;
 export default TMSearchQueryPanel;
 export declare const refreshLastSearch: (qd: QueryDescriptor | undefined) => Promise<SearchResultDescriptor[] | undefined>;
-export declare const StyledToppyTextContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-export declare const StyledToppyText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>>> & string;
-export declare const StyledToppyImage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, never>>> & string;
+export declare const StyledToppyTextContainer: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: React.CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const StyledToppyText: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "style"> & {
+    style?: React.CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const StyledToppyImage: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "style"> & {
+    style?: React.CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;

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

@@ -1392,6 +1392,14 @@ const TMSearchResultGrid = ({ openInOffice, fromDTD, operationItems, allUsers, i
         let newDataSource = searchResultDescriptorToSimpleArray(searchResult);
         setDataSource(newDataSource);
     }, [lastUpdateSearchTime]);
+    const gridSorting = useMemo(() => ({ mode: 'multiple' }), []);
+    const gridSelection = useMemo(() => ({ mode: allowMultipleSelection ? 'multiple' : 'single' }), [allowMultipleSelection]);
+    const useNativeScrollbar = SDKUI_Globals.userSettings?.themeSettings.gridSettings.useNativeScrollbar === 1;
+    const gridScrolling = useMemo(() => ({
+        columnRenderingMode: 'virtual',
+        rowRenderingMode: 'standard',
+        useNative: useNativeScrollbar
+    }), [useNativeScrollbar]);
     // Handles selection change in the data grid
     const handleSelectionChange = useCallback((e) => {
         if (onSelectionChanged === undefined)
@@ -1506,12 +1514,12 @@ const TMSearchResultGrid = ({ openInOffice, fromDTD, operationItems, allUsers, i
     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 })] });
+    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: gridSorting, selection: gridSelection, scrolling: gridScrolling, 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 ` 
-    background: ${(props) => props.$isSelected ? 'oklch(from var(--dx-color-primary) l c h / .2) !important' : 'transparent'};
-    cursor: pointer; 
+const StyledItemTemplate = styled.div ` 
+    background: ${(props) => props.$isSelected ? 'oklch(from var(--dx-color-primary) l c h / .2) !important' : 'transparent'};
+    cursor: pointer; 
 `;
 const MemoizedStyledItemTemplate = React.memo(StyledItemTemplate);
 const TMSearchResultSelector = ({ searchResults = [], disableAccordionIfSingleCategory = false, selectedTID, selectedSearchResult, autoSelectFirst = true, onSelectionChanged }) => {
@@ -1718,85 +1726,85 @@ const TMDcmtPreviewWrapper = ({ refreshPreviewTrigger, currentDcmt, isVisible, i
     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 `
-    padding: 20px;
-    text-align: center;
-    color: #888;
+const StyledPlaceholder = styled.div `
+    padding: 20px;
+    text-align: center;
+    color: #888;
 `;
-const StyledIndexingInfoSection = styled.div `
-    padding: 15px;
-    border-top: 1px solid #e0e0e0;
-    background: linear-gradient(to bottom, #f9f9f9, #f5f5f5);
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
+const StyledIndexingInfoSection = styled.div `
+    padding: 15px;
+    border-top: 1px solid #e0e0e0;
+    background: linear-gradient(to bottom, #f9f9f9, #f5f5f5);
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
 `;
-const StyledIndexingToggle = styled.button `
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    width: 100%;
-    padding: 10px 16px;
-    background: white;
-    border: 1px solid #d0d0d0;
-    border-radius: 6px;
-    cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
-    transition: all 0.2s ease;
-    font-size: 14px;
-    font-weight: 500;
-    color: #333;
-    opacity: ${props => props.disabled ? 0.6 : 1};
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-
-    &:hover:not(:disabled) {
-        background: #f8f8f8;
-        border-color: #2196F3;
-        box-shadow: 0 2px 4px rgba(33, 150, 243, 0.2);
-    }
-
-    &:active:not(:disabled) {
-        transform: translateY(1px);
-        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-    }
+const StyledIndexingToggle = styled.button `
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    padding: 10px 16px;
+    background: white;
+    border: 1px solid #d0d0d0;
+    border-radius: 6px;
+    cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
+    transition: all 0.2s ease;
+    font-size: 14px;
+    font-weight: 500;
+    color: #333;
+    opacity: ${props => props.disabled ? 0.6 : 1};
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+
+    &:hover:not(:disabled) {
+        background: #f8f8f8;
+        border-color: #2196F3;
+        box-shadow: 0 2px 4px rgba(33, 150, 243, 0.2);
+    }
+
+    &:active:not(:disabled) {
+        transform: translateY(1px);
+        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+    }
 `;
-const StyledLeftContent = styled.div `
-    display: flex;
-    align-items: center;
-    gap: 8px;
+const StyledLeftContent = styled.div `
+    display: flex;
+    align-items: center;
+    gap: 8px;
 `;
-const StyledRightContent = styled.div `
-    display: flex;
-    align-items: center;
-    gap: 8px;
+const StyledRightContent = styled.div `
+    display: flex;
+    align-items: center;
+    gap: 8px;
 `;
-const StyledChevron = styled.span `
-    transition: transform 0.2s ease;
-    transform: ${props => props.$isOpen ? 'rotate(180deg)' : 'rotate(0deg)'};
-    color: #666;
-    font-size: 12px;
+const StyledChevron = styled.span `
+    transition: transform 0.2s ease;
+    transform: ${props => props.$isOpen ? 'rotate(180deg)' : 'rotate(0deg)'};
+    color: #666;
+    font-size: 12px;
 `;
-const StyledIndexingInfoBox = styled.div `
-    position: relative;
-    background: white;
-    border: 1px solid #e0e0e0;
-    border-radius: 6px;
-    padding: 12px;
-    max-height: 200px;
-    overflow: auto;
-    font-family: 'Courier New', monospace;
-    font-size: 12px;
-    color: #333;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    animation: slideDown 0.2s ease;
-
-    @keyframes slideDown {
-        from {
-            opacity: 0;
-            transform: translateY(-10px);
-        }
-        to {
-            opacity: 1;
-            transform: translateY(0);
-        }
-    }
+const StyledIndexingInfoBox = styled.div `
+    position: relative;
+    background: white;
+    border: 1px solid #e0e0e0;
+    border-radius: 6px;
+    padding: 12px;
+    max-height: 200px;
+    overflow: auto;
+    font-family: 'Courier New', monospace;
+    font-size: 12px;
+    color: #333;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    animation: slideDown 0.2s ease;
+
+    @keyframes slideDown {
+        from {
+            opacity: 0;
+            transform: translateY(-10px);
+        }
+        to {
+            opacity: 1;
+            transform: translateY(0);
+        }
+    }
 `;

package/lib/components/features/search/TMSearchResultFloatingActionButton.d.ts

@@ -12,5 +12,5 @@ interface TMSearchResultFloatingActionButtonProps {
     selectedDcmtsOrFocused: Array<DcmtInfo>;
     config: TMSearchResultFloatingActionConfig;
 }
-export declare const TMSearchResultFloatingActionButton: (props: TMSearchResultFloatingActionButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TMSearchResultFloatingActionButton: (props: TMSearchResultFloatingActionButtonProps) => React.JSX.Element;
 export default TMSearchResultFloatingActionButton;

package/lib/components/features/search/TMSignatureInfoContent.d.ts

@@ -1,8 +1,9 @@
+import React from "react";
 import { DcmtInfo, IGraphometricManagerProp } from "../../../ts";
 interface TMSignatureInfoContentProps {
     inputDcmt: DcmtInfo;
     graphometricManager?: IGraphometricManagerProp;
     onClose?: () => void;
 }
-declare const TMSignatureInfoContent: (props: TMSignatureInfoContentProps) => import("react/jsx-runtime").JSX.Element;
+declare const TMSignatureInfoContent: (props: TMSignatureInfoContentProps) => React.JSX.Element;
 export default TMSignatureInfoContent;

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

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { DcmtTypeListCacheService, LayoutModes, SDK_Localizator, TreeCacheService, TreeItemTypes } from '@topconsultnpm/sdk-ts';
 import { TreeList, Column, Scrolling, Selection } from 'devextreme-react/tree-list';
@@ -24,7 +24,6 @@ const TMTreeDcmtTypeCell = ({ tid, isMobile }) => {
 };
 const TMTreeSelector = ({ layoutMode = LayoutModes.Update, isVisible, onSelectedTIDChanged, onClosePanel, allowMaximize = true, onMaximizePanel }) => {
     const [trees, setTrees] = useState([]);
-    const [treeItems, setTreeItems] = useState([]);
     const [selectedTreeId, setSelectedTreeId] = useState(0);
     const [infoDTD, setInfoDTD] = useState();
     // State to store selected row keys
@@ -34,6 +33,8 @@ const TMTreeSelector = ({ layoutMode = LayoutModes.Update, isVisible, onSelected
     // Elemento selezionato nell'albero: dopo un refresh va riproposto se esiste ancora
     const [selectedTreeItemKey, setSelectedTreeItemKey] = useState(undefined);
     const selectedTreeItemKeys = useMemo(() => selectedTreeItemKey !== undefined ? [selectedTreeItemKey] : [], [selectedTreeItemKey]);
+    // Finche' gli alberi non sono arrivati il pannello mostra il loader invece della lista vuota
+    const [isLoadingTrees, setIsLoadingTrees] = useState(true);
     const [isGridBoxOpened, setIsGridBoxOpened] = useState(false);
     const [defaultTreeId, setDefaultTreeId] = useState(-1);
     const deviceType = useDeviceType();
@@ -89,13 +90,16 @@ const TMTreeSelector = ({ layoutMode = LayoutModes.Update, isVisible, onSelected
             setSelectedRowKeys([treeToSelect.id]);
         }
     }, [layoutMode]);
-    useEffect(() => { loadTreesAsync(); }, [loadTreesAsync]);
     useEffect(() => {
-        let newTreeItems = trees.find(o => o.id == selectedTreeId)?.items ?? [];
-        setTreeItems(newTreeItems);
+        setIsLoadingTrees(true);
+        loadTreesAsync().finally(() => setIsLoadingTrees(false));
+    }, [loadTreesAsync]);
+    // Derivato nello stesso render degli alberi: con uno state la TreeList mostrerebbe "Nessun dato" per un frame
+    const treeItems = useMemo(() => trees.find(o => o.id == selectedTreeId)?.items ?? [], [trees, selectedTreeId]);
+    useEffect(() => {
         // Mantiene la selezione dopo il refresh solo se l'elemento e' ancora presente (al cambio albero si azzera)
-        setSelectedTreeItemKey(prev => prev !== undefined && newTreeItems.some(o => o.id == prev) ? prev : undefined);
-    }, [selectedTreeId, trees]);
+        setSelectedTreeItemKey(prev => prev !== undefined && treeItems.some(o => o.id == prev) ? prev : undefined);
+    }, [treeItems]);
     const renderCell = useCallback((data) => {
         const treeItem = data.data;
         // Documento (DcmtType)
@@ -187,7 +191,7 @@ const TMTreeSelector = ({ layoutMode = LayoutModes.Update, isVisible, onSelected
     const onSelectionChangedTreeView = useCallback((e) => {
         setSelectedTreeItemKey(e.selectedRowKeys?.[0]);
     }, []);
-    return (_jsx(TMPanel, { title: SDK_Localizator.Trees, isVisible: isVisible, totalItems: trees.length, onClose: onClosePanel, allowMaximize: allowMaximize, onMaximize: onMaximizePanel, onHeaderDoubleClick: onMaximizePanel, onRefresh: () => loadTreesAsync(true), toolbar: _jsx(TMButton, { btnStyle: 'icon', caption: defaultTreeId == selectedTreeId ? SDKUI_Localizator.TreeRemoveDefault : SDKUI_Localizator.SetAsDefault, icon: defaultTreeId == selectedTreeId ? _jsx(IconStarRemove, { color: 'rgb(243, 114, 92)' }) : _jsx(IconStar, { color: 'rgb(248, 215, 117)' }), onClick: () => {
+    return (_jsx(TMPanel, { title: SDK_Localizator.Trees, isVisible: isVisible, totalItems: trees.length, onClose: onClosePanel, allowMaximize: allowMaximize, onMaximize: onMaximizePanel, onHeaderDoubleClick: onMaximizePanel, onRefresh: () => loadTreesAsync(true), isRefreshing: isLoadingTrees, toolbar: _jsx(TMButton, { btnStyle: 'icon', caption: defaultTreeId == selectedTreeId ? SDKUI_Localizator.TreeRemoveDefault : SDKUI_Localizator.SetAsDefault, icon: defaultTreeId == selectedTreeId ? _jsx(IconStarRemove, { color: 'rgb(243, 114, 92)' }) : _jsx(IconStar, { color: 'rgb(248, 215, 117)' }), onClick: () => {
                 if (defaultTreeId == selectedTreeId) {
                     if (layoutMode == LayoutModes.Update)
                         SDKUI_Globals.userSettings.searchSettings.defaultTree = -1;
@@ -220,7 +224,9 @@ const TMTreeSelector = ({ layoutMode = LayoutModes.Update, isVisible, onSelected
                                         { dataField: 'nameLoc', caption: SDKUI_Localizator.Name, width: 'auto' },
                                         { dataField: 'description', caption: SDKUI_Localizator.Description, width: 'auto' },
                                     ], selection: { mode: 'single', showCheckBoxesMode: "none" }, showHeaderFilter: false, selectedRowKeys: selectedRowKeys, onSelectionChanged: onSelectionChanged, onRowClick: onRowClickTrees, focusedRowKey: focusedRowKey, onFocusedRowChanged: onFocusedRowChanged }) }) }), _jsxs(StyledTreeListWrapper, { children: [_jsxs(TreeList, { height: "100%", dataSource: treeItems, showRowLines: false, showColumnLines: false, showBorders: false, columnAutoWidth: false, keyExpr: "id", parentIdExpr: "parentID", dataStructure: "plain", showColumnHeaders: false, selectedRowKeys: selectedTreeItemKeys, onSelectionChanged: onSelectionChangedTreeView, onCellDblClick: onCellDblClickTreeView, onRowClick: onRowClickTreeView, children: [_jsx(Column, { dataField: "nameLoc", caption: SDKUI_Localizator.Name, cellRender: renderCell, width: "100%" }), _jsx(Scrolling, { mode: "virtual", useNative: Number(SDKUI_Globals.userSettings?.themeSettings.gridSettings.useNativeScrollbar) === 1 }), _jsx(Selection, { mode: "single" })] }), _jsxs(StyledOffCanvasPanel, { ref: panelRef, $isOpen: isMobile && infoDTD !== undefined, children: [_jsxs(StyledDivHorizontal, { style: { gap: 10, padding: '10px 8px', width: '100%', alignItems: 'center' }, children: [_jsx("p", { style: { fontSize: '1.1rem', fontWeight: 'bold' }, children: `${SDKUI_Localizator.DcmtType} - ${SDKUI_Localizator.About}` }), _jsx(IconCloseOutline, { style: { marginLeft: 'auto', cursor: 'pointer' }, onClick: () => setInfoDTD(undefined) })] }), renderDTDTooltipContent(infoDTD)] })] })] })
-            : _jsx("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', width: '100%', fontSize: '1.5rem' }, children: SDKUI_Localizator.TreesNoAvailable }) }));
+            : isLoadingTrees
+                ? _jsx(_Fragment, {})
+                : _jsx("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', width: '100%', fontSize: '1.5rem' }, children: SDKUI_Localizator.TreesNoAvailable }) }));
 };
 export default TMTreeSelector;
 const StyledTreeDcmtTypeRow = styled(StyledDivHorizontal) `

package/lib/components/features/search/TMViewHistoryDcmt.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import { DcmtInfo } from "../../../ts/types";
 import { DeviceType } from "../../base/TMDeviceProvider";
 import { DcmtTypeDescriptor, HomeBlogPost, TaskDescriptor } from "@topconsultnpm/sdk-ts";
@@ -14,5 +15,5 @@ interface TMViewHistoryDcmtProps {
     handleNavigateToWGs?: (value: HomeBlogPost | number) => Promise<void>;
     handleNavigateToDossiers?: (value: HomeBlogPost | number) => Promise<void>;
 }
-declare const TMViewHistoryDcmt: (props: TMViewHistoryDcmtProps) => import("react/jsx-runtime").JSX.Element;
+declare const TMViewHistoryDcmt: (props: TMViewHistoryDcmtProps) => React.JSX.Element;
 export default TMViewHistoryDcmt;

package/lib/components/features/tasks/TMTaskForm.d.ts

@@ -36,5 +36,5 @@ export interface TMTaskFormProps {
     onOpenPdfEditorRequest?: (dcmtInfo: Array<DcmtInfo>, refreshDocumentPreview?: () => Promise<void>) => void;
     s4TViewerDialogComponent?: React.ReactNode;
 }
-declare const TMTaskForm: (props: TMTaskFormProps) => import("react/jsx-runtime").JSX.Element;
+declare const TMTaskForm: (props: TMTaskFormProps) => React.JSX.Element;
 export default TMTaskForm;

package/lib/components/features/tasks/TMTaskFormUtils.d.ts

@@ -8,7 +8,7 @@ interface TaskFormAssignmentNoticeSectionProps {
     users: Array<UserDescriptor>;
     requestMoreInfo?: boolean;
 }
-export declare const TaskFormAssignmentNoticeBadge: (props: TaskFormAssignmentNoticeSectionProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const TaskFormAssignmentNoticeBadge: (props: TaskFormAssignmentNoticeSectionProps) => React.JSX.Element | null;
 interface RenderContextBlockParams {
     condition: boolean;
     pdg: PdGs;
@@ -19,7 +19,7 @@ interface TaskFormContextualAttachmentsProps {
     currentTask: TaskDescriptor | undefined;
     taskContext: TaskContext | undefined;
 }
-export declare const TaskFormContextualAttachments: (props: TaskFormContextualAttachmentsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TaskFormContextualAttachments: (props: TaskFormContextualAttachmentsProps) => React.JSX.Element;
 interface TaskFormAssignedToProps {
     formMode: FormModes;
     formData: TaskDescriptor | undefined;
@@ -31,7 +31,7 @@ interface TaskFormAssignedToProps {
     label?: string;
     onValueChanged: (newValue: Array<number> | undefined) => void;
 }
-export declare const TaskAssigneeField: (props: TaskFormAssignedToProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TaskAssigneeField: (props: TaskFormAssignedToProps) => React.JSX.Element;
 interface RenderFieldBaseProps {
     fieldsReadOnly: IFieldsEditability;
     formDataOrig?: TaskDescriptor;
@@ -50,12 +50,12 @@ interface RenderDateFieldProps extends RenderFieldProps {
     label?: string;
     onContentReady?: () => void;
 }
-export declare const RenderNameField: ({ requestMoreInfo, validationItems, setFormData, formData, formDataOrig, fieldsReadOnly }: RenderFieldProps) => import("react/jsx-runtime").JSX.Element;
-export declare const RenderDescriptionField: ({ validationItems, setFormData, formData, formDataOrig, fieldsReadOnly }: RenderFieldProps) => import("react/jsx-runtime").JSX.Element;
-export declare const RenderPriorityField: ({ formData, formDataOrig, fieldsReadOnly, onPriorityValueChange }: RenderPriorityFieldProps) => import("react/jsx-runtime").JSX.Element;
-export declare const RenderStartDateField: ({ label, validationItems, setFormData, formData, formDataOrig, fieldsReadOnly, onContentReady }: RenderDateFieldProps) => import("react/jsx-runtime").JSX.Element;
-export declare const RenderEndDateField: ({ label, validationItems, setFormData, formData, formDataOrig, fieldsReadOnly, onContentReady }: RenderDateFieldProps) => import("react/jsx-runtime").JSX.Element;
-export declare const RenderRemindDateField: ({ validationItems, setFormData, formData, formDataOrig, fieldsReadOnly }: RenderFieldProps) => import("react/jsx-runtime").JSX.Element;
+export declare const RenderNameField: ({ requestMoreInfo, validationItems, setFormData, formData, formDataOrig, fieldsReadOnly }: RenderFieldProps) => React.JSX.Element;
+export declare const RenderDescriptionField: ({ validationItems, setFormData, formData, formDataOrig, fieldsReadOnly }: RenderFieldProps) => React.JSX.Element;
+export declare const RenderPriorityField: ({ formData, formDataOrig, fieldsReadOnly, onPriorityValueChange }: RenderPriorityFieldProps) => React.JSX.Element;
+export declare const RenderStartDateField: ({ label, validationItems, setFormData, formData, formDataOrig, fieldsReadOnly, onContentReady }: RenderDateFieldProps) => React.JSX.Element;
+export declare const RenderEndDateField: ({ label, validationItems, setFormData, formData, formDataOrig, fieldsReadOnly, onContentReady }: RenderDateFieldProps) => React.JSX.Element;
+export declare const RenderRemindDateField: ({ validationItems, setFormData, formData, formDataOrig, fieldsReadOnly }: RenderFieldProps) => React.JSX.Element;
 interface RenderTaskFormStateFieldProps {
     formDataOrig: TaskDescriptor | undefined;
     formData: TaskDescriptor | undefined;
@@ -71,7 +71,7 @@ interface TMChangeStateFormProps {
     handleShowChangeStateForm: (value: boolean) => void;
     setFormData: React.Dispatch<React.SetStateAction<TaskDescriptor | undefined>>;
 }
-export declare const TMChangeStateForm: (props: TMChangeStateFormProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TMChangeStateForm: (props: TMChangeStateFormProps) => React.JSX.Element;
 type TaskRole = "personal" | "sender" | "receiver";
 type StatusTransitionMap = {
     [key in Task_States]?: Task_States[];

package/lib/components/features/tasks/TMTasksAgenda.d.ts

@@ -15,5 +15,5 @@ interface TMTasksAgendaProps {
     handleFocusedRowChange: (row: TaskDescriptor | undefined) => void;
     menuItems: TMContextMenuItemProps[];
 }
-declare const TMTasksAgenda: (props: TMTasksAgendaProps) => import("react/jsx-runtime").JSX.Element;
+declare const TMTasksAgenda: (props: TMTasksAgendaProps) => React.JSX.Element;
 export default TMTasksAgenda;

package/lib/components/features/tasks/TMTasksCalendar.d.ts

@@ -19,5 +19,5 @@ interface TMTasksCalendarProps {
     handleFocusedRowChange: (row: TaskDescriptor | undefined) => void;
     menuItems: TMContextMenuItemProps[];
 }
-declare const TMTasksCalendar: (props: TMTasksCalendarProps) => import("react/jsx-runtime").JSX.Element;
+declare const TMTasksCalendar: (props: TMTasksCalendarProps) => React.JSX.Element;
 export default TMTasksCalendar;

package/lib/components/features/tasks/TMTasksHeader.d.ts

@@ -10,5 +10,5 @@ interface TMTasksHeaderProps {
     color?: string;
     height?: string;
 }
-declare const TMTasksHeader: (props: TMTasksHeaderProps) => import("react/jsx-runtime").JSX.Element;
+declare const TMTasksHeader: (props: TMTasksHeaderProps) => React.JSX.Element;
 export default TMTasksHeader;

package/lib/components/features/tasks/TMTasksPanelContent.d.ts

@@ -16,5 +16,5 @@ interface TMTasksPanelContentProps {
     s4TViewerDialogComponent?: React.ReactNode;
     afterTaskSaved?: (task: TaskDescriptor | undefined, formMode: FormModes | undefined, forceRefresh?: boolean) => Promise<void>;
 }
-declare const TMTasksPanelContent: (props: TMTasksPanelContentProps) => import("react/jsx-runtime").JSX.Element;
+declare const TMTasksPanelContent: (props: TMTasksPanelContentProps) => React.JSX.Element;
 export default TMTasksPanelContent;

package/lib/components/features/tasks/TMTasksUtilsView.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import React, { ReactNode } from "react";
 import { PdGs, Task_States, TaskDescriptor } from '@topconsultnpm/sdk-ts';
 import { FormModes } from "../../../ts";
 export declare const taskStateIconMap: (fontSize?: number) => Map<Task_States, JSX.Element>;
@@ -12,15 +12,15 @@ export declare const renderTaskIcons: (taskData: {
     remTime: Date | undefined;
     isNew: boolean;
     numberOfDays: number;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => React.JSX.Element;
 interface TMActionCalendarProps {
     currentTask: TaskDescriptor;
     openTaskForm: (formMode: FormModes, task?: TaskDescriptor) => void;
     onDeleteCallback: (rowIds: Array<number>) => void;
 }
-export declare const TMActionCalendar: (props: TMActionCalendarProps) => import("react/jsx-runtime").JSX.Element;
-export declare const priorityLegend: () => import("react/jsx-runtime").JSX.Element;
-export declare const highlightTaskText: (text: string, search: string, taskId: number) => string | (string | import("react/jsx-runtime").JSX.Element)[];
+export declare const TMActionCalendar: (props: TMActionCalendarProps) => React.JSX.Element;
+export declare const priorityLegend: () => React.JSX.Element;
+export declare const highlightTaskText: (text: string, search: string, taskId: number) => string | (string | React.JSX.Element)[];
 export declare const treeFilterDataSource: (allTasks: Array<TaskDescriptor>) => Array<{
     id: number;
     label: string;