@topconsultnpm/sdkui-react-beta 6.12.37 → 6.12.39

package/lib/components/search/TMSearchResult.js

@@ -0,0 +1,727 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { SDK_Globals, DataColumnTypes, MetadataDataDomains, DataListViewModes, MetadataFormats, LayoutModes, RecentCategories, TemplateTIDs, DcmtTypeListCacheService, AccessLevels, SystemMIDsAsNumber, ArchiveConstraints } from '@topconsultnpm/sdk-ts-beta';
+import styled from 'styled-components';
+import { commandsMenuItems, getSelectedDcmtsOrFocused } from './TMSearchResultsMenuItems';
+import { ContextMenu } from 'devextreme-react';
+import { genUniqueId, IconShow, IconBoard, IconDcmtTypeSys, IconDetailDcmts, SDKUI_Localizator, IconTag, IconDetails, IconCommand, IconDelete, IconRefresh, IconMenuVertical, IconDownload, IconSignature, IconSave, deepCompare, getDataColumnName, searchResultDescriptorToSimpleArray, SDKUI_Globals, IconArchive, IconActivityLog, IconStar, IconFreeSearch, IconChevronDown, searchResultToMetadataValues } from '../../helper';
+import { useDcmtOperations } from '../../hooks/useDcmtOperations';
+import { useInputCvtFormatDialog } from '../../hooks/useInputDialog';
+import { DcmtOperationTypes, FormModes, SearchResultContext } from '../../ts';
+import { TMColors } from '../../utils/theme';
+import { StyledModalContainer, StyledBadge, StyledMultiViewPanel } from '../base/Styled';
+import ShowAlert from '../base/TMAlert';
+import TMButton from '../base/TMButton';
+import TMDataGrid, { TMDataGridPageSize } from '../base/TMDataGrid';
+import { useDeviceType, DeviceType } from '../base/TMDeviceProvider';
+import { TMSplitterLayout, TMLayoutItem } from '../base/TMLayout';
+import { CustomListViewHeader } from '../base/TMListView';
+import { TMMessageBoxManager, ButtonNames } from '../base/TMPopUp';
+import TMToolbarCard from '../base/TMToolbarCard';
+import TMTooltip from '../base/TMTooltip';
+import { TMLayoutWaitingContainer } from '../base/TMWaitPanel';
+import { TMUserIdViewer } from '../choosers/TMUserChooser';
+import TMMetadataValues from '../editors/TMMetadataValues';
+import { TMSaveFormButtonPrevious, TMSaveFormButtonNext } from '../forms/TMSaveForm';
+import TMDataListItemViewer from '../viewers/TMDataListItemViewer';
+import TMTidViewer from '../viewers/TMTidViewer';
+import TMDcmtIcon from '../query/TMDcmtIcon';
+import { hasDetailRelations, hasMasterRelations } from '../../helper/dcmtsHelper';
+import TMDcmtPreview, { TMNothingToShow } from '../query/TMDcmtPreview';
+import TMFloatingToolbar from '../base/TMFloatingToolbar';
+import { WorkFlowApproveRejectPopUp, WorkFlowOperationButtons, WorkFlowReAssignPopUp } from '../query/TMWorkflowPopup';
+import TMMasterDetailDcmts from '../query/TMMasterDetailDcmts';
+import TMBatchUpdateForm from '../query/TMBatchUpdateForm';
+import TMDcmtForm from '../query/TMDcmtForm';
+import TMDcmtBlog from '../query/TMDcmtBlog';
+//#endregion region Interfaces, Types and Enums
+//#region Styled Components
+const StyledContainer = styled.div ` overflow: hidden; background-color: #ffffff; width: calc(100%); height: calc(100%); display: flex; gap: 10px; `;
+//#endregion Styled Components
+//#region Internal Components
+const CommandsContextMenu = React.memo(({ target, menuItems, allowPin }) => {
+    return (_jsx(ContextMenu, { showEvent: 'click', dataSource: menuItems, target: `${target}` }));
+});
+//#endregion Internal Components
+//#region Helper Methods
+const orderByName = (array) => {
+    let arr = [...array];
+    return arr.sort((a, b) => { if (a['fromName'] < b['fromName']) {
+        return -1;
+    } if (a['fromName'] > b['fromName']) {
+        return 1;
+    } return 0; });
+};
+//#endregion Helper Methods
+const TMSearchResult = ({ context = SearchResultContext.METADATA_SEARCH, isVisible = true, searchResults = [], showSearchResultSidebar = true, showSelector = false, onClosePreview, showDcmtForm = false, showBoard = false, showPreview = false, title, showSysMetadata = false, isClosable = false, allowFloatingBar = true, showToolbarHeader = true, onRefreshAfterAddDcmtToFavs, onRefreshSearchAsync, onSelectedTIDChanged, onUpdate, onClose, onTaskCreateRequest }) => {
+    const [id, setID] = useState('');
+    const [showApprovePopup, setShowApprovePopup] = useState(false);
+    const [showRejectPopup, setShowRejectPopup] = useState(false);
+    const [showReAssignPopup, setShowReAssignPopup] = useState(false);
+    const [splitterSize, setSplitterSize] = useState(['100%', '0']);
+    const [showFloatingBar, setShowFloatingBar] = useState(true);
+    const [lastUpdateSearchTime, setLastUpdateSearchTime] = useState();
+    const [fromDTD, setFromDTD] = useState();
+    const [selectedSearchResult, setSelectedSearchResult] = useState();
+    const [isOpenDetails, setIsOpenDetails] = useState(false);
+    const [isOpenMaster, setIsOpenMaster] = useState(false);
+    const [secondaryMasterDcmts, setSecondaryMasterDcmts] = useState([]);
+    const [isOpenDcmtForm, setIsOpenDcmtForm] = useState(false);
+    const [isOpenPreview, setIsOpenPreview] = useState(false);
+    const [isOpenSysMetadata, setIsOpenSysMetadata] = useState(false);
+    const [isOpenBoard, setIsOpenBoard] = useState(false);
+    const [isOpenDistinctValues, setIsOpenDistinctValues] = useState(false);
+    const [isOpenTags, setIsOpenTags] = useState(false);
+    const [currentTIDHasDetailRelations, setCurrentTIDHasDetailRelations] = useState();
+    const [currentTIDHasMasterRelations, setCurrentTIDHasMasterRelations] = useState();
+    const [isOpenBatchUpdate, setIsOpenBatchUpdate] = useState(false);
+    const [visibleItems, setVisibleItems] = useState([]);
+    const [focusedItem, setFocusedItem] = useState();
+    const [selectedItems, setSelectedItems] = useState([]);
+    const [currentDcmt, setCurrentDcmt] = useState();
+    const [currentMetadataValues, setCurrentMetadataValues] = useState([]);
+    const [dcmtFormLayoutMode, setDcmtFormLayoutMode] = useState(LayoutModes.Update);
+    // const [allowMultipleSelection, setAllowMultipleSelection] = useState<boolean>(false);
+    const [isModifiedBatchUpdate, setIsModifiedBatchUpdate] = useState(false);
+    const [confirmFormat, ConfirmFormatDialog] = useInputCvtFormatDialog();
+    const { abortController, showWaitPanel, waitPanelTitle, showPrimary, waitPanelTextPrimary, waitPanelValuePrimary, waitPanelMaxValuePrimary, showSecondary, waitPanelTextSecondary, waitPanelValueSecondary, waitPanelMaxValueSecondary, downloadDcmtsAsync, runOperationAsync } = useDcmtOperations();
+    const deviceType = useDeviceType();
+    let disable = getSelectedDcmtsOrFocused(selectedItems, focusedItem).length === 0;
+    let dcmtsReturned = (searchResults?.length > 1 ? selectedSearchResult?.dcmtsReturned : searchResults[0]?.dcmtsReturned ?? 0);
+    let dcmtsFound = (searchResults?.length > 1 ? selectedSearchResult?.dcmtsFound : searchResults[0]?.dcmtsFound ?? 0);
+    useEffect(() => { setID(genUniqueId()); }, []);
+    useEffect(() => {
+        setSelectedItems([]);
+        setFocusedItem(undefined);
+        setIsOpenBatchUpdate(false);
+        if (searchResults.length <= 0)
+            return;
+        if (searchResults.length === 1) {
+            setSelectedSearchResult(searchResults[0]);
+            return;
+        }
+        setSelectedSearchResult(orderByName(searchResults)[0]);
+    }, [searchResults]);
+    useEffect(() => {
+        setFocusedItem(undefined);
+        setSelectedItems([]);
+        DcmtTypeListCacheService.GetAsync(selectedSearchResult?.fromTID).then((dtd) => {
+            setFromDTD(dtd);
+        });
+        hasDetailRelations(selectedSearchResult?.fromTID).then((value) => setCurrentTIDHasDetailRelations(value));
+        hasMasterRelations(selectedSearchResult?.fromTID).then((value) => setCurrentTIDHasMasterRelations(value));
+    }, [selectedSearchResult]);
+    useEffect(() => {
+        if (!focusedItem)
+            return;
+        if (!fromDTD)
+            return;
+        let dtd = searchResults.length > 1 ? searchResults.find(res => res.fromTID == focusedItem?.TID)?.dtdResult : searchResults[0]?.dtdResult;
+        if (!dtd)
+            return;
+        let rows = dtd.rows ? dtd.rows[focusedItem.rowIndex] : [];
+        let mids = searchResults.length > 1 ? searchResults.find(res => res.fromTID == focusedItem?.TID)?.selectMIDs : searchResults[0]?.selectMIDs;
+        let metadataList = searchResultToMetadataValues(focusedItem?.TID, dtd, rows, mids, fromDTD?.metadata, LayoutModes.Update);
+        setCurrentMetadataValues(metadataList);
+    }, [focusedItem, searchResults, fromDTD]);
+    useEffect(() => {
+        setCurrentDcmt({
+            tid: currentMetadataValues.find(o => o.mid == SystemMIDsAsNumber.TID)?.value,
+            did: currentMetadataValues.find(o => o.mid == SystemMIDsAsNumber.DID)?.value,
+            fileCount: currentMetadataValues.find(o => o.mid == SystemMIDsAsNumber.FileCount)?.value,
+            fileSize: currentMetadataValues.find(o => o.mid == SystemMIDsAsNumber.FileSize)?.value,
+            fileExt: currentMetadataValues.find(o => o.mid == SystemMIDsAsNumber.FileExt)?.value
+        });
+    }, [currentMetadataValues]);
+    useEffect(() => { setIsOpenBoard(showBoard); }, [showBoard]);
+    useEffect(() => { setIsOpenSysMetadata(showSysMetadata); }, [showSysMetadata]);
+    useEffect(() => { setIsOpenDcmtForm(showDcmtForm); }, [showDcmtForm]);
+    useEffect(() => { setIsOpenPreview(showPreview); }, [showPreview]);
+    const sideBarItems = [
+        { icon: _jsx(IconShow, {}), id: 'Preview', visibleName: 'Anteprima', isActive: isOpenPreview, onClick: () => { setIsOpenPreview(!isOpenPreview); }, disabled: isOpenBatchUpdate || fromDTD?.archiveConstraint === ArchiveConstraints.OnlyMetadata },
+        { icon: _jsx(IconBoard, {}), id: 'Board', visibleName: 'Bacheca', beginGroup: true, isActive: isOpenBoard, disabled: isOpenBatchUpdate, onClick: () => { closeMiddlePanel(); setIsOpenBoard(!isOpenBoard); } },
+        { icon: _jsx(IconDcmtTypeSys, {}), id: 'SystemMetadata', visibleName: 'Metadati di sistema', isActive: isOpenSysMetadata, disabled: isOpenBatchUpdate, onClick: () => { closeMiddlePanel(); setIsOpenSysMetadata(!isOpenSysMetadata); } },
+        { icon: _jsx(IconDetailDcmts, { fontSize: 20, transform: 'scale(-1, 1)' }), id: 'Master', beginGroup: true, visible: currentTIDHasMasterRelations, visibleName: SDKUI_Localizator.DcmtsMaster, disabled: isOpenBatchUpdate || !focusedItem?.DID, isActive: isOpenMaster, onClick: () => { setIsOpenMaster(!isOpenMaster); } },
+        { icon: _jsx(IconDetailDcmts, { fontSize: 20 }), id: 'Details', visibleName: SDKUI_Localizator.DcmtsDetail, disabled: isOpenBatchUpdate || (!focusedItem?.DID && selectedItems.length <= 0), isActive: isOpenDetails, visible: currentTIDHasDetailRelations, onClick: () => { setIsOpenDetails(!isOpenDetails); } },
+        // { icon: <IconBatchUpdate fontSize={18} />, id: 'BatchUpdate', visibleName: "Modifica multipla", disabled: selectedItems.length <= 0, isActive: isOpenBatchUpdate, onClick: () => { setIsOpenBatchUpdate(!isOpenBatchUpdate) } }
+    ];
+    const openFormHandler = (layoutMode) => { setIsOpenDcmtForm(true); setDcmtFormLayoutMode(layoutMode); };
+    const openTaskFormHandler = (value) => {
+        if (selectedItems.length > 1)
+            return;
+        const item = selectedItems.length === 1 ? selectedItems[0] : focusedItem;
+        if (item?.TID && item?.DID) {
+            const fetchData = async () => {
+                try {
+                    const dtd = await DcmtTypeListCacheService.GetAsync(item.TID);
+                    if (dtd) {
+                        const name = `${dtd.name ?? '-'} (DID: ${item.DID})`;
+                        onTaskCreateRequest?.({ tid: item.TID, did: item.DID, name });
+                    }
+                }
+                catch (error) {
+                    console.error("Error fetching data:", error);
+                }
+            };
+            fetchData();
+        }
+    };
+    const openDetailDcmtsFormHandler = (value) => { setIsOpenDetails(value); };
+    const openMasterDcmtsFormHandler = (value) => { setIsOpenMaster(value); };
+    const openBatchUpdateFormHandler = (value) => { setIsOpenBatchUpdate(value); };
+    const getTitleHeader = () => {
+        if (title)
+            return title;
+        let titleHeader = 'Ricerca per metadati';
+        switch (context) {
+            case SearchResultContext.METADATA_SEARCH:
+                titleHeader = `${searchResults?.length > 1 ? selectedSearchResult?.fromName : searchResults[0]?.fromName}`;
+                break;
+            case SearchResultContext.FAVORITES:
+                titleHeader = SDKUI_Localizator.Favorites;
+                break;
+            case SearchResultContext.RECENT:
+                titleHeader = SDKUI_Localizator.RecentDcmts;
+                break;
+            case SearchResultContext.WORKFLOW_APPROVE:
+                titleHeader = SDKUI_Localizator.WorkflowApproval;
+                break;
+            case SearchResultContext.FREE_SEARCH:
+                titleHeader = `Risultato della ricerca full text`;
+                break;
+        }
+        return titleHeader;
+    };
+    const allowBackButton = () => {
+        if (context === SearchResultContext.METADATA_SEARCH)
+            return true;
+        if (deviceType !== DeviceType.MOBILE)
+            return false;
+        return splitterSize[0] === '0';
+    };
+    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) {
+            setIsOpenDcmtForm(false);
+        }
+        else {
+            setSplitterSize(['100%', '0']);
+            onClose?.();
+        }
+    };
+    const onContextMenuPreparing = (e) => {
+        if (e === undefined)
+            return;
+        if (e.target === 'content') {
+            e.items = e.items || [];
+            const menuItems = commandsMenuItems(fromDTD, selectedItems, focusedItem, context, showFloatingBar, setShowFloatingBar, openFormHandler, downloadDcmtsAsync, runOperationAsync, onRefreshSearchAsync, refreshSelectionDataRowsAsync, onRefreshAfterAddDcmtToFavs, confirmFormat, openTaskFormHandler, openDetailDcmtsFormHandler, openMasterDcmtsFormHandler, openBatchUpdateFormHandler, true, true);
+            e.items.push(...menuItems);
+        }
+    };
+    const refreshDataGrid = async () => {
+        await onRefreshSearchAsync?.();
+        let index = selectedSearchResult?.dtdResult?.columns?.findIndex(col => col.caption === 'DID');
+        let selectedRows = [];
+        if (!index)
+            return;
+        for (let data of getSelectedDcmtsOrFocused(selectedItems, focusedItem)) {
+            selectedRows.push(selectedSearchResult?.dtdResult?.rows?.findIndex(row => row[index] === data.DID.toString()));
+        }
+        if (!selectedSearchResult?.dtdResult?.rows)
+            return;
+        let newRows = [];
+        for (let i = 0; i < selectedSearchResult.dtdResult.rows.length; i++) {
+            if (!selectedRows.includes(i))
+                newRows.push(selectedSearchResult.dtdResult.rows[i]);
+        }
+        let newSearchresult = structuredClone(selectedSearchResult);
+        let newDtd = structuredClone(selectedSearchResult.dtdResult);
+        newDtd.rows = newRows;
+        newSearchresult.dtdResult = newDtd;
+        setSelectedSearchResult(newSearchresult);
+    };
+    const removeDcmtFromFavsOrRecents = async () => {
+        switch (context) {
+            case SearchResultContext.FAVORITES:
+                await runOperationAsync(getSelectedDcmtsOrFocused(selectedItems, focusedItem), DcmtOperationTypes.RemoveFromFavs, refreshDataGrid);
+                break;
+            case SearchResultContext.RECENT:
+                {
+                    let category = RecentCategories.None;
+                    if (selectedSearchResult?.category === 'RecentArchive') {
+                        category = RecentCategories.Archive;
+                    }
+                    else if (selectedSearchResult?.category === 'RecentView') {
+                        category = RecentCategories.View;
+                    }
+                    await runOperationAsync(getSelectedDcmtsOrFocused(selectedItems, focusedItem, category), DcmtOperationTypes.RemoveFromRecents, refreshDataGrid);
+                    break;
+                }
+            default: break;
+        }
+    };
+    const onSearchResultSelectionChanged = (e) => {
+        setSelectedSearchResult(e);
+        if (deviceType === DeviceType.MOBILE) {
+            setSplitterSize(['0', '100%']);
+        }
+        onSelectedTIDChanged?.(e.fromTID);
+    };
+    const refreshFocusedDataRowAsync = async (tid, did, refreshUI) => {
+        if (!tid || !did)
+            return;
+        let currentResult = searchResults.length > 1 ? selectedSearchResult : searchResults[0];
+        let currentResultColIndexTID = currentResult?.dtdResult?.columns?.findIndex(o => o.caption == "TID");
+        if (currentResultColIndexTID == undefined)
+            return;
+        let currentResultColIndexDID = currentResult?.dtdResult?.columns?.findIndex(o => o.caption == "DID");
+        if (currentResultColIndexDID == undefined)
+            return;
+        let newDcmt = await SDK_Globals.tmSession?.NewSearchEngine().GetMetadataAsync(tid, did, true);
+        let newDcmtRow = newDcmt?.dtdResult?.rows?.[0] ?? [];
+        let currentDcmtRow = currentResult?.dtdResult?.rows?.filter((row) => row[currentResultColIndexTID] == tid?.toString() && row[currentResultColIndexDID] == did?.toString()) ?? [];
+        for (const row of currentDcmtRow) {
+            let mids = currentResult?.selectMIDs ?? [];
+            for (let i = 0; i < mids.length; i++) {
+                const mid = mids[i];
+                let newDcmtMidIndex = newDcmt?.selectMIDs?.findIndex(o => o == mid) ?? -1;
+                if (newDcmtMidIndex >= 0 && row[i] != newDcmtRow[newDcmtMidIndex]) {
+                    row[i] = newDcmtRow[newDcmtMidIndex];
+                }
+            }
+        }
+        if (refreshUI)
+            setLastUpdateSearchTime(new Date(Date.now()));
+    };
+    const refreshSelectionDataRowsAsync = async () => {
+        let dcmts = getSelectedDcmtsOrFocused(selectedItems, focusedItem);
+        for (const dcmt of dcmts) {
+            await refreshFocusedDataRowAsync(dcmt.TID, dcmt.DID);
+        }
+        setLastUpdateSearchTime(new Date(Date.now()));
+    };
+    const isOpenMiddlePanel = () => isOpenSysMetadata || isOpenBoard || isOpenTags || isOpenDistinctValues;
+    const getSelectionDcmtInfo = () => { return getSelectedDcmtsOrFocused(selectedItems, focusedItem); };
+    const getPrimarySplitterStartLayout = () => {
+        let size = ['100%', '0'];
+        if (deviceType !== DeviceType.MOBILE) {
+            if (isOpenPreview || isOpenMiddlePanel() || isOpenBatchUpdate) {
+                size = ['50%', '50%'];
+            }
+        }
+        else {
+            size = (isOpenPreview || isOpenMiddlePanel() || isOpenBatchUpdate) ? ['0', '100%'] : ['100%', '0'];
+        }
+        return size;
+    };
+    const getSecondarySplitterStartLayout = () => {
+        if (isOpenPreview && !isOpenMiddlePanel()) {
+            return ['0', '100%'];
+        }
+        if (!isOpenPreview && isOpenMiddlePanel()) {
+            return ['100%', '0'];
+        }
+        return ['40%', '60%'];
+    };
+    const closeMiddlePanel = () => {
+        setIsOpenBoard(false);
+        setIsOpenSysMetadata(false);
+        setIsOpenTags(false);
+        setIsOpenDistinctValues(false);
+    };
+    const titleText = () => {
+        if (isOpenTags)
+            return 'Tags';
+        if (isOpenSysMetadata)
+            return 'Metadati di sistema';
+        if (isOpenBoard)
+            return 'Bacheca';
+        return '';
+    };
+    const canNavigateHandler = (dir) => {
+        if (!focusedItem)
+            return false;
+        let index = -1;
+        if (visibleItems) {
+            index = visibleItems.findIndex(item => item.rowIndex === focusedItem.rowIndex);
+        }
+        switch (dir) {
+            case 'next': if (visibleItems && index < visibleItems.length - 1) {
+                return true;
+            }
+            else {
+                return false;
+            }
+            default: if (visibleItems && index > 0) {
+                return true;
+            }
+            else {
+                return false;
+            }
+        }
+    };
+    const onNavigateHandler = (dir) => {
+        let index = -1;
+        if (visibleItems && focusedItem) {
+            index = visibleItems.findIndex(item => item.rowIndex === focusedItem.rowIndex);
+        }
+        switch (dir) {
+            case 'next':
+                setFocusedItem(visibleItems[index + 1]);
+                break;
+            default:
+                setFocusedItem(visibleItems[index - 1]);
+                break;
+        }
+    };
+    const middlePanelToolbar = _jsxs("div", { style: { width: 'max-content', display: 'flex', alignItems: 'center', gap: '10px' }, children: [_jsx(TMSaveFormButtonPrevious, { btnStyle: 'icon', isModified: false, iconColor: TMColors.default_background, formMode: FormModes.ReadOnly, canPrev: canNavigateHandler('prev'), onPrev: () => onNavigateHandler('prev') }), _jsx(TMSaveFormButtonNext, { btnStyle: 'icon', isModified: false, iconColor: TMColors.default_background, formMode: FormModes.ReadOnly, canNext: canNavigateHandler('next'), onNext: () => onNavigateHandler('next') })] });
+    let notAvalableMsg = '';
+    let notAvalableIcon;
+    if (isOpenBoard) {
+        notAvalableMsg = 'Bacheca non disponibile.';
+    }
+    else if (isOpenTags) {
+        notAvalableMsg = 'Tags non disponibile.';
+    }
+    else if (isOpenDetails) {
+        notAvalableMsg = 'Documenti detail non disponibile.';
+    }
+    else if (isOpenMaster) {
+        notAvalableMsg = 'Documenti master non disponibile.';
+    }
+    else {
+        notAvalableMsg = 'Metadati di sistema non disponibile.';
+    }
+    if (isOpenBoard) {
+        notAvalableIcon = _jsx(IconBoard, { fontSize: 96 });
+    }
+    else if (isOpenTags) {
+        notAvalableIcon = _jsx(IconTag, { fontSize: 96 });
+    }
+    else if (isOpenDetails) {
+        notAvalableIcon = _jsx(IconDetails, { fontSize: 96 });
+    }
+    else if (isOpenMaster) {
+        notAvalableIcon = _jsx(IconCommand, { fontSize: 96 });
+    }
+    else {
+        notAvalableIcon = _jsx(IconDcmtTypeSys, { fontSize: 96 });
+    }
+    const handleAddItem = (tid, did) => {
+        let newItem = { TID: tid ?? 0, DID: did ?? 0 };
+        setSecondaryMasterDcmts((prevItems) => [...prevItems, newItem]);
+    };
+    const handleRemoveItem = (tid, did) => {
+        setSecondaryMasterDcmts((prevItems) => prevItems.filter(item => item.TID !== tid && item.DID !== did));
+    };
+    if (!searchResults || searchResults.length <= 0)
+        return _jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%' }, children: [_jsx(IconBoard, { fontSize: 96 }), _jsx("div", { style: { fontSize: "15px", marginTop: "10px" }, children: SDKUI_Localizator.NoDcmtFound })] });
+    return (_jsx(StyledMultiViewPanel, { "$isVisible": isVisible, children: _jsxs(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: [_jsxs(TMSplitterLayout, { separatorSize: 5, separatorColor: 'transparent', showSeparator: (isOpenPreview || isOpenMiddlePanel() || isOpenBatchUpdate) && deviceType !== DeviceType.MOBILE, start: getPrimarySplitterStartLayout(), min: deviceType !== DeviceType.MOBILE && isOpenDcmtForm ? ['150px', '0'] : ['0', '0'], direction: 'horizontal', children: [_jsx(TMLayoutItem, { children: _jsxs(TMToolbarCard, { toolbar: _jsxs(_Fragment, { children: [context !== SearchResultContext.METADATA_SEARCH && fromDTD?.templateTID === TemplateTIDs.WF_WIApprView && _jsx(WorkFlowOperationButtons, { deviceType: deviceType, onApprove: () => setShowApprovePopup(true), onReject: () => setShowRejectPopup(true), onReAssign: () => setShowReAssignPopup(true), approveDisable: disable, rejectDisable: disable, reassignDisable: disable, infoDisable: getSelectedDcmtsOrFocused(selectedItems, focusedItem).length !== 1 }), (dcmtsReturned != dcmtsFound) && _jsx("p", { style: { backgroundColor: `white`, color: TMColors.primaryColor, textAlign: 'center', padding: '1px 4px', borderRadius: '3px', display: 'flex' }, children: `${dcmtsReturned}/${dcmtsFound} restituiti` }), (context === SearchResultContext.RECENT || context === SearchResultContext.FAVORITES) &&
+                                            _jsx("div", { style: { display: 'flex', alignItems: 'center', gap: '5px' }, children: _jsx(TMButton, { btnStyle: 'icon', icon: _jsx(IconDelete, { color: 'white' }), caption: "Rimuovi da " + (context === SearchResultContext.RECENT ? '"Recenti"' : '"Preferiti"'), disabled: getSelectedDcmtsOrFocused(selectedItems, focusedItem).length <= 0, onClick: removeDcmtFromFavsOrRecents }) }), _jsx(TMButton, { btnStyle: 'icon', icon: _jsx(IconRefresh, { color: 'white' }), caption: SDKUI_Localizator.Refresh, onClick: onRefreshSearchAsync }), _jsx(IconMenuVertical, { id: `commands-header-${id}`, color: 'white', cursor: 'pointer' }), _jsx(CommandsContextMenu, { target: `#commands-header-${id}`, menuItems: commandsMenuItems(fromDTD, selectedItems, focusedItem, context, showFloatingBar, setShowFloatingBar, openFormHandler, downloadDcmtsAsync, runOperationAsync, onRefreshSearchAsync, refreshSelectionDataRowsAsync, onRefreshAfterAddDcmtToFavs, confirmFormat, openTaskFormHandler, openDetailDcmtsFormHandler, openMasterDcmtsFormHandler, openBatchUpdateFormHandler, false, true) })] }), onBack: !isClosable && allowBackButton() ? onBack : undefined, onClose: isClosable && allowBackButton() ? onBack : undefined, items: showSearchResultSidebar ? sideBarItems : undefined, title: getTitleHeader(), showHeader: showToolbarHeader, children: [_jsxs(TMLayoutItem, { height: '100%', children: [_jsxs(TMSplitterLayout, { direction: 'horizontal', min: ['0', '0'], showSeparator: showSelector && deviceType !== DeviceType.MOBILE, start: showSelector ? deviceType !== DeviceType.MOBILE ? ['25%', '75%'] : splitterSize : ['0%', '100%'], children: [showSelector ?
+                                                        _jsx(TMLayoutItem, { children: _jsx(TMSearchResultSelector, { searchResults: searchResults, onSelectionChanged: onSearchResultSelectionChanged }) })
+                                                        :
+                                                            _jsx(_Fragment, {}), _jsxs(TMLayoutItem, { children: [_jsx(TMSearchResultGrid
+                                                            // allowMultipleSelection={allowMultipleSelection}
+                                                            , { 
+                                                                // allowMultipleSelection={allowMultipleSelection}
+                                                                inputFocusedItem: focusedItem, inputSelectedItems: selectedItems, searchResult: searchResults.length > 1 ? selectedSearchResult : searchResults[0], lastUpdateSearchTime: lastUpdateSearchTime, onDblClick: () => openFormHandler(LayoutModes.Update), onContextMenuPreparing: onContextMenuPreparing, onSelectionChanged: (items) => { setSelectedItems(items); }, onVisibleItemChanged: setVisibleItems, onFocusedItemChanged: setFocusedItem }), allowFloatingBar && showFloatingBar && deviceType !== DeviceType.MOBILE &&
+                                                                _jsxs(TMFloatingToolbar, { backgroundColor: TMColors.primaryColor, initialLeft: '10px', initialTop: 'calc(100% - 75px)', children: [fromDTD?.perm?.canRetrieveFile === AccessLevels.Yes && _jsx(TMButton, { btnStyle: 'icon', caption: "Download file", disabled: fromDTD?.perm?.canRetrieveFile !== AccessLevels.Yes, icon: _jsx(IconDownload, { color: 'white' }), onClick: () => { downloadDcmtsAsync(getSelectedDcmtsOrFocused(selectedItems, focusedItem)); } }), _jsx(TMButton, { btnStyle: 'icon', caption: 'Firma e marca', icon: _jsx(IconSignature, { color: 'white' }), onClick: () => { ShowAlert({ message: "TODO Firma e marca ", mode: 'info', title: `${"TODO"}`, duration: 3000 }); } }), _jsx(TMButton, { btnStyle: 'icon', caption: 'Salva layout', icon: _jsx(IconSave, { color: 'white' }), onClick: () => { ShowAlert({ message: "TODO Salva visualizzazione ", mode: 'info', title: `${"TODO"}`, duration: 3000 }); } }), _jsx(IconMenuVertical, { id: `commands-floating-${id}`, color: 'white', cursor: 'pointer' }), _jsx(CommandsContextMenu, { target: `#commands-floating-${id}`, menuItems: commandsMenuItems(fromDTD, selectedItems, focusedItem, context, showFloatingBar, setShowFloatingBar, openFormHandler, downloadDcmtsAsync, runOperationAsync, onRefreshSearchAsync, refreshSelectionDataRowsAsync, onRefreshAfterAddDcmtToFavs, confirmFormat, openTaskFormHandler, openDetailDcmtsFormHandler, openMasterDcmtsFormHandler, openBatchUpdateFormHandler, false, true) })] })] })] }), showApprovePopup && _jsx(WorkFlowApproveRejectPopUp, { deviceType: deviceType, onUpdate: onUpdate, selectedItems: getSelectedDcmtsOrFocused(selectedItems, focusedItem), op: 0, onClose: () => setShowApprovePopup(false) }), showRejectPopup && _jsx(WorkFlowApproveRejectPopUp, { deviceType: deviceType, onUpdate: onUpdate, selectedItems: getSelectedDcmtsOrFocused(selectedItems, focusedItem), op: 1, onClose: () => setShowRejectPopup(false) }), showReAssignPopup && _jsx(WorkFlowReAssignPopUp, { deviceType: deviceType, onUpdate: onUpdate, selectedItems: getSelectedDcmtsOrFocused(selectedItems, focusedItem), onClose: () => setShowReAssignPopup(false) })] }), _jsx(ConfirmFormatDialog, {})] }) }), isOpenBatchUpdate ?
+                            _jsx(StyledModalContainer, { style: { backgroundColor: 'white' }, children: _jsx(TMBatchUpdateForm, { inputDcmts: getSelectionDcmtInfo(), TID: focusedItem ? focusedItem?.TID : selectedItems[0]?.TID, DID: focusedItem ? focusedItem?.DID : selectedItems[0]?.DID, onBack: () => setIsOpenBatchUpdate(false), onSavedCallbackAsync: async () => {
+                                        setIsOpenBatchUpdate(false);
+                                        setIsModifiedBatchUpdate(false);
+                                        await refreshSelectionDataRowsAsync();
+                                    }, onStatusChanged: (isModified) => { setIsModifiedBatchUpdate(isModified); } }) })
+                            :
+                                isOpenPreview || isOpenMiddlePanel()
+                                    ? _jsx(TMLayoutItem, { children: _jsxs(TMSplitterLayout, { separatorSize: 5, direction: 'horizontal', showSeparator: deviceType !== DeviceType.MOBILE && (isOpenPreview && isOpenMiddlePanel()), start: getSecondarySplitterStartLayout(), min: ['0', '0'], separatorColor: 'transparent', children: [isOpenMiddlePanel()
+                                                    ? _jsx(TMLayoutItem, { children: _jsx(TMToolbarCard, { padding: '0', 
+                                                            // color={TMColors.primaryColor}
+                                                            // backgroundColor={`${TMColors.primaryColor}25`}
+                                                            title: titleText(), toolbar: middlePanelToolbar, onClose: () => closeMiddlePanel(), children: (!focusedItem?.DID)
+                                                                ?
+                                                                    _jsx(TMNothingToShow, { text: 'Nessun documento selezionato.', secondText: notAvalableMsg, icon: notAvalableIcon })
+                                                                :
+                                                                    _jsxs(StyledContainer, { children: [isOpenBoard && _jsx(TMDcmtBlog, { tid: focusedItem?.TID, did: focusedItem?.DID }), isOpenSysMetadata &&
+                                                                                _jsx(TMMetadataValues, { layoutMode: LayoutModes.Update, openChooserBySingleClick: !isOpenDistinctValues, TID: focusedItem?.TID, deviceType: deviceType, metadataValues: currentMetadataValues.filter(o => (o.mid != undefined && o.mid <= 100)), metadataValuesOrig: currentMetadataValues.filter(o => (o.mid != undefined && o.mid <= 100)), validationItems: [] })] }) }) })
+                                                    : _jsx(_Fragment, {}), isOpenPreview
+                                                    ? _jsx(TMLayoutItem, { children: _jsx(TMDcmtPreview, { onClose: () => { setIsOpenPreview(false); onClosePreview?.(); }, dcmtData: currentDcmt, canNext: canNavigateHandler('next'), canPrev: canNavigateHandler('prev'), onNext: () => onNavigateHandler('next'), onPrev: () => onNavigateHandler('prev') }) })
+                                                    : _jsx(_Fragment, {})] }) })
+                                    : _jsx(_Fragment, {})] }), isOpenDetails &&
+                    _jsx(StyledModalContainer, { style: { backgroundColor: 'white' }, children: _jsx(TMMasterDetailDcmts, { deviceType: deviceType, isForMaster: false, inputDcmts: getSelectionDcmtInfo(), allowNavigation: focusedItem && selectedItems.length <= 0, canNext: canNavigateHandler('next'), canPrev: canNavigateHandler('prev'), onNext: () => onNavigateHandler('next'), onPrev: () => onNavigateHandler('prev'), onBack: () => setIsOpenDetails(false) }) }), isOpenMaster &&
+                    _jsxs(StyledModalContainer, { style: { backgroundColor: 'white' }, children: [_jsx(TMMasterDetailDcmts, { deviceType: deviceType, inputDcmts: getSelectionDcmtInfo(), isForMaster: true, allowNavigation: focusedItem && selectedItems.length <= 0, canNext: canNavigateHandler('next'), canPrev: canNavigateHandler('prev'), onNext: () => onNavigateHandler('next'), onPrev: () => onNavigateHandler('prev'), onBack: () => setIsOpenMaster(false), appendMasterDcmts: handleAddItem }), secondaryMasterDcmts.length > 0 && secondaryMasterDcmts.map((dcmt, index) => {
+                                return (_jsx(StyledModalContainer, { style: { backgroundColor: 'white' }, children: _jsx(TMMasterDetailDcmts, { deviceType: deviceType, inputDcmts: [dcmt], isForMaster: true, allowNavigation: false, onBack: () => handleRemoveItem(dcmt.TID, dcmt.DID), appendMasterDcmts: handleAddItem }) }, `${index}-${dcmt.DID}`));
+                            })] }), isOpenDcmtForm &&
+                    _jsx(StyledModalContainer, { style: { backgroundColor: 'white' }, children: _jsx(TMDcmtForm, { TID: focusedItem?.TID, DID: focusedItem?.DID, layoutMode: dcmtFormLayoutMode, showPreview: true, count: visibleItems.length, itemIndex: visibleItems.findIndex(o => o.rowIndex === focusedItem?.rowIndex) + 1, canNext: canNavigateHandler('next'), canPrev: canNavigateHandler('prev'), onNext: () => onNavigateHandler('next'), onPrev: () => onNavigateHandler('prev'), onClose: () => { setIsOpenDcmtForm(false); }, onSavedAsyncCallback: async (tid, did) => { await refreshFocusedDataRowAsync(tid, did, true); } }) })] }) }));
+};
+export default TMSearchResult;
+const renderDcmtIcon = (cellData) => _jsx(TMDcmtIcon, { fileExtension: cellData.data.FILEEXT, fileCount: cellData.data.FILECOUNT, isLexProt: cellData.data.IsLexProt, isMail: cellData.data.ISMAIL, isShared: cellData.data.ISSHARED, isSigned: cellData.data.ISSIGNED });
+const TMSearchResultGrid = ({ inputFocusedItem, allowMultipleSelection = true, onFocusedItemChanged, onVisibleItemChanged, inputSelectedItems = [], lastUpdateSearchTime, searchResult, onContextMenuPreparing, onSelectionChanged, onDblClick }) => {
+    const [dataSource, setDataSource] = useState();
+    const [showFilterPanel, setShowFilterPanel] = useState(false);
+    const [columns, setColumns] = useState([]);
+    // State to store selected row keys
+    const [selectedRowKeys, setSelectedRowKeys] = useState([]);
+    const [focusedItem, setFocusedItem] = useState();
+    const [visibleItems, setVisibleItems] = useState([]);
+    useEffect(() => {
+        if (deepCompare(inputFocusedItem, focusedItem))
+            return;
+        setFocusedItem(inputFocusedItem);
+    }, [inputFocusedItem]);
+    useEffect(() => {
+        const inputSelectedItemsRowIndex = inputSelectedItems.map(e => e.rowIndex);
+        if (JSON.stringify(inputSelectedItemsRowIndex) === JSON.stringify(selectedRowKeys))
+            return;
+        setSelectedRowKeys(inputSelectedItemsRowIndex);
+    }, [inputSelectedItems]);
+    const cellRender = useCallback((cellData, dataDomain, dataListID, dataListViewMode) => {
+        if (!cellData || cellData.value === undefined)
+            return null;
+        const isLogDel = cellData.data.ISLOGDEL == 1;
+        const isLexProt = cellData.data.IsLexProt == 1;
+        let style = {};
+        if (isLogDel) {
+            style = { color: 'gray', textDecoration: 'line-through' };
+        }
+        else if (isLexProt)
+            style = { color: 'blue' };
+        let child = _jsx("div", { children: cellData.text });
+        if (dataDomain === MetadataDataDomains.DataList) {
+            child = _jsx(TMDataListItemViewer, { dataListId: dataListID, viewMode: dataListViewMode, value: cellData.value });
+        }
+        if (dataDomain === MetadataDataDomains.UserID) {
+            child = _jsx(TMUserIdViewer, { userId: cellData.value, showIcon: true, noneSelectionText: '' });
+        }
+        return _jsx("div", { style: style, children: child });
+    }, []);
+    const dataType = useCallback((col) => {
+        switch (col.dataType) {
+            case DataColumnTypes.DateTime: return "datetime";
+            case DataColumnTypes.Bool: return "boolean";
+            case DataColumnTypes.Number: return "number";
+            default: return "string";
+        }
+    }, []);
+    const getDisplayFormat = useCallback((col) => {
+        if (col.dataType === DataColumnTypes.Text)
+            return undefined;
+        const format = MetadataFormats[(col.extendedProperties?.["Format"] ?? "None")];
+        const formatCulture = col.extendedProperties?.["FormatCulture"] ?? window.navigator.language;
+        if (col.dataType === DataColumnTypes.DateTime) {
+            return {
+                formatter: function (value) {
+                    switch (format) {
+                        case MetadataFormats.ShortDate: return value.toLocaleString(formatCulture, formatCulture == "it-IT" ? { year: "numeric", month: "2-digit", day: "2-digit" } : { dateStyle: 'short' });
+                        case MetadataFormats.ShortTime: return value.toLocaleString(formatCulture, { timeStyle: 'short' });
+                        case MetadataFormats.ShortDateLongTime: return value.toLocaleString(formatCulture, formatCulture == "it-IT" ? { year: "numeric", month: "2-digit", day: "2-digit", hour: '2-digit', minute: '2-digit', second: '2-digit' } : { dateStyle: 'short', timeStyle: 'medium' }).replace(',', '');
+                        case MetadataFormats.ShortDateShortTime: return value.toLocaleString(formatCulture, formatCulture == "it-IT" ? { year: "numeric", month: "2-digit", day: "2-digit", hour: '2-digit', minute: '2-digit' } : { dateStyle: 'short', timeStyle: 'short' }).replace(',', '');
+                        case MetadataFormats.LongDate: return value.toLocaleString(formatCulture, { weekday: "long", year: "numeric", month: "long", day: "numeric" });
+                        case MetadataFormats.LongTime: return value.toLocaleString(formatCulture, { timeStyle: 'medium' });
+                        case MetadataFormats.LongDateLongTime: return value.toLocaleString(formatCulture, { weekday: "long", year: "numeric", month: "long", day: "numeric", hour: '2-digit', minute: '2-digit', second: '2-digit' });
+                        case MetadataFormats.LongDateShortTime: return value.toLocaleString(formatCulture, { weekday: "long", year: "numeric", month: "long", day: "numeric", hour: '2-digit', minute: '2-digit' });
+                        default: return value.toLocaleString(formatCulture, formatCulture == "it-IT" ? { year: "numeric", month: "2-digit", day: "2-digit" } : { dateStyle: 'short' });
+                    }
+                }
+            };
+        }
+        if (col.dataType === DataColumnTypes.Number) {
+            return {
+                formatter: function (value) {
+                    return value.toLocaleString(formatCulture, { useGrouping: format == MetadataFormats.NumberWithThousandsSeparator });
+                }
+            };
+        }
+        if (format == MetadataFormats.None)
+            return undefined;
+        if (format == MetadataFormats.CurrencyEuro)
+            return { type: 'currency', precision: 2, currency: "EUR" };
+        if (format == MetadataFormats.CurrencyDollar)
+            return { type: 'currency', precision: 2, currency: "USD" };
+        if (format == MetadataFormats.CurrencyPound)
+            return { type: 'currency', precision: 2, currency: "GBP" };
+        if (format == MetadataFormats.CurrencyYen)
+            return { type: 'currency', currency: "JPY" };
+        return undefined;
+    }, []);
+    useEffect(() => {
+        let cols = [];
+        searchResult?.dtdResult?.columns?.map((col, index) => {
+            let keyField = getDataColumnName(searchResult?.fromTID, col);
+            const isVisible = col.extendedProperties?.["Visibility"] != "Hidden";
+            const dataDomain = MetadataDataDomains[(col.extendedProperties?.["DataDomain"] ?? "None")];
+            const dataListID = Number(col.extendedProperties?.["DataListID"]);
+            const dataListViewMode = DataListViewModes[(col.extendedProperties?.["DataListViewMode"] ?? "None")];
+            cols.push({
+                dataField: keyField,
+                dataType: dataType(col),
+                visible: isVisible,
+                cellRender: (cellData) => cellRender(cellData, dataDomain, dataListID, dataListViewMode),
+                caption: col.caption,
+                format: getDisplayFormat(col)
+            });
+        });
+        setColumns(cols);
+        setDataSource(searchResultDescriptorToSimpleArray(searchResult));
+    }, [searchResult]);
+    useEffect(() => {
+        let newDataSource = searchResultDescriptorToSimpleArray(searchResult);
+        setDataSource(newDataSource);
+        setFocusedItem(newDataSource?.find(o => o?.rowIndex === focusedItem?.rowIndex));
+    }, [lastUpdateSearchTime]);
+    // Handles selection change in the data grid
+    const handleSelectionChange = useCallback((e) => {
+        if (onSelectionChanged === undefined)
+            return;
+        const selectedRowsData = e.component.getSelectedRowsData() ?? [];
+        onSelectionChanged(selectedRowsData);
+    }, [onSelectionChanged]);
+    // Handles focus change in the data grid
+    const handleFocusedRowChange = useCallback((e) => {
+        if (setFocusedItem === undefined)
+            return;
+        if (e.row === undefined) {
+            setFocusedItem(undefined);
+            return;
+        }
+        setFocusedItem(e.row.data);
+    }, [setFocusedItem]);
+    useEffect(() => {
+        onFocusedItemChanged?.(focusedItem);
+    }, [focusedItem]);
+    // Handler for double-click row event
+    const onRowDblClick = useCallback((e) => {
+        if (onDblClick === undefined)
+            return;
+        if (e.data === undefined)
+            return;
+        setFocusedItem(e.data);
+        onDblClick();
+    }, [onDblClick]);
+    const dataColumns = useMemo(() => {
+        return [
+            { dataType: "object", visible: true, width: 50, cellRender: renderDcmtIcon, allowResizing: false, },
+            ...columns
+        ];
+    }, [columns]);
+    const onContentReady = useCallback((e) => {
+        if (e === undefined)
+            return;
+        if (setVisibleItems === undefined)
+            return;
+        const visibleRows = e.component.getVisibleRows();
+        setVisibleItems(visibleRows.map((row) => { return row.data; }));
+    }, []);
+    useEffect(() => { onVisibleItemChanged?.(visibleItems); }, [visibleItems]);
+    const onOptionChanged = useCallback((e) => {
+        if (e === undefined)
+            return;
+        if (e.fullName === "filterValue") {
+            setShowFilterPanel(!!e.value);
+        }
+    }, []);
+    return _jsx(TMDataGrid, { id: "tm-search-result", keyExpr: "rowIndex", dataColumns: dataColumns, dataSource: dataSource, repaintChangesOnly: true, selectedRowKeys: selectedRowKeys, focusedRowKey: focusedItem?.rowIndex, showRowLines: SDKUI_Globals.dataGridShowRowLines, showColumnLines: SDKUI_Globals.dataGridShowColumnLines, showSearchPanel: false, showFilterPanel: showFilterPanel, sorting: { mode: "multiple" }, selection: { mode: allowMultipleSelection ? 'multiple' : 'single' }, pageSize: TMDataGridPageSize.Small, onSelectionChanged: handleSelectionChange, onFocusedRowChanged: handleFocusedRowChange, onRowDblClick: onRowDblClick, onContentReady: onContentReady, onOptionChanged: onOptionChanged, onContextMenuPreparing: onContextMenuPreparing, counterConfig: { show: true } });
+};
+//#region TMSearchResultSelector
+const StyledGroupTemplate = styled.div ` 
+    cursor: pointer;
+    /* background-color: #f1f1f1; */
+    background: ${() => `linear-gradient(90deg, #f0f4fa, ${TMColors.primaryColor}66)`};
+    padding: 10px;
+    border-bottom: 1px solid #ccc;
+    display: flex;
+    flex-direction: row;
+    gap: 5px;
+    align-items: center;
+    font-size: 1rem;
+`;
+const StyledItemTemplate = styled.div ` 
+    background: ${(props) => props.$isSelected ? 'oklch(from var(--dx-color-primary) l c h / .2) !important' : 'transparent'};
+    cursor: pointer; 
+`;
+const TMSearchResultSelector = ({ searchResults = [], onSelectionChanged }) => {
+    const [activeCategories, setActiveCategories] = useState([]);
+    const [selectedResult, setSelectedResult] = useState(null);
+    /**  Group results by category */
+    const groupedResults = searchResults.reduce((acc, result) => {
+        const category = result.category ?? 'Uncategorized';
+        if (!acc[category]) {
+            acc[category] = [];
+        }
+        acc[category].push(result);
+        return acc;
+    }, {});
+    /** Sort categories alphabetically */
+    const sortedCategories = Object.keys(groupedResults).sort((a, b) => a.localeCompare(b));
+    /** Sort items within each category alphabetically by fromName */
+    sortedCategories.forEach((category) => {
+        groupedResults[category].sort((a, b) => (a.fromName ?? '').localeCompare(b.fromName ?? ''));
+    });
+    useEffect(() => {
+        if (sortedCategories.length > 0 && activeCategories.length === 0) {
+            const firstCategory = sortedCategories[0];
+            setActiveCategories([firstCategory]);
+            if (groupedResults[firstCategory].length > 0) {
+                setSelectedResult(groupedResults[firstCategory][0]);
+                onSelectionChanged?.(groupedResults[firstCategory][0]);
+            }
+        }
+    }, [sortedCategories.length]);
+    const toggleCategory = useCallback((category) => {
+        setActiveCategories((prevActiveCategories) => prevActiveCategories.includes(category)
+            ? prevActiveCategories.filter((cat) => cat !== category)
+            : [...prevActiveCategories, category]);
+    }, []);
+    const handleSelect = (result) => {
+        if (selectedResult !== result) {
+            setSelectedResult(result);
+            onSelectionChanged?.(result);
+        }
+    };
+    const resultDcmtCounter = (category) => {
+        let dcmts = searchResults.filter(res => res?.category === category);
+        if (!dcmts)
+            return 0;
+        let counter = 0;
+        for (let dcmt of dcmts) {
+            counter += dcmt.dcmtsFound ?? 0;
+        }
+        return counter;
+    };
+    const renderGroupTemplate = (category) => {
+        const getHeaderIcon = (category) => {
+            switch (category) {
+                case "RecentArchive": return _jsx(IconArchive, { style: { flexShrink: 0 }, fontSize: 14, color: TMColors.primaryColor });
+                case "RecentView": return _jsx(IconShow, { style: { flexShrink: 0 }, color: TMColors.primaryColor });
+                case "WFAppr": return _jsx(IconActivityLog, { style: { flexShrink: 0 }, color: TMColors.primaryColor });
+                case "Favorites": return _jsx(IconStar, { style: { flexShrink: 0 }, color: TMColors.primaryColor });
+                case "FullText": return _jsx(IconFreeSearch, { style: { flexShrink: 0 }, color: TMColors.primaryColor });
+                default: return null;
+            }
+        };
+        const getHeaderTitle = (category) => {
+            switch (category) {
+                case "RecentArchive": return SDKUI_Localizator.RecentDocs_Archived;
+                case "RecentView": return SDKUI_Localizator.RecentDocs_Visualized;
+                case "WFAppr": return SDKUI_Localizator.WorkflowApproval;
+                case "Favorites": return SDKUI_Localizator.Favorites;
+                case "FullText": return 'Full text';
+                default: return category;
+            }
+        };
+        return _jsx(CustomListViewHeader, { titleColor: TMColors.primaryColor, firstCounter: _jsx(TMTooltip, { content: 'Numero di tipi documento', children: _jsx(StyledBadge, { style: { width: 'max-content' }, "$backgroundColor": TMColors.primaryColor, children: searchResults.length > 1 && searchResults?.filter(data => data.category === category).length }) }), secondCounter: _jsx(TMTooltip, { content: 'Numero di tutti documenti', children: _jsx(StyledBadge, { style: { width: 'max-content' }, "$backgroundColor": TMColors.tertiary, children: resultDcmtCounter(category) }) }), headerIcon: getHeaderIcon(category), headerTitle: getHeaderTitle(category) });
+    };
+    const renderItemTemplate = (data) => {
+        return (_jsxs("div", { style: { width: '100%', padding: '5px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }, children: [_jsx(TMTidViewer, { tid: data.fromTID, showIcon: true }), _jsx("div", { style: { padding: 3, display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: 'white', color: 'gray', borderRadius: 3 }, children: data.dcmtsReturned })] }));
+    };
+    return (_jsx("div", { style: { height: '100%', width: '100%', overflow: 'auto' }, children: sortedCategories.map((category) => (_jsxs("div", { children: [_jsxs(StyledGroupTemplate, { onClick: () => toggleCategory(category), children: [activeCategories.includes(category) ? _jsx(IconChevronDown, {}) : _jsx(IconChevronDown, { transform: 'scale(-1, 1)' }), renderGroupTemplate(category)] }, category), activeCategories.includes(category) && (_jsx("div", { style: { padding: '5px' }, children: groupedResults[category].map((result, index) => (_jsx(StyledItemTemplate, { "$isSelected": selectedResult === result, onClick: () => handleSelect(result), children: renderItemTemplate(result) }, index))) }))] }, category))) }));
+};