@topconsultnpm/sdkui-react 6.20.0-dev1.12 → 6.20.0-dev1.120

package/lib/components/forms/TMChooserForm.js

@@ -88,7 +88,7 @@ const TMChooserForm = ({ children, title, allowMultipleSelection = false, allowA
     }, [manageUseLocalizedName, summaryItems]);
     return (_jsx(TMModal, { title: renderTitle(), width: width ?? '550px', height: height ?? '600px', toolbar: _jsx(ToolbarButtons, {}), onClose: onClose, children: children ??
             filteredItems.length > 0
-            ? _jsx(TMDataGrid, { dataSource: filteredItems, keyExpr: keyName, dataColumns: dataColumns, focusedRowKey: focusedRowKey, selectedRowKeys: selectedRowKeys, searchPanelFocusStarting: true, headerFilter: { visible: true }, selection: { mode: allowMultipleSelection ? 'multiple' : 'single', showCheckBoxesMode: 'always', selectAllMode: 'allPages' }, grouping: allowGrouping ? { autoExpandAll: false, expandMode: 'rowClick' } : undefined, summary: customSummary, showFilterPanel: showFilterPanel, onFocusedRowChanged: handleFocusedRowChange, onSelectionChanged: handleSelectionChanged, onRowDblClick: handleRowDoubleClick })
+            ? _jsx(TMDataGrid, { dataSource: filteredItems, keyExpr: keyName, dataColumns: dataColumns, focusedRowKey: focusedRowKey, selectedRowKeys: selectedRowKeys, searchPanelFocusTrigger: 1, headerFilter: { visible: true }, selection: { mode: allowMultipleSelection ? 'multiple' : 'single', showCheckBoxesMode: 'always', selectAllMode: 'allPages' }, grouping: allowGrouping ? { autoExpandAll: false, expandMode: 'rowClick' } : undefined, summary: customSummary, showFilterPanel: showFilterPanel, onFocusedRowChanged: handleFocusedRowChange, onSelectionChanged: handleSelectionChanged, onRowDblClick: handleRowDoubleClick })
             : _jsx(TMLayoutContainer, { gap: 30, alignItems: 'center', justifyContent: 'center', children: _jsx(TMLayoutItem, { children: _jsx("p", { style: { height: "100%", color: TMColors.primaryColor, fontSize: "1.5rem", display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: SDKUI_Localizator.NoDataToDisplay }) }) }) }));
 };
 export default TMChooserForm;

package/lib/components/grids/TMBlogsPost.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useCallback, useEffect, useRef, useState } from "react";
-import { DossierEngine, LayoutModes, ResultTypes, SDK_Globals, TaskDescriptor, WorkingGroupEngine } from "@topconsultnpm/sdk-ts";
-import { ContextMenu } from "devextreme-react";
-import { SDKUI_Localizator, Globalization, getExceptionMessage, TMConditionalWrapper, calcResponsiveSizes } from "../../helper";
+import { DossierEngine, LayoutModes, ObjectClasses, ResultTypes, SDK_Globals, TaskDescriptor, WorkingGroupEngine } from "@topconsultnpm/sdk-ts";
+import { ContextMenu as TMContextMenu } from "../NewComponents/ContextMenu";
+import { SDKUI_Localizator, Globalization, getExceptionMessage, TMConditionalWrapper, calcResponsiveSizes, getMoreInfoTasksForDocument } from "../../helper";
 import TMToppyMessage from "../../helper/TMToppyMessage";
 import { useDcmtOperations } from "../../hooks/useDcmtOperations";
 import { DownloadTypes, FormModes } from "../../ts";
@@ -68,7 +68,8 @@ const TMBlogsPost = (props) => {
     const [showTaskForm, setShowTaskForm] = useState(false);
     // State to manage show selected file
     const [dcmtForm, setDcmtForm] = useState({ show: false, dcmt: undefined });
-    const [anchorEl, setAnchorEl] = useState(null);
+    const [menuVisible, setMenuVisible] = useState(false);
+    const [menuPosition, setMenuPosition] = useState({ x: 0, y: 0 });
     const [menuItems, setMenuItems] = useState([]);
     const [localShowWaitPanel, setLocalShowWaitPanel] = useState(false);
     const [localWaitPanelTitle, setLocalWaitPanelTitle] = useState('');
@@ -500,8 +501,8 @@ const TMBlogsPost = (props) => {
         const classId = targetItem ? targetItem.classID : undefined;
         if (contextMenuParams.isDownloadAttachmentEnabled && focusedAttachment !== undefined) {
             menuItems.push({
-                icon: "download",
-                text: 'Download',
+                icon: _jsx("span", { className: "dx-icon-download" }),
+                name: 'Download',
                 onClick: async () => {
                     await downloadDcmtsAsync([
                         { TID: focusedAttachment.TID, DID: focusedAttachment.DID, fileName: focusedAttachment.fileName }
@@ -511,26 +512,26 @@ const TMBlogsPost = (props) => {
         }
         if (contextMenuParams.isViewEditMetadata && focusedAttachment !== undefined) {
             menuItems.push({
-                icon: 'eyeopen',
-                text: SDKUI_Localizator.OpenForm,
+                icon: _jsx("span", { className: "dx-icon-eyeopen" }),
+                name: SDKUI_Localizator.OpenForm,
                 onClick: () => openDcmtForm(focusedAttachment),
             });
         }
         if (contextMenuParams.isCommentEnabled && showCommentFormCallback !== undefined) {
             menuItems.push({
-                icon: 'chat',
-                text: SDKUI_Localizator.Comment,
+                icon: _jsx("span", { className: "dx-icon-chat" }),
+                name: SDKUI_Localizator.Comment,
                 disabled: isGroupArchived ? true : false,
                 onClick: () => {
                     showCommentFormCallback(focusedAttachment);
                 },
-                beginGroup: true
+                beginGroup: menuItems.length > 0
             });
         }
         if (targetItem && contextMenuParams.isDeleteEnabled) {
             menuItems.push({
-                icon: "trash",
-                text: SDKUI_Localizator.Delete,
+                icon: _jsx("span", { className: "dx-icon-trash" }),
+                name: SDKUI_Localizator.Delete,
                 visible: contextMenuParams.isDeleteEnabled,
                 onClick: () => deleteOrUndeleteCommentCallback(targetItem, true),
                 disabled: isNotOwner || isDeleted || isGroupArchived,
@@ -538,24 +539,24 @@ const TMBlogsPost = (props) => {
         }
         if (targetItem && contextMenuParams.isRestoreEnabled) {
             menuItems.push({
-                icon: "undo",
-                text: SDKUI_Localizator.Restore,
+                icon: _jsx("span", { className: "dx-icon-undo" }),
+                name: SDKUI_Localizator.Restore,
                 onClick: () => deleteOrUndeleteCommentCallback(targetItem, false),
                 disabled: isNotOwner || (targetItem && (targetItem.isDel === undefined || targetItem.isDel === 0)),
             });
         }
         if (targetItem && contextMenuParams.isCopyToClipboardEnabled) {
             menuItems.push({
-                text: SDKUI_Localizator.CopyToClipboard,
-                icon: 'copy',
+                name: SDKUI_Localizator.CopyToClipboard,
+                icon: _jsx("span", { className: "dx-icon-copy" }),
                 disabled: false,
                 onClick: () => { copyInClipboard(targetItem); }
             });
         }
         if (contextMenuParams.isCreateContextualTask) {
             menuItems.push({
-                text: SDKUI_Localizator.CreateContextualTask,
-                icon: 'plus',
+                name: SDKUI_Localizator.CreateContextualTask,
+                icon: _jsx("span", { className: "dx-icon-plus" }),
                 onClick: () => openTaskFormCallback(targetItem),
                 disabled: isGroupArchived ? true : false,
                 beginGroup: true
@@ -563,15 +564,15 @@ const TMBlogsPost = (props) => {
         }
         if (targetItem && Boolean(classId && (classId === 'WG' || classId === 'DS'))) {
             menuItems.push({
-                icon: "eyeclose",
-                text: SDKUI_Localizator.Unfollow,
+                icon: _jsx("span", { className: "dx-icon-eyeclose" }),
+                name: SDKUI_Localizator.Unfollow,
                 onClick: () => (targetItem && classId) && unFollowCallback(targetItem, classId),
             });
         }
         if (contextMenuParams.isShowHideFilterEnabled) {
             menuItems.push({
-                icon: isHeaderHidden ? 'eyeopen' : 'eyeclose',
-                text: isHeaderHidden ? SDKUI_Localizator.ShowFilters : SDKUI_Localizator.HideFilters,
+                icon: _jsx("span", { className: isHeaderHidden ? "dx-icon-eyeopen" : "dx-icon-eyeclose" }),
+                name: isHeaderHidden ? SDKUI_Localizator.ShowFilters : SDKUI_Localizator.HideFilters,
                 onClick: toggleHeaderClick,
                 disabled: false,
                 beginGroup: true
@@ -579,23 +580,24 @@ const TMBlogsPost = (props) => {
         }
         if (contextMenuParams.isShowHideIDEnaled) {
             menuItems.push({
-                icon: localShowId ? 'eyeclose' : 'eyeopen',
+                icon: _jsx("span", { className: localShowId ? "dx-icon-eyeclose" : "dx-icon-eyeopen" }),
                 onClick: () => setLocalShowId(prevShowId => !prevShowId),
-                text: localShowId ? SDKUI_Localizator.ID_Hide : SDKUI_Localizator.ID_Show,
+                name: localShowId ? SDKUI_Localizator.ID_Hide : SDKUI_Localizator.ID_Show,
                 disabled: false,
             });
         }
         if (contextMenuParams.isRefreshEnabled && refreshCallback !== undefined) {
             menuItems.push({
-                icon: "refresh",
-                text: SDKUI_Localizator.Refresh,
+                icon: _jsx("span", { className: "dx-icon-refresh" }),
+                name: SDKUI_Localizator.Refresh,
                 onClick: refresh,
                 disabled: false,
             });
         }
         if (menuItems.length > 0) {
-            setAnchorEl(event.currentTarget);
+            setMenuPosition({ x: event.clientX, y: event.clientY });
             setMenuItems(menuItems);
+            setMenuVisible(true);
         }
     };
     const handlePostsToShowChange = (value) => {
@@ -606,12 +608,31 @@ const TMBlogsPost = (props) => {
         setSearchText(value);
     };
     const closeContextMenu = useCallback(() => {
-        setAnchorEl(null);
+        setMenuVisible(false);
     }, []);
+    const handleNavigateToReference = (ref) => {
+        switch (ref.objClass) {
+            case ObjectClasses.Dossier:
+                if (ref.objID)
+                    handleNavigateToDossiers?.(ref.objID);
+                else
+                    console.log("Dossier reference missing objID");
+                break;
+            case ObjectClasses.WorkingGroup:
+                if (ref.objID)
+                    handleNavigateToWGs?.(ref.objID);
+                else
+                    console.log("Working Group reference missing objID");
+                break;
+            // Handle other object types as needed
+            default:
+                console.warn(`Unhandled object type: ${ref.objClass}`);
+        }
+    };
     return _jsx("div", { ref: containerRef, style: { height: height, width: width }, children: _jsx(TMLayoutWaitingContainer, { direction: 'vertical', showWaitPanel: showWaitPanel, showWaitPanelPrimary: showPrimary, showWaitPanelSecondary: showSecondary, waitPanelTitle: waitPanelTitle, waitPanelTextPrimary: waitPanelTextPrimary, waitPanelValuePrimary: waitPanelValuePrimary, waitPanelMaxValuePrimary: waitPanelMaxValuePrimary, waitPanelTextSecondary: waitPanelTextSecondary, waitPanelValueSecondary: waitPanelValueSecondary, waitPanelMaxValueSecondary: waitPanelMaxValueSecondary, isCancelable: true, abortController: abortController, children: _jsxs(TMLayoutWaitingContainer, { direction: 'vertical', showWaitPanel: localShowWaitPanel, showWaitPanelPrimary: localShowPrimary, waitPanelTitle: localWaitPanelTitle, waitPanelTextPrimary: localWaitPanelTextPrimary, waitPanelValuePrimary: localWaitPanelValuePrimary, waitPanelMaxValuePrimary: localWaitPanelMaxValuePrimary, isCancelable: true, abortController: localAbortController, children: [_jsx(TMBlogHeader, { isVisible: currentHeader !== undefined && !isHeaderHidden, layoutMode: layoutMode, height: layoutMode === 'extended' ? "40px" : "70px", width: "100%", allPosts: posts, postsToShow: postsToShow, onPostsToShowChange: handlePostsToShowChange, categoryIdDataSource: categoryIdDataSource, appliedCategoryIdFilters: appliedCategoryIdFilters, setAppliedCategoryIdFilters: setAppliedCategoryIdFilters, searchText: searchText, onSearchChange: handleSearchChange }), _jsxs("div", { style: {
                             width: "100%",
                             height: currentHeader !== undefined && !isHeaderHidden ? `calc(100% - ${layoutMode === 'extended' ? "40px" : "70px"})` : "100%",
-                        }, children: [blogPosts.length === 0 && _jsx(TMToppyMessage, { message: searchText.length > 0 ? SDKUI_Localizator.NoMessagesFound : SDKUI_Localizator.NoMessages }), blogPosts.length > 0 && _jsxs("div", { tabIndex: 0, onKeyDown: handleKeyDown, onContextMenu: onContextMenu, style: {
+                        }, children: [blogPosts.length === 0 && _jsx(TMToppyMessage, { message: searchText.length > 0 ? SDKUI_Localizator.NoMessagesFound : SDKUI_Localizator.NoMessages }), blogPosts.length > 0 && _jsxs("div", { id: `${id}-blogs-container`, tabIndex: 0, onKeyDown: handleKeyDown, onContextMenu: onContextMenu, style: {
                                     height: '100%',
                                     width: '100%',
                                     outline: "none",
@@ -659,7 +680,11 @@ const TMBlogsPost = (props) => {
                                                             boxShadow: isFocused ? "0 4px 12px rgba(19, 85, 150, 0.6)" : "none",
                                                             cursor: 'pointer',
                                                         }, children: [_jsx(BlogPostTitle, { displayMode: displayMode, layoutMode: layoutMode, blogPost: blogPost, isSelected: isSelected, isOwnComment: isOwnComment, searchText: searchText, isSys: isSys, isHomeBlogPost: isHomeBlogPost, showId: localShowId, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers }), isNew && _jsx(NewBadge, { layoutMode: layoutMode }), _jsx("div", { style: { fontSize: '1rem', color: "#000", marginTop: "10px", overflow: "hidden" }, children: _jsx(TMHtmlContentDisplay, { markup: blogPost.description ?? '-', searchText: searchText, isSelected: isSelected }) }), showExtendedAttachments && blogPost.attachments && blogPost.attachments.length > 0 && (_jsx(TMBlogAttachments, { attachments: blogPost.attachments, layoutMode: layoutMode, isSelected: isSelected, searchText: searchText, dcmtTypeDescriptors: dcmtTypeDescriptors, treeFs: treeFs, draftLatestInfoMap: draftLatestInfoMap, archivedDocumentMap: archivedDocumentMap, handleAttachmentFocus: handleFocusedAttachment, openDcmtForm: openDcmtForm }))] }, `${id}-blogpost-${blogPost.id}`) })] }, "blog-post-wrapper-" + id + "-" + blogPost.id);
-                                    }), _jsx("div", { ref: bottomRef }), anchorEl && _jsx("div", { style: { position: 'fixed', zIndex: 9999 }, children: _jsx(ContextMenu, { dataSource: menuItems, target: anchorEl, onHiding: closeContextMenu }) })] }), (showTaskForm && handleNavigateToWGs && handleNavigateToDossiers && getAllTasks && deleteTaskByIdsCallback && addTaskCallback && editTaskCallback) && _jsx("div", { style: { height: "100%", width: "100%" }, children: _jsx(TMTaskForm, { id: -1, title: SDKUI_Localizator.ContextualTask, isModal: true, width: calcResponsiveSizes(deviceType, '700px', '700px', '95%'), height: calcResponsiveSizes(deviceType, '670px', '80%', '95%'), formMode: FormModes.Create, visualizedTasks: [], currentTask: currentTask, setCurrentTask: () => { }, selectedRowKeys: [], handleFocusedRowKeyChange: () => { }, onStatusChanged: () => { }, onSaved: onSavedTaskFormCallback, onClose: () => closeTaskFormCallback(), onCancel: () => closeTaskFormCallback(), usersList: participants, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers, isContextualCreate: true, taskContext: taskContext, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback }) }), (dcmtForm.dcmt && dcmtForm.dcmt.TID && dcmtForm.dcmt.DID) && _jsx(TMDcmtForm, { TID: Number(dcmtForm.dcmt.TID), DID: Number(dcmtForm.dcmt.DID), layoutMode: LayoutModes.Update, onClose: closeDcmtForm, isClosable: true, titleModal: SDKUI_Localizator.Attachment + ": " + dcmtForm.dcmt.fileName, isModal: true, widthModal: "95%", heightModal: "95%", allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers }), (showFloatingCommentButton && showCommentFormCallback && !(context?.engine === 'WorkingGroupEngine' && context?.object?.customData1 === 1)) && _jsx("button", { style: {
+                                    }), _jsx("div", { ref: bottomRef }), _jsx(TMContextMenu, { items: menuItems, target: `#${id}-blogs-container`, externalControl: {
+                                            visible: menuVisible,
+                                            position: menuPosition,
+                                            onClose: closeContextMenu,
+                                        } })] }), (showTaskForm && handleNavigateToWGs && handleNavigateToDossiers && getAllTasks && deleteTaskByIdsCallback && addTaskCallback && editTaskCallback) && _jsx("div", { style: { height: "100%", width: "100%" }, children: _jsx(TMTaskForm, { id: -1, title: SDKUI_Localizator.ContextualTask, isModal: true, width: calcResponsiveSizes(deviceType, '700px', '700px', '95%'), height: calcResponsiveSizes(deviceType, '670px', '80%', '95%'), formMode: FormModes.Create, visualizedTasks: [], currentTask: currentTask, setCurrentTask: () => { }, selectedRowKeys: [], handleFocusedRowKeyChange: () => { }, onStatusChanged: () => { }, onSaved: onSavedTaskFormCallback, onClose: () => closeTaskFormCallback(), onCancel: () => closeTaskFormCallback(), usersList: participants, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers, isContextualCreate: true, taskContext: taskContext, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback }) }), (dcmtForm.dcmt && dcmtForm.dcmt.TID && dcmtForm.dcmt.DID) && _jsx(TMDcmtForm, { TID: Number(dcmtForm.dcmt.TID), DID: Number(dcmtForm.dcmt.DID), layoutMode: LayoutModes.Update, onClose: closeDcmtForm, isClosable: true, titleModal: SDKUI_Localizator.Attachment + ": " + dcmtForm.dcmt.fileName, isModal: true, widthModal: "95%", heightModal: "95%", allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers, onReferenceClick: handleNavigateToReference, moreInfoTasks: getMoreInfoTasksForDocument(allTasks, Number(dcmtForm.dcmt.TID), Number(dcmtForm.dcmt.DID)) }), (showFloatingCommentButton && showCommentFormCallback && !(context?.engine === 'WorkingGroupEngine' && context?.object?.customData1 === 1)) && _jsx("button", { style: {
                                     position: 'absolute',
                                     bottom: '18px',
                                     right: '20px',

package/lib/components/grids/TMRecentsManager.js

@@ -1,9 +1,8 @@
 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/context-menu';
+import { ContextMenu as TMContextMenu } from '../NewComponents/ContextMenu';
 import { IconDelete, SDKUI_Localizator, IconApply, IconInfo, IconCloseOutline } from '../../helper';
 import { TMColors } from '../../utils/theme';
 import { DeviceType } from '../base/TMDeviceProvider';
@@ -62,11 +61,15 @@ const StyledRecentTidItem = styled.div `
         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();
+    const [contextMenuState, setContextMenuState] = useState({
+        visible: false,
+        position: { x: 0, y: 0 },
+        tid: null
+    });
     // Handler for the cache refresh event
     const handleCacheRefresh = useCallback(async () => {
         // Retrieve all document types without metadata from the refreshed cache
@@ -114,7 +117,10 @@ const TMRecentsManager = ({ deviceType, mruTIDs, currentMruTID, accessFilter = '
                                     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: {
+                        return (_jsxs(StyledRecentTidItem, { id: `tid-${dtd.id}`, "$isMobile": isMobile, onClick: () => { onSelectedTID?.(dtd.id ?? 0); }, onContextMenu: (e) => {
+                                e.preventDefault();
+                                setContextMenuState({ visible: true, position: { x: e.clientX, y: e.clientY }, tid: dtd.id ?? null });
+                            }, children: [_jsxs(StyledDivHorizontal, { style: { alignItems: 'center', gap: 8, width: '100%' }, children: [!isMobile && (_jsx("span", { className: "info-icon", style: {
                                                 marginRight: 4,
                                                 display: 'flex',
                                                 alignItems: 'center'
@@ -135,20 +141,24 @@ const TMRecentsManager = ({ deviceType, mruTIDs, currentMruTID, accessFilter = '
                                                 fontWeight: 'bold',
                                                 marginLeft: 8,
                                                 visibility: isCurrent ? 'visible' : 'hidden'
-                                            }, children: _jsx(IconApply, { fontSize: 24, color: 'green' }) })] }), _jsx(ContextMenu, { dataSource: [
+                                            }, children: _jsx(IconApply, { fontSize: 24, color: 'green' }) })] }), contextMenuState.tid === dtd.id && (_jsx(TMContextMenu, { items: [
                                         {
-                                            text: SDKUI_Localizator.Remove,
-                                            icon: iconDelete(),
+                                            name: SDKUI_Localizator.Remove,
+                                            icon: _jsx(IconDelete, {}),
                                             onClick: () => { onDeletedTID?.(dtd.id ?? 0); }
                                         },
                                         ...(isMobile ? [
                                             {
-                                                text: SDKUI_Localizator.About,
-                                                icon: ReactDOMServer.renderToString(_jsx(IconInfo, { color: TMColors.info })),
+                                                name: SDKUI_Localizator.About,
+                                                icon: _jsx(IconInfo, { color: TMColors.info }),
                                                 onClick: () => { setInfoDTD(dtd); }
                                             }
                                         ] : [])
-                                    ], target: `#tid-${dtd.id}` })] }, dtd.id));
+                                    ], target: `#tid-${dtd.id}`, externalControl: {
+                                        visible: contextMenuState.visible,
+                                        position: contextMenuState.position,
+                                        onClose: () => setContextMenuState({ visible: false, position: { x: 0, y: 0 }, tid: null })
+                                    } }))] }, 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)] })] }));
 };

package/lib/components/grids/TMValidationItemsList.js

@@ -14,6 +14,8 @@ const StyledValidationItemsTabs = styled.div `
     border-bottom: 1px solid $primary;
     width: 100%;
     user-select: none;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
     background-color: ${TMColors.primary};
     z-index: 20;
     border-top: 1px solid #122C4C;
@@ -44,12 +46,16 @@ const StyledMessageIcon = styled.div `
 const StyledMessageResultType = styled.div `
     width: 50px;
     user-select: none;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
     margin-right: 20px;
 `;
 const StyledMessageElement = styled.div `
     width: 150px;
     text-align: left;
     user-select: none;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
     margin-right: 20px;
 `;
 const StyledMessageText = styled.div `

package/lib/components/index.d.ts

@@ -1,7 +1,6 @@
 export { default as ShowAlert } from './base/TMAlert';
 export { default as TMButton } from './base/TMButton';
 export { default as TMClosableList } from './base/TMClosableList';
-export * from './base/TMContextMenu';
 export { default as TMDropDownMenu } from './base/TMDropDownMenu';
 export * from './base/TMListView';
 export { default as TMList } from './base/TMList';
@@ -16,6 +15,7 @@ export * from './base/TMTreeView';
 export * from './base/TMPanel';
 export * from './base/TMResizableMenu';
 export * from './base/TMAccordionNew';
+export * from './NewComponents/ContextMenu';
 export { default as CounterBar } from './base/TMCounterBar';
 export { default as TMProgressBar } from './base/TMProgressBar';
 export { default as TMSpinner } from './base/TMSpinner';
@@ -24,13 +24,13 @@ export { default as TMToggleButton } from './base/TMToggleButton';
 export { default as TMTooltip } from './base/TMTooltip';
 export { default as TMVilViewer } from './base/TMVilViewer';
 export { default as TMUserAvatar } from './base/TMUserAvatar';
-export { default as TMFloatingToolbar } from './base/TMFloatingToolbar';
 export { default as TMDropDown } from './editors/TMDropDown';
 export { default as TMTreeDropDown } from './editors/TMTreeDropDown';
 export { default as TMSummary } from './editors/TMSummary';
 export { default as TMTextBox } from './editors/TMTextBox';
 export { default as TMTextArea } from './editors/TMTextArea';
 export { default as TMTextExpression } from './editors/TMTextExpression';
+export { default as TMMetadataTextBox } from './editors/TMMetadataTextBox';
 export { default as TMCheckBox } from './editors/TMCheckBox';
 export { default as TMRadioButton } from './editors/TMRadioButton';
 export { default as TMDateBox } from './editors/TMDateBox';
@@ -60,7 +60,7 @@ export { default as TMBlogAttachments } from './grids/TMBlogAttachments';
 export { default as TMBlogCommentForm } from './features/blog/TMBlogCommentForm';
 export * from './query/TMQueryEditor';
 export * from './query/TMQuerySummary';
-export { default as ToppyDraggableHelpCenter } from './features/assistant/ToppyDraggableHelpCenter';
+export { default as TMToppyDraggableHelpCenter } from './features/assistant/TMToppyDraggableHelpCenter';
 export * from './features/documents/TMDcmtForm';
 export * from './features/documents/TMDcmtIcon';
 export * from './features/documents/TMDcmtPreview';
@@ -92,6 +92,7 @@ export { default as SettingsAppearance } from "./settings/SettingsAppearance";
 export * from "./viewers/TMTidViewer";
 export * from "./viewers/TMMidViewer";
 export * from "./viewers/TMDataListItemViewer";
+export * from "./viewers/TMDataUserIdItemViewer";
 export * from "./base/TMDeviceProvider";
 export { default as TMDataGrid } from "./base/TMDataGrid";
 export { default as TMFileManager } from "./base/TMFileManager";
@@ -112,5 +113,7 @@ export * from "./features/workflow/diagram/WFDiagram";
 export * from "./features/workflow/diagram/workflowHelpers";
 export * from "./features/workflow/diagram/xmlParser";
 export * from "./features/workflow/diagram/interfaces";
+export * from "./features/workflow/diagram/DiagramItemSvgContent";
+export * from "./features/workflow/TMWorkflowPopup";
 export { default as TMWizard } from './wizard/TMWizard';
 export * from './wizard/TMWizard';

package/lib/components/index.js

@@ -2,7 +2,6 @@
 export { default as ShowAlert } from './base/TMAlert';
 export { default as TMButton } from './base/TMButton';
 export { default as TMClosableList } from './base/TMClosableList';
-export * from './base/TMContextMenu';
 export { default as TMDropDownMenu } from './base/TMDropDownMenu';
 export * from './base/TMListView';
 export { default as TMList } from './base/TMList';
@@ -17,6 +16,7 @@ export * from './base/TMTreeView';
 export * from './base/TMPanel';
 export * from './base/TMResizableMenu';
 export * from './base/TMAccordionNew';
+export * from './NewComponents/ContextMenu';
 export { default as CounterBar } from './base/TMCounterBar';
 export { default as TMProgressBar } from './base/TMProgressBar';
 export { default as TMSpinner } from './base/TMSpinner';
@@ -25,7 +25,6 @@ export { default as TMToggleButton } from './base/TMToggleButton';
 export { default as TMTooltip } from './base/TMTooltip';
 export { default as TMVilViewer } from './base/TMVilViewer';
 export { default as TMUserAvatar } from './base/TMUserAvatar';
-export { default as TMFloatingToolbar } from './base/TMFloatingToolbar';
 //editors
 export { default as TMDropDown } from './editors/TMDropDown';
 export { default as TMTreeDropDown } from './editors/TMTreeDropDown';
@@ -33,6 +32,7 @@ export { default as TMSummary } from './editors/TMSummary';
 export { default as TMTextBox } from './editors/TMTextBox';
 export { default as TMTextArea } from './editors/TMTextArea';
 export { default as TMTextExpression } from './editors/TMTextExpression';
+export { default as TMMetadataTextBox } from './editors/TMMetadataTextBox';
 export { default as TMCheckBox } from './editors/TMCheckBox';
 export { default as TMRadioButton } from './editors/TMRadioButton';
 export { default as TMDateBox } from './editors/TMDateBox';
@@ -67,7 +67,7 @@ export { default as TMBlogCommentForm } from './features/blog/TMBlogCommentForm'
 export * from './query/TMQueryEditor';
 export * from './query/TMQuerySummary';
 //assistant
-export { default as ToppyDraggableHelpCenter } from './features/assistant/ToppyDraggableHelpCenter';
+export { default as TMToppyDraggableHelpCenter } from './features/assistant/TMToppyDraggableHelpCenter';
 //documents
 export * from './features/documents/TMDcmtForm';
 export * from './features/documents/TMDcmtIcon';
@@ -110,6 +110,7 @@ export { default as SettingsAppearance } from "./settings/SettingsAppearance";
 export * from "./viewers/TMTidViewer";
 export * from "./viewers/TMMidViewer";
 export * from "./viewers/TMDataListItemViewer";
+export * from "./viewers/TMDataUserIdItemViewer";
 //TMDeviceProvider
 export * from "./base/TMDeviceProvider";
 export { default as TMDataGrid } from "./base/TMDataGrid";
@@ -133,6 +134,8 @@ export * from "./features/workflow/diagram/WFDiagram";
 export * from "./features/workflow/diagram/workflowHelpers";
 export * from "./features/workflow/diagram/xmlParser";
 export * from "./features/workflow/diagram/interfaces";
+export * from "./features/workflow/diagram/DiagramItemSvgContent";
+export * from "./features/workflow/TMWorkflowPopup";
 // wizard
 export { default as TMWizard } from './wizard/TMWizard';
 export * from './wizard/TMWizard';

package/lib/components/layout/panelManager/TMPanelManagerContext.js

@@ -107,11 +107,19 @@ export const TMPanelManagerProvider = (props) => {
             });
         }
         else {
-            let updated = { ...initialVisibility };
-            Object.entries(initialVisibility).forEach(([id, isVisible]) => {
-                updated = adjustPanelVisibilityAndSize(id, isVisible, updated);
-            });
-            setPanelVisibility(updated);
+            if (isPersistenceEnabled) {
+                // If persistence is enabled, visibility and dimensions are already synced from persisted state, so just set them directly
+                setPanelVisibility(initialVisibility);
+            }
+            else {
+                // If persistence is not enabled, recalculate visibility and dimensions based on the initial visibility, applying the hierarchy logic
+                let updated = { ...initialVisibility };
+                Object.entries(initialVisibility).forEach(([id, isVisible]) => {
+                    updated = adjustPanelVisibilityAndSize(id, isVisible, updated);
+                });
+                // Update panel visibility state with recalculated values
+                setPanelVisibility(updated);
+            }
         }
     }, [isMobile]);
     // Function to maximize a panel (and its parent panels)

package/lib/components/query/TMQueryEditor.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { QueryDescriptor, ValidationItem } from '@topconsultnpm/sdk-ts';
 import { ITMApplyFormProps, FormModes } from '../../ts';
+import type { TMContextMenuItemProps } from '../NewComponents/ContextMenu/types';
 export declare const StyledRowItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const StyledItemWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $borderRadius?: string;
@@ -45,6 +46,7 @@ interface ITMQueryEditor extends ITMApplyFormProps<QueryDescriptor> {
     onFromTIDChanged?: (tid: number) => void;
     onQDChanged?: (qd: QueryDescriptor) => void;
     ShowOnlySAP?: boolean;
+    updateIsModalOpen?: (isOpen: boolean) => void;
 }
 declare const TMQueryEditor: React.FunctionComponent<ITMQueryEditor>;
 export default TMQueryEditor;
@@ -54,5 +56,5 @@ export interface ITMQdDropDownMenuProps {
     backgroundColor?: string;
     disabled?: boolean;
     borderRadius?: string;
-    items?: any[];
+    items?: TMContextMenuItemProps[];
 }