@topconsultnpm/sdkui-react 6.19.0-dev1.10

package/lib/components/grids/TMBlogsUtils.d.ts

@@ -0,0 +1,99 @@
+import React from 'react';
+import { BlogPost, BlogPostAttachment, DcmtTypeDescriptor, DossierDescriptor, HomeBlogPost, TID_DID, WorkingGroupDescriptor } from "@topconsultnpm/sdk-ts";
+import { DcmtInfo } from '../../ts';
+import { ContextMenuRef } from 'devextreme-react/cjs/context-menu';
+import { FileItem } from '../base/TMFileManagerUtils';
+export declare const DRAFT_TYPE_TID = 6;
+export type TMBlogContextDescriptor = {
+    engine: 'WorkingGroupEngine';
+    object?: WorkingGroupDescriptor;
+} | {
+    engine: 'SearchEngine';
+    object?: TID_DID;
+} | {
+    engine: 'DossierEngine';
+    object?: DossierDescriptor;
+};
+export declare const colors: {
+    DARK_BLUE: string;
+    WHITE: string;
+    BLACK: string;
+    RED: string;
+    LIGHT_GRAY: string;
+    PRIMARY_BLUE: string;
+    PRIMARY_ORANGE: string;
+    PRIMARY_GREEN: string;
+};
+export interface TMBlogContextMenuItem {
+    text: string;
+    icon: string;
+    onClick?: (param?: any) => void;
+    operationType?: 'singleRow' | 'multiRow';
+    disabled?: boolean;
+    id?: string;
+    items?: Array<TMBlogContextMenuItem>;
+    beginGroup?: boolean;
+    tooltip?: string;
+    visible?: boolean;
+}
+export declare enum TMBlogsFilterCategoryId {
+    PublishedBlogs = 1,
+    SystemBlogs = 2,
+    DeletedBlogs = 3
+}
+export interface BlogPostContainerProps {
+    $color?: string;
+    $textDecoration?: string;
+    $backgroundColor?: string;
+    $canNavigate?: boolean;
+    $paddingTop?: string;
+    $paddingRight?: string;
+    $paddingBottom?: string;
+    $paddingLeft?: string;
+}
+export declare const BlogPostContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, BlogPostContainerProps>> & string;
+export declare const getTooltipContent: (title: string | undefined, content: JSX.Element) => import("react/jsx-runtime").JSX.Element;
+export declare const highlightText: (text: string, searchText: string, isSelected: boolean) => string | (string | import("react/jsx-runtime").JSX.Element)[];
+export declare const lightenColor: (hex: string, amount: number) => string;
+export declare const removeFileExtension: (filename: string) => string;
+export declare const getAttachmentInfo: (attachment: BlogPostAttachment, treeFs: FileItem | undefined, draftLatestInfoMap: Map<number, {
+    latestVersion: number;
+    folderId: number;
+    folderName: string;
+    fileExt: string;
+    fileSize: string;
+}> | undefined, archivedDocumentMap: Map<number, {
+    tid: number;
+    did: number;
+    fileExt: string;
+    fileSize: string;
+}> | undefined, dcmtTypeDescriptors: Map<number, DcmtTypeDescriptor>, isSelected: boolean, searchText: string, color: string) => {
+    name: string;
+    nameElement: import("react/jsx-runtime").JSX.Element;
+    tooltipContent: import("react/jsx-runtime").JSX.Element;
+    folderId: number;
+    fileExt: string;
+    draftExist: boolean;
+    archivedDocumentsExist: boolean;
+};
+export declare const AttachmentElement: (attachment: BlogPostAttachment, treeFs: FileItem | undefined, draftLatestInfoMap: Map<number, {
+    latestVersion: number;
+    folderId: number;
+    folderName: string;
+    fileExt: string;
+    fileSize: string;
+}> | undefined, archivedDocumentMap: Map<number, {
+    tid: number;
+    did: number;
+    fileExt: string;
+    fileSize: string;
+}> | undefined, dcmtTypeDescriptors: Map<number, DcmtTypeDescriptor>, isSelected: boolean, searchText: string, color: string, setShowDcmtForm: React.Dispatch<React.SetStateAction<boolean>>, handleFocusedAttachment: (attachment: DcmtInfo | undefined) => void, setAnchorEl: (value: React.SetStateAction<HTMLElement | null>) => void, contextMenuRef: React.MutableRefObject<ContextMenuRef<any> | null>) => import("react/jsx-runtime").JSX.Element;
+export declare const OwnerInitialsBadge: (blogPost: BlogPost | HomeBlogPost) => import("react/jsx-runtime").JSX.Element;
+export declare const IconAndHeaderElement: (blogPost: BlogPost | HomeBlogPost, iconColor: string, isSelected: boolean, headerClickCallback: () => void, searchText: string) => import("react/jsx-runtime").JSX.Element;
+export declare const findFileItemByDraftID: (tree: FileItem | undefined, draftID: number | undefined) => FileItem | null;
+export declare const isHeaderFullyHidden: (header: {
+    showViewMode: boolean;
+    showFilters: boolean;
+    showSearchBar: boolean;
+    showPostsDropDown: boolean;
+} | undefined) => boolean;

package/lib/components/grids/TMBlogsUtils.js

@@ -0,0 +1,226 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import styled from "styled-components";
+import { SDK_Globals } from "@topconsultnpm/sdk-ts";
+import { extractInitialsFromName, formatBytes, getAvatarColor, IconAttachment, IconCADossier, IconMenuCAWorkingGroups, SDKUI_Localizator } from "../../helper";
+import TMTooltip from "../base/TMTooltip";
+import { TMColors } from '../../utils/theme';
+import TMDcmtIcon from '../features/documents/TMDcmtIcon';
+export const DRAFT_TYPE_TID = 6;
+export const colors = {
+    DARK_BLUE: "#1a0dab",
+    WHITE: "#fff",
+    BLACK: "#000000",
+    RED: '#ff0000',
+    LIGHT_GRAY: "#f9f9f9",
+    PRIMARY_BLUE: "#135596",
+    PRIMARY_ORANGE: "#e65b00",
+    PRIMARY_GREEN: "#009700"
+};
+export var TMBlogsFilterCategoryId;
+(function (TMBlogsFilterCategoryId) {
+    TMBlogsFilterCategoryId[TMBlogsFilterCategoryId["PublishedBlogs"] = 1] = "PublishedBlogs";
+    TMBlogsFilterCategoryId[TMBlogsFilterCategoryId["SystemBlogs"] = 2] = "SystemBlogs";
+    TMBlogsFilterCategoryId[TMBlogsFilterCategoryId["DeletedBlogs"] = 3] = "DeletedBlogs";
+})(TMBlogsFilterCategoryId || (TMBlogsFilterCategoryId = {}));
+export const BlogPostContainer = styled.div `
+    color: ${(props) => (props.$color ?? colors.BLACK)};
+    text-decoration: ${(props) => (props.$textDecoration ?? 'none')};
+    height: auto;
+    background-color: ${(props) => (props.$backgroundColor ?? colors.WHITE)};
+    display: inline-block;
+    width: 100%;
+    min-width: 100px;
+    max-width: 100%;
+    cursor: ${(props) => (props.$canNavigate ? "pointer" : "default")};
+    border-radius: 5px;
+    margin: 5px 0;
+    padding: ${(props) => `${props.$paddingTop ?? '10px'} ${props.$paddingRight ?? '10px'} ${props.$paddingBottom ?? '10px'} ${props.$paddingLeft ?? '10px'}`};
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+    word-wrap: break-word;
+    white-space: pre-wrap;
+    &:hover {
+        box-shadow: 0 4px 12px rgba(19, 85, 150, 0.6);
+        transition: 
+            box-shadow 0.3s ease,
+            transform 0.3s ease;
+    };
+    &:focus {
+        outline: none;
+    }
+`;
+export const getTooltipContent = (title, content) => {
+    return (_jsxs("div", { style: { textAlign: 'left' }, children: [_jsx("div", { style: { fontWeight: 'bold' }, children: title }), _jsx("hr", {}), content] }));
+};
+export const highlightText = (text, searchText, isSelected) => {
+    if (!searchText)
+        return text;
+    const regex = new RegExp(`(${searchText.trim()})`, 'gi');
+    return text.split(regex).map((part, index) => regex.test(part) ? (_jsx("span", { style: { backgroundColor: isSelected ? '#6c9023' : 'yellow' }, children: part }, index)) : (part));
+};
+export const lightenColor = (hex, amount) => {
+    let color = hex.replace('#', '');
+    // Expand shorthand like #123 to #112233
+    if (color.length === 3) {
+        color = color.split('').map(c => c + c).join('');
+    }
+    const num = parseInt(color, 16);
+    let r = (num >> 16) + amount;
+    let g = ((num >> 8) & 0x00FF) + amount;
+    let b = (num & 0x0000FF) + amount;
+    r = Math.min(255, Math.max(0, r));
+    g = Math.min(255, Math.max(0, g));
+    b = Math.min(255, Math.max(0, b));
+    return `#${(r << 16 | g << 8 | b).toString(16).padStart(6, '0')}`;
+};
+export const removeFileExtension = (filename) => {
+    return filename.includes('.') ? filename.substring(0, filename.lastIndexOf('.')) : filename;
+};
+export const getAttachmentInfo = (attachment, treeFs, draftLatestInfoMap, archivedDocumentMap, dcmtTypeDescriptors, isSelected, searchText, color) => {
+    let nameElement = (_jsx("span", { children: `${SDKUI_Localizator.DocumentNotAvailable} (DID: ${attachment.did})` }));
+    let folderId = -1;
+    let fileExt = '';
+    let draftExist = false;
+    let archivedDocumentsExist = false;
+    let name = '';
+    let tooltipContent = _jsx(_Fragment, {});
+    if (attachment.tid === DRAFT_TYPE_TID && treeFs) {
+        const draftfileItem = findFileItemByDraftID(treeFs, attachment.draftID);
+        if (draftfileItem) {
+            let latestVersion = true;
+            let pathName = '';
+            draftExist = true;
+            let fileSize = '0';
+            name = draftfileItem.name;
+            if (draftLatestInfoMap && attachment.draftID && attachment.version) {
+                const draftInfo = draftLatestInfoMap.get(attachment.draftID);
+                if (draftInfo) {
+                    folderId = draftInfo.folderId;
+                    latestVersion = draftInfo.latestVersion === attachment.version;
+                    pathName = draftInfo.folderName;
+                    fileExt = draftInfo.fileExt;
+                    fileSize = formatBytes(draftInfo.fileSize ? Number(draftInfo.fileSize) : 0);
+                }
+            }
+            const content = (_jsxs("div", { children: [_jsxs("div", { children: [_jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.Version }), ": ", attachment.version] }), draftLatestInfoMap && (_jsxs("div", { children: [_jsxs("div", { children: [_jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.LastVersion }), ": ", latestVersion ? SDKUI_Localizator.Yes : SDKUI_Localizator.No] }), _jsxs("div", { children: [_jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.Size }), ": ", fileSize] })] })), _jsx("hr", {}), _jsxs("div", { children: [_jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.Path }), ": \"", SDKUI_Localizator.Drafts, "\\", pathName.length > 0 ? (pathName + '\\') : '', name, "\""] })] }));
+            tooltipContent = getTooltipContent(draftfileItem.name, content);
+            nameElement = (_jsxs("span", { children: [highlightText(`${draftfileItem.name}`, searchText, isSelected), "\u00A0", attachment.version && _jsx("span", { style: {
+                            display: 'inline-flex',
+                            marginLeft: '5px',
+                            width: '20px',
+                            height: '20px',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            backgroundColor: isSelected ? '#fff' : (latestVersion ? '#28a745' : '#cc7000'),
+                            color: isSelected ? color : '#fff',
+                            boxShadow: '1px 1px 2px #00000020',
+                            borderRadius: '30px',
+                            fontWeight: 'bold',
+                        }, children: _jsx(TMTooltip, { content: SDKUI_Localizator.Version, children: attachment.version }) })] }));
+        }
+    }
+    else if (attachment.tid) {
+        const descriptor = dcmtTypeDescriptors.get(attachment.tid);
+        let fileSize = '0';
+        if (archivedDocumentMap && attachment.did) {
+            const archivedDocumentInfo = archivedDocumentMap.get(attachment.did);
+            if (archivedDocumentInfo) {
+                archivedDocumentsExist = true;
+                fileExt = archivedDocumentInfo.fileExt;
+                fileSize = formatBytes(archivedDocumentInfo.fileSize ? Number(archivedDocumentInfo.fileSize) : 0);
+            }
+        }
+        if (descriptor) {
+            name = descriptor.name ?? "-";
+            const content = (_jsxs("div", { children: [archivedDocumentMap && (_jsxs("div", { children: [_jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.Size }), ": ", fileSize] })), _jsx("hr", {}), _jsxs("div", { children: [_jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.Path }), ": \"", SDKUI_Localizator.ArchivedDocuments, "\\", `${descriptor.name} (DID: ${attachment.did})`, "\""] })] }));
+            tooltipContent = getTooltipContent(descriptor.name, content);
+            nameElement = (_jsx("span", { children: highlightText(`${name} (DID: ${attachment.did})`, searchText, isSelected) }));
+        }
+    }
+    return { name, nameElement, tooltipContent, folderId, fileExt, draftExist, archivedDocumentsExist };
+};
+export const AttachmentElement = (attachment, treeFs, draftLatestInfoMap, archivedDocumentMap, dcmtTypeDescriptors, isSelected, searchText, color, setShowDcmtForm, handleFocusedAttachment, setAnchorEl, contextMenuRef) => {
+    const { name, nameElement, tooltipContent, folderId, fileExt, draftExist } = getAttachmentInfo(attachment, treeFs, draftLatestInfoMap, archivedDocumentMap, dcmtTypeDescriptors, isSelected, searchText, color);
+    const onDoubleClick = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        const archiveID = SDK_Globals.tmSession?.SessionDescr?.archiveID;
+        const fileName = `${removeFileExtension(name)}_${archiveID}_${attachment.tid}_${attachment.did}.${fileExt}`;
+        handleFocusedAttachment({ TID: attachment.tid, DID: attachment.did, fileName });
+        setShowDcmtForm(true);
+    };
+    const onContextMenu = (e) => {
+        const archiveID = SDK_Globals.tmSession?.SessionDescr?.archiveID;
+        const fileName = `${removeFileExtension(name)}_${archiveID}_${attachment.tid}_${attachment.did}.${fileExt}`;
+        handleFocusedAttachment({ TID: attachment.tid, DID: attachment.did, fileName });
+        setAnchorEl(e.currentTarget);
+        e.preventDefault();
+        e.stopPropagation();
+        // Slight delay to ensure state update before showing context menu
+        setTimeout(() => {
+            contextMenuRef.current?.instance()?.show();
+        }, 0);
+    };
+    return _jsx("div", { onDoubleClick: onDoubleClick, onContextMenu: onContextMenu, style: {
+            display: 'inline-flex',
+            padding: '4px 8px',
+            margin: '4px',
+            border: '1px solid #ddd',
+            borderRadius: '8px',
+            boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
+            backgroundColor: isSelected ? color : colors.WHITE,
+            cursor: "pointer",
+            fontSize: '0.9rem'
+        }, onMouseEnter: (e) => {
+            e.currentTarget.style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.15)';
+            e.currentTarget.style.backgroundColor = isSelected ? lightenColor(color, 40) : '#cfcfcf';
+        }, onMouseLeave: (e) => {
+            e.currentTarget.style.boxShadow = '0 2px 4px rgba(0, 0, 0, 0.1)';
+            e.currentTarget.style.backgroundColor = isSelected ? color : colors.WHITE;
+        }, children: _jsxs("div", { style: { alignItems: 'center', display: 'flex' }, children: [fileExt ? _jsx("div", { style: { marginRight: "10px" }, children: _jsx(TMDcmtIcon, { tid: attachment.tid, did: attachment.did, fileExtension: fileExt, downloadMode: 'openInNewWindow', tooltipContent: tooltipContent }) }) : _jsx(IconAttachment, { style: { marginRight: "5px" } }), _jsx("span", { children: nameElement })] }) }, attachment.did);
+};
+export const OwnerInitialsBadge = (blogPost) => {
+    return _jsx(TMTooltip, { content: blogPost.ownerName ?? '-', children: _jsx("div", { style: {
+                width: "40px",
+                height: "40px",
+                borderRadius: "50%",
+                backgroundColor: getAvatarColor(blogPost.ownerName ?? '-'),
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                marginRight: "10px",
+                fontWeight: "bold",
+                color: colors.WHITE,
+                fontSize: "18px",
+            }, children: _jsx("span", { style: { fontSize: "12px" }, children: extractInitialsFromName(blogPost.ownerName ?? '-') }) }) });
+};
+export const IconAndHeaderElement = (blogPost, iconColor, isSelected, headerClickCallback, searchText) => {
+    return _jsxs("span", { style: { marginLeft: "5px", cursor: blogPost.classID === 'WG' ? "pointer" : "default", display: "inline-flex", alignItems: "center" }, onClick: headerClickCallback, children: [_jsx(TMTooltip, { content: blogPost.classID === 'DS' ? SDKUI_Localizator.Practice : SDKUI_Localizator.WorkGroup, children: blogPost.classID === "DS" ? (_jsx(IconCADossier, { color: iconColor, fontSize: 28 })) : (_jsx(IconMenuCAWorkingGroups, { color: iconColor, fontSize: 28 })) }), _jsx("span", { style: {
+                    marginLeft: "5px",
+                    // textDecoration: (blogPost as HomeBlogPost).classID === "WG" ? "underline" : "none",
+                    cursor: blogPost.classID === "WG" ? "pointer" : "default",
+                    color: isSelected ? "#fff" : TMColors.primary,
+                    display: "inline-block" // Ensure both elements are in a row
+                }, onClick: headerClickCallback, children: highlightText(blogPost.header ?? '', searchText, isSelected) })] });
+};
+export const findFileItemByDraftID = (tree, draftID) => {
+    if (tree === undefined || draftID === undefined)
+        return null;
+    if (tree.id === draftID) {
+        return tree;
+    }
+    if (tree.items && tree.items.length > 0) {
+        for (const item of tree.items) {
+            const found = findFileItemByDraftID(item, draftID);
+            if (found) {
+                return found;
+            }
+        }
+    }
+    return null;
+};
+export const isHeaderFullyHidden = (header) => {
+    if (!header) {
+        return true;
+    }
+    return !header.showViewMode && !header.showFilters && !header.showSearchBar && !header.showPostsDropDown;
+};

package/lib/components/grids/TMRecentsManager.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { AccessFilter } from '@topconsultnpm/sdk-ts';
+import { DeviceType } from '../base/TMDeviceProvider';
+interface ITMRecentsProps {
+    mruTIDs: number[];
+    currentMruTID?: number;
+    deviceType?: DeviceType;
+    accessFilter?: AccessFilter;
+    onSelectedTID?: (tid: number) => void;
+    onDeletedTID?: (tid: number) => void;
+}
+declare const TMRecentsManager: React.FunctionComponent<ITMRecentsProps>;
+export default TMRecentsManager;

package/lib/components/grids/TMRecentsManager.js

@@ -0,0 +1,155 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import styled from 'styled-components';
+import { useCallback, useEffect, useState } from 'react';
+import ReactDOMServer from 'react-dom/server';
+import { DcmtTypeListCacheService } from '@topconsultnpm/sdk-ts';
+import ContextMenu from 'devextreme-react/cjs/context-menu';
+import { IconDelete, SDKUI_Localizator, IconApply, IconInfo, IconCloseOutline } from '../../helper';
+import { TMColors } from '../../utils/theme';
+import { DeviceType } from '../base/TMDeviceProvider';
+import { TMDcmtTypeChooserForm } from '../choosers/TMDcmtTypeChooser';
+import TMTidViewer, { renderDTDTooltipContent, TMDcmtTypeTooltip } from '../viewers/TMTidViewer';
+import { StyledDivHorizontal, StyledOffCanvasPanel } from '../base/Styled';
+import { useOutsideClick } from '../../hooks/useOutsideClick';
+const StyledRecentTidItem = styled.div `
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    min-width: 0;
+    padding: 10px;
+    position: relative;
+    gap: 0;
+
+    &:hover {
+        cursor: pointer;
+        background: linear-gradient(
+            270deg,
+            rgba(70, 181, 162, 0.15) 16%,
+            rgba(59, 170, 188, 0.15) 34%,
+            rgba(59, 170, 188, 0.15) 34%,
+            rgba(54, 129, 173, 0.15) 54%,
+            rgba(51, 104, 165, 0.15) 72%,
+            rgba(47, 84, 157, 0.15) 88%,
+            rgba(48, 79, 153, 0.15) 100%
+        );
+    }
+
+    .info-icon {
+        opacity: 0;
+        pointer-events: none;
+        transition: opacity 0.2s;
+        ${({ $isMobile }) => $isMobile && `
+            display: none !important;
+        `}
+    }
+
+    &:hover .info-icon {
+        opacity: 1;
+        pointer-events: auto;
+    }
+
+    &::after {
+        content: '';
+        display: block;
+        width: 90%;
+        margin: 0 auto;
+        border-bottom: 1px solid #00A99D;
+        margin-top: 8px;
+    }
+
+    &:last-child {
+        border-bottom: none;
+        margin-bottom: 0;
+    }
+`;
+const iconDelete = () => ReactDOMServer.renderToString(_jsx(IconDelete, {}));
+const TMRecentsManager = ({ deviceType, mruTIDs, currentMruTID, accessFilter = 'all', onSelectedTID, onDeletedTID }) => {
+    const [showDcmtTypeChooser, setShowDcmtTypeChooser] = useState(false);
+    const [recentDcmtTypes, setRecentDcmtTypes] = useState([]);
+    const [infoDTD, setInfoDTD] = useState();
+    // Handler for the cache refresh event
+    const handleCacheRefresh = useCallback(async () => {
+        // Retrieve all document types without metadata from the refreshed cache
+        const allDcmtTypes = await DcmtTypeListCacheService.GetAllWithoutMetadataAsync();
+        const allDcmtTypeIds = new Set(allDcmtTypes.map(type => type.id));
+        // Filter the mruTIDs to only keep those that still exist in the cache
+        const stillPresentTIDs = mruTIDs.filter(tid => allDcmtTypeIds.has(tid));
+        // Identifica i TIDs che non sono più presenti e notifica il componente padre.
+        const deletedTIDs = mruTIDs.filter(tid => !allDcmtTypeIds.has(tid));
+        deletedTIDs.forEach(deletedTid => {
+            onDeletedTID?.(deletedTid);
+        });
+        // Get the descriptors for the filtered TIDs and sort them
+        const filteredDescriptors = stillPresentTIDs
+            .map(tid => allDcmtTypes.find(dt => dt.id === tid))
+            .filter(Boolean);
+        filteredDescriptors.sort((a, b) => {
+            const idA = a.id ?? 0;
+            const idB = b.id ?? 0;
+            return mruTIDs.indexOf(idB) - mruTIDs.indexOf(idA);
+        });
+        // Update the state
+        setRecentDcmtTypes(filteredDescriptors);
+    }, [mruTIDs, onDeletedTID]);
+    useEffect(() => {
+        // Initial data fetch
+        handleCacheRefresh();
+        // Subscribe to the cache refresh event
+        DcmtTypeListCacheService.onCacheRefreshed = handleCacheRefresh;
+        // Cleanup function to unsubscribe from the event
+        return () => {
+            DcmtTypeListCacheService.onCacheRefreshed = undefined;
+        };
+    }, [handleCacheRefresh]); // Dependency array for useEffect
+    const panelRef = useOutsideClick(() => {
+        setInfoDTD(undefined);
+    });
+    const isMobile = deviceType === DeviceType.MOBILE;
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { style: { overflowY: isMobile ? 'auto' : undefined, display: 'flex', flexDirection: 'column', padding: '5px', width: '100%' }, children: [_jsx(StyledRecentTidItem, { id: `tid-${0}`, "$isMobile": isMobile, onClick: () => { setShowDcmtTypeChooser(true); }, children: _jsx("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', width: '100%' }, children: _jsx("p", { style: {
+                                    color: TMColors.primaryColor,
+                                    fontSize: '1rem',
+                                    fontWeight: 600,
+                                    whiteSpace: 'nowrap',
+                                    overflow: 'hidden',
+                                    textOverflow: 'ellipsis'
+                                }, children: `${SDKUI_Localizator.AllDcmtTypes} (${DcmtTypeListCacheService.CacheCount(true, accessFilter)})` }) }) }, 0), recentDcmtTypes.map((dtd) => {
+                        const isCurrent = currentMruTID == dtd.id;
+                        return (_jsxs(StyledRecentTidItem, { id: `tid-${dtd.id}`, "$isMobile": isMobile, onClick: () => { onSelectedTID?.(dtd.id ?? 0); }, children: [_jsxs(StyledDivHorizontal, { style: { alignItems: 'center', gap: 8, width: '100%' }, children: [!isMobile && (_jsx("span", { className: "info-icon", style: {
+                                                marginRight: 4,
+                                                display: 'flex',
+                                                alignItems: 'center'
+                                            }, children: _jsx(TMDcmtTypeTooltip, { dtd: dtd, children: _jsx(IconInfo, { color: TMColors.info }) }) })), _jsx("div", { style: {
+                                                flex: 1,
+                                                display: 'flex',
+                                                alignItems: 'center',
+                                                justifyContent: 'center',
+                                                minWidth: 0
+                                            }, children: _jsx(TMTidViewer, { tid: dtd.id, color: TMColors.primaryColor, showIcon: false }) }), _jsx("span", { style: {
+                                                width: 24,
+                                                height: 24,
+                                                borderRadius: 24,
+                                                display: 'flex',
+                                                alignItems: 'center',
+                                                justifyContent: 'center',
+                                                fontSize: '1rem',
+                                                fontWeight: 'bold',
+                                                marginLeft: 8,
+                                                visibility: isCurrent ? 'visible' : 'hidden'
+                                            }, children: _jsx(IconApply, { fontSize: 24, color: 'green' }) })] }), _jsx(ContextMenu, { dataSource: [
+                                        {
+                                            text: SDKUI_Localizator.Remove,
+                                            icon: iconDelete(),
+                                            onClick: () => { onDeletedTID?.(dtd.id ?? 0); }
+                                        },
+                                        ...(isMobile ? [
+                                            {
+                                                text: SDKUI_Localizator.About,
+                                                icon: ReactDOMServer.renderToString(_jsx(IconInfo, { color: TMColors.info })),
+                                                onClick: () => { setInfoDTD(dtd); }
+                                            }
+                                        ] : [])
+                                    ], target: `#tid-${dtd.id}` })] }, dtd.id));
+                    })] }), showDcmtTypeChooser &&
+                _jsx(TMDcmtTypeChooserForm, { accessFilter: accessFilter, onClose: () => setShowDcmtTypeChooser(false), onChoose: (tids) => { onSelectedTID?.(tids?.[0] ?? 0); } }), _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)] })] }));
+};
+export default TMRecentsManager;

package/lib/components/grids/TMValidationItemsList.d.ts

@@ -0,0 +1,6 @@
+import { ValidationItem } from '@topconsultnpm/sdk-ts';
+interface ITMValidationItemsList {
+    validationItems?: ValidationItem[];
+}
+declare const TMValidationItemsList: ({ validationItems }: ITMValidationItemsList) => import("react/jsx-runtime").JSX.Element;
+export default TMValidationItemsList;

package/lib/components/grids/TMValidationItemsList.js

@@ -0,0 +1,82 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import styled from 'styled-components';
+import { TMColors } from '../../utils/theme';
+import { IconCloseCircle, IconWarning } from '../../helper';
+const StyledValidationItemsTabs = styled.div `
+    position: sticky;
+    top: 0px;
+    height: 25px;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    border-bottom: 1px solid $primary;
+    width: 100%;
+    user-select: none;
+    background-color: ${TMColors.primary};
+    z-index: 20;
+    border-top: 1px solid #122C4C;
+`;
+const StyledValidationTypeTab = styled.div `
+    padding: 10px;
+    color: ${(props) => props.$isSelected ? 'white' : 'rgb(182, 182, 182)'};
+    font-size: 1rem;
+    cursor: pointer;
+    ${(props) => props.$isSelected ? 'border-bottom: 1px white solid;' : ''};
+`;
+const StyledMessageContainer = styled.div `
+    padding: 2px;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    color: $primary;
+    font-size: 1rem;
+    width: 100%;
+    border-bottom: 1px solid rgb(190, 190, 190);
+`;
+const StyledMessageIcon = styled.div `
+    transform: translateY(1.5px);
+    margin-right: 5px;
+    z-index: 5;
+`;
+const StyledMessageResultType = styled.div `
+    width: 50px;
+    user-select: none;
+    margin-right: 20px;
+`;
+const StyledMessageElement = styled.div `
+    width: 150px;
+    text-align: left;
+    user-select: none;
+    margin-right: 20px;
+`;
+const StyledMessageText = styled.div `
+    transform: translateY(1.5px);
+    margin-right: 5px;
+    z-index: 5;
+    margin-right: 20px;
+`;
+const TMValidationItemsList = ({ validationItems = [] }) => {
+    const [selectedTab, setSelectedTab] = useState(0);
+    const [currentValidationItems, setCurrentValidationItems] = useState(validationItems);
+    useEffect(() => {
+        setCurrentValidationItems(validationItems);
+    }, [validationItems]);
+    useEffect(() => {
+        if (selectedTab === 0) {
+            setCurrentValidationItems(validationItems);
+        }
+        if (selectedTab === 1) {
+            setCurrentValidationItems(validationItems.filter(item => item.ResultType !== 'Warning'));
+        }
+        if (selectedTab === 2) {
+            setCurrentValidationItems(validationItems.filter(item => item.ResultType !== 'Error'));
+        }
+    }, [selectedTab]);
+    return (_jsxs("div", { style: { padding: "0px 1px" }, children: [_jsxs(StyledValidationItemsTabs, { children: [_jsx(StyledValidationTypeTab, { onClick: () => setSelectedTab(0), "$isSelected": selectedTab === 0, children: "All" }), _jsx(StyledValidationTypeTab, { onClick: () => setSelectedTab(1), "$isSelected": selectedTab === 1, children: "Errors" }), _jsx(StyledValidationTypeTab, { onClick: () => setSelectedTab(2), "$isSelected": selectedTab === 2, children: "Warnings" })] }), _jsx("div", { style: { padding: '0' }, children: currentValidationItems.map((item, index) => _jsxs(StyledMessageContainer, { children: [_jsx(StyledMessageIcon, { children: item.ResultType === 'Warning' ? _jsx(IconWarning, { color: 'orange', fontSize: 16 }) : _jsx(IconCloseCircle, { color: 'red', fontSize: 16 }) }), _jsx(StyledMessageResultType, { children: item.ResultType }), _jsx(StyledMessageElement, { children: item.PropertyName }), _jsx(StyledMessageText, { children: item.Message })] }, index)
+                // <Message key={index} propertyName={item.PropertyName} message={item.Message} resultType={item.ResultType} theme={currentTheme} />
+                ) })] }));
+};
+export default TMValidationItemsList;