@topconsultnpm/sdkui-react 6.20.0-dev1.20 → 6.20.0-dev1.22

package/lib/components/NewComponents/ContextMenu/TMContextMenu.js

@@ -173,7 +173,7 @@ const TMContextMenu = ({ items, trigger = 'right', children }) => {
                 // if (item.disabled) return;
                 item.onRightIconClick?.();
             };
-            return (_jsxs(S.MenuItem, { "$disabled": item.disabled, "$hasSubmenu": !!item.submenu && item.submenu.length > 0, "$beginGroup": item.beginGroup, onMouseDown: handleClick, onMouseEnter: (e) => !isMobile && handleMouseEnter(item, e, depth + 1), onMouseLeave: () => !isMobile && handleMouseLeave(depth + 1), children: [_jsxs(S.MenuItemContent, { children: [item.icon && _jsx(S.IconWrapper, { children: item.icon }), _jsx(S.MenuItemName, { children: item.name })] }), item.rightIcon && item.onRightIconClick && (_jsx(S.RightIconButton, { onClick: handleRightIconClick, onMouseDown: (e) => e.stopPropagation(), "aria-label": `Action for ${item.name}`, children: item.rightIcon })), item.submenu && item.submenu.length > 0 && (_jsx(S.SubmenuIndicator, { "$isMobile": isMobile, children: isMobile ? '›' : '▸' }))] }, itemKey));
+            return (_jsxs(S.MenuItem, { "$disabled": item.disabled, "$hasSubmenu": !!item.submenu && item.submenu.length > 0, "$beginGroup": item.beginGroup, onMouseDown: handleClick, onMouseEnter: (e) => !isMobile && handleMouseEnter(item, e, depth + 1), onMouseLeave: () => !isMobile && handleMouseLeave(depth + 1), title: item.tooltip, children: [_jsxs(S.MenuItemContent, { children: [item.icon && _jsx(S.IconWrapper, { children: item.icon }), _jsx(S.MenuItemName, { children: item.name })] }), item.rightIcon && item.onRightIconClick && (_jsx(S.RightIconButton, { onClick: handleRightIconClick, onMouseDown: (e) => e.stopPropagation(), "aria-label": `Action for ${item.name}`, children: item.rightIcon })), item.submenu && item.submenu.length > 0 && (_jsx(S.SubmenuIndicator, { "$isMobile": isMobile, children: isMobile ? '›' : '▸' }))] }, itemKey));
         });
     };
     const currentMenu = menuState.submenuStack.at(-1) || items;

package/lib/components/NewComponents/ContextMenu/types.d.ts

@@ -8,6 +8,7 @@ export interface TMContextMenuItemProps {
     rightIcon?: React.ReactNode;
     onRightIconClick?: () => void;
     beginGroup?: boolean;
+    tooltip?: string;
 }
 export interface TMContextMenuProps {
     items: TMContextMenuItemProps[];

package/lib/components/NewComponents/FloatingMenuBar/TMFloatingMenuBar.js

@@ -1,36 +1,40 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useRef, useEffect, useCallback } from 'react';
 import { ContextMenu } from '../ContextMenu';
-import Notification from '../Notification';
+import ShowAlert from '../../base/TMAlert';
 import TMTooltip from '../../base/TMTooltip';
 import * as S from './styles';
-import { IconApply, IconMenuKebab, IconMenuVertical, IconPencil, IconPin } from '../../../helper';
+import { IconApply, IconMenuKebab, IconMenuVertical, IconPencil, IconPin, SDKUI_Globals } from '../../../helper';
 const IconDraggableDots = (props) => (_jsx("svg", { fontSize: 18, viewBox: "0 0 24 24", fill: "currentColor", height: "1em", width: "1em", ...props, children: _jsx("path", { d: "M9 3a2 2 0 11-4 0 2 2 0 014 0zm0 9a2 2 0 11-4 0 2 2 0 014 0zm0 9a2 2 0 11-4 0 2 2 0 014 0zm10-18a2 2 0 11-4 0 2 2 0 014 0zm0 9a2 2 0 11-4 0 2 2 0 014 0zm0 9a2 2 0 11-4 0 2 2 0 014 0z" }) }));
-const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], storageKey = 'floatingMenuBar-config', isConstrained = false, defaultPosition = { x: 100, y: 100 }, maxItems = 8, }) => {
+const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], storageKey = 'floatingMenuBar-config', // Kept for backward compatibility but not used
+isConstrained = false, defaultPosition = { x: 100, y: 100 }, maxItems = 8, }) => {
     const loadConfig = () => {
         try {
-            const saved = localStorage.getItem(storageKey);
-            if (saved) {
-                const config = JSON.parse(saved);
-                return {
-                    orientation: config.orientation || 'horizontal',
-                    pinnedItemIds: new Set(config.pinnedItemIds || []),
-                    savedItemIds: config.itemIds || [],
-                };
-            }
+            const settings = SDKUI_Globals.userSettings.searchSettings.floatingMenuBar;
+            // Check if position was actually saved (not just the default class value)
+            const hasSavedPosition = settings.position &&
+                (settings.position.x !== 100 || settings.position.y !== 100 ||
+                    (settings.itemIds && settings.itemIds.length > 0));
+            return {
+                orientation: settings.orientation || 'horizontal',
+                pinnedItemIds: new Set(settings.pinnedItemIds || []),
+                savedItemIds: settings.itemIds || [],
+                position: hasSavedPosition ? settings.position : defaultPosition,
+            };
         }
         catch (error) {
             console.error('Failed to load FloatingMenuBar config:', error);
+            return {
+                orientation: 'horizontal',
+                pinnedItemIds: new Set(),
+                savedItemIds: [],
+                position: defaultPosition,
+            };
         }
-        return {
-            orientation: 'horizontal',
-            pinnedItemIds: new Set(),
-            savedItemIds: [],
-        };
     };
     const initialConfig = loadConfig();
     const [state, setState] = useState({
-        position: defaultPosition,
+        position: initialConfig.position,
         isDragging: false,
         isConfigMode: false,
         orientation: initialConfig.orientation,
@@ -41,7 +45,6 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], storageKey = '
     const dragOffset = useRef({ x: 0, y: 0 });
     const [pinnedItemIds, setPinnedItemIds] = useState(initialConfig.pinnedItemIds);
     const [dragOverIndex, setDragOverIndex] = useState(null);
-    const [showMaxItemsNotification, setShowMaxItemsNotification] = useState(false);
     // Use refs to track item IDs without causing re-renders
     const floatingBarItemIds = useRef(new Set());
     const floatingBarItemNames = useRef(new Set());
@@ -98,8 +101,12 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], storageKey = '
             else {
                 // Add to floating bar
                 if (s.items.length >= maxItems) {
-                    setShowMaxItemsNotification(true);
-                    setTimeout(() => setShowMaxItemsNotification(false), 3000);
+                    ShowAlert({
+                        mode: 'warning',
+                        title: 'Limite Massimo Raggiunto',
+                        message: `Hai raggiunto il massimo di ${maxItems} elementi. Rimuovine uno prima di aggiungerne altri.`,
+                        duration: 4000,
+                    });
                     return s;
                 }
                 return { ...s, items: [...s.items, item] };
@@ -229,20 +236,21 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], storageKey = '
         }
         return undefined;
     }, [state.isDragging, handleMouseMove, handleMouseUp]);
-    // Save to localStorage whenever config changes (excluding position)
+    // Save to SDKUI_Globals.userSettings whenever config changes (including position)
     useEffect(() => {
         try {
-            const config = {
+            // Replace the entire object to trigger the Proxy
+            SDKUI_Globals.userSettings.searchSettings.floatingMenuBar = {
                 orientation: state.orientation,
                 pinnedItemIds: Array.from(pinnedItemIds),
-                itemIds: state.items.map(item => item.id), // Save only IDs, not functions
+                itemIds: state.items.map(item => item.id),
+                position: state.position,
             };
-            localStorage.setItem(storageKey, JSON.stringify(config));
         }
         catch (error) {
             console.error('Failed to save FloatingMenuBar config:', error);
         }
-    }, [state.orientation, state.items, pinnedItemIds, storageKey]);
+    }, [state.orientation, state.items, state.position, pinnedItemIds]);
     const toggleConfigMode = () => {
         setState(s => ({ ...s, isConfigMode: !s.isConfigMode }));
     };
@@ -365,6 +373,6 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], storageKey = '
                                                 currentOnClick();
                                             }
                                         }, disabled: isDisabled, children: item.icon }) })), state.isConfigMode && (_jsx(S.RemoveButton, { onClick: () => removeItem(item.id), children: "\u00D7" }))] }, item.id));
-                    }), !state.isConfigMode && contextMenuItems.length > 0 && (_jsx(ContextMenu, { items: enhancedContextMenuItems(), trigger: "left", children: _jsx(S.ContextMenuButton, { children: _jsx(IconMenuVertical, {}) }) }, Array.from(pinnedItemIds).join(','))), _jsx(S.ConfigButton, { onClick: toggleConfigMode, "$isActive": state.isConfigMode, children: state.isConfigMode ? _jsx(IconApply, {}) : _jsx(IconPencil, {}) }), !state.isConfigMode && (_jsx(S.OrientationToggle, { "$orientation": state.orientation, onClick: toggleOrientation, children: _jsx(IconMenuKebab, {}) }))] }), showMaxItemsNotification && (_jsx("div", { style: { position: 'fixed', top: '20px', left: '50%', transform: 'translateX(-50%)', zIndex: 100001 }, children: _jsx(Notification, { title: "Maximum Items Reached", message: `You have reached the maximum number of pinned items (${maxItems}). Please unpin an item before adding a new one.`, mode: "warning", position: "top-center", duration: 4000, closable: true, stopOnMouseEnter: true, hasProgress: true, onClose: () => setShowMaxItemsNotification(false) }) }))] }));
+                    }), !state.isConfigMode && contextMenuItems.length > 0 && (_jsx(ContextMenu, { items: enhancedContextMenuItems(), trigger: "left", children: _jsx(S.ContextMenuButton, { children: _jsx(IconMenuVertical, {}) }) }, Array.from(pinnedItemIds).join(','))), _jsx(S.ConfigButton, { onClick: toggleConfigMode, "$isActive": state.isConfigMode, children: state.isConfigMode ? _jsx(IconApply, {}) : _jsx(IconPencil, {}) }), !state.isConfigMode && (_jsx(S.OrientationToggle, { "$orientation": state.orientation, onClick: toggleOrientation, children: _jsx(IconMenuKebab, {}) }))] })] }));
 };
 export default TMFloatingMenuBar;

package/lib/components/NewComponents/FloatingMenuBar/styles.js

@@ -187,25 +187,26 @@ export const RemoveButton = styled.button `
   width: 20px;
   height: 20px;
   background: #ef4444;
-  border: 2px solid white;
+  border: none;
   border-radius: 50%;
   color: white;
-  font-size: 12px;
+  font-size: 14px;
   font-weight: bold;
+  line-height: 1;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
+  padding: 0;
   transition: all 0.2s ease;
   z-index: 1;
 
   &:hover {
     background: #dc2626;
-    transform: scale(1.15);
   }
 
   &:active {
-    transform: scale(0.9);
+    background: #b91c1c;
   }
 `;
 export const OrientationToggle = styled.button `

package/lib/components/features/documents/TMDcmtForm.js

@@ -2,14 +2,13 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import TMDcmtPreview from './TMDcmtPreview';
 import { AccessLevels, ArchiveConstraints, ArchiveEngineByID, DcmtTypeListCacheService, LayoutCacheService, LayoutModes, MetadataDataTypes, ObjectClasses, ResultTypes, SDK_Globals, SDK_Localizator, SystemMIDsAsNumber, SystemTIDs, Task_States, TemplateTIDs, TID_DID, UpdateEngineByID, UserListCacheService, ValidationItem, WorkflowCacheService, WorkItemMetadataNames } from '@topconsultnpm/sdk-ts';
-import { ContextMenu } from 'devextreme-react';
 import { WorkFlowApproveRejectPopUp, WorkFlowMoreInfoPopUp, WorkFlowOperationButtons, WorkFlowReAssignPopUp } from '../workflow/TMWorkflowPopup';
 import { DownloadTypes, FormModes, DcmtOperationTypes } from '../../../ts';
 import { DeviceType, useDeviceType } from '../../base/TMDeviceProvider';
 import { useDcmtOperations } from '../../../hooks/useDcmtOperations';
 import { useRelatedDocuments } from '../../../hooks/useRelatedDocuments';
 import { getWorkItemSetIDAsync, handleArchiveVisibility, searchResultToMetadataValues } from '../../../helper/queryHelper';
-import { genUniqueId, IconShow, SDKUI_Localizator, updateMruTids, IconBoard, IconDcmtTypeSys, IconDetailDcmts, svgToString, IconDownload, calcIsModified, IconMenuVertical, Globalization, getListMaxItems, getSystemMetadata, IconBoxArchiveIn, IconClear, IconUndo, SDKUI_Globals, IconPreview, isTaskMoreInfo, IconWorkflow, IconSearch, deepCompare, IconCheck, IconActivity, TMImageLibrary, IconStar, IconRelation, IconInfo, IconArchiveDoc, IconDelete, IconPair, IconUnpair, IconArchiveMaster, IconArchiveDetail, getDcmtCicoStatus, IconFileDots } from '../../../helper';
+import { genUniqueId, IconShow, SDKUI_Localizator, updateMruTids, IconBoard, IconDcmtTypeSys, IconDetailDcmts, IconDownload, calcIsModified, IconMenuVertical, Globalization, getListMaxItems, getSystemMetadata, IconBoxArchiveIn, IconClear, IconUndo, SDKUI_Globals, IconPreview, isTaskMoreInfo, IconWorkflow, IconSearch, deepCompare, IconCheck, IconActivity, TMImageLibrary, IconStar, IconRelation, IconInfo, IconArchiveDoc, IconDelete, IconPair, IconUnpair, IconArchiveMaster, IconArchiveDetail, getDcmtCicoStatus, IconFileDots } from '../../../helper';
 import { hasDetailRelations, hasMasterRelations, isXMLFileExt } from '../../../helper/dcmtsHelper';
 import { Gutters, TMColors } from '../../../utils/theme';
 import { StyledFormButtonsContainer, StyledLoadingContainer, StyledModalContainer, StyledReferenceButton, StyledSpinner, StyledToolbarCardContainer } from '../../base/Styled';
@@ -46,6 +45,7 @@ import { useCheckInOutOperations } from '../../../hooks/useCheckInOutOperations'
 import TMViewHistoryDcmt from '../search/TMViewHistoryDcmt';
 import TMDcmtCheckoutInfoForm from '../search/TMDcmtCheckoutInfoForm';
 import styled from 'styled-components';
+import { ContextMenu } from '../../NewComponents/ContextMenu';
 let abortControllerLocal = new AbortController();
 //#endregion
 const TMDcmtForm = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallback, addTaskCallback, editTaskCallback, handleNavigateToWGs, handleNavigateToDossiers, showHeader = true, onSaveRecents, layoutMode = LayoutModes.Update, showBackButton = true, onClose, onSavedAsyncCallback, TID, DID, formMode = FormModes.Update, canNext, canPrev, count, itemIndex, onNext, onPrev, allowNavigation = true, allowRelations = true, isClosable = false, isExpertMode = SDKUI_Globals.userSettings.advancedSettings.expertMode === 1, showDcmtFormSidebar = true, invokedByTodo = false, titleModal, isModal = false, widthModal = "100%", heightModal = "100%", groupId, onWFOperationCompleted, onTaskCompleted, onTaskCreateRequest, inputFile = null, taskFormDialogComponent, taskMoreInfo, connectorFileSave = undefined, inputMids = [], openS4TViewer = false, onOpenS4TViewerRequest, s4TViewerDialogComponent, enableDragDropOverlay = false, passToSearch, isSharedDcmt = false, sharedSourceTID, sharedSourceDID, allowButtonsRefs = false, onReferenceClick, }) => {
@@ -544,23 +544,20 @@ const TMDcmtForm = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallback, addTa
         const items = [];
         const operationsItems = [];
         operationsItems.push({
-            icon: svgToString(_jsx(IconDownload, {})),
-            operationType: 'singleRow',
+            icon: _jsx(IconDownload, {}),
             disabled: fromDTD?.perm?.canRetrieveFile !== AccessLevels.Yes,
-            text: SDKUI_Localizator.DownloadFile,
+            name: SDKUI_Localizator.DownloadFile,
             onClick: async () => await downloadDcmtsAsync(getDcmts(), DownloadTypes.Dcmt, "download", undefined, undefined, true)
         }, {
-            icon: svgToString(_jsx(IconDownload, {})),
-            operationType: 'singleRow',
+            icon: _jsx(IconDownload, {}),
             disabled: !isXMLFileExt(currentDcmt?.fileExt),
-            text: SDKUI_Localizator.DownloadXMLAttachments,
+            name: SDKUI_Localizator.DownloadXMLAttachments,
             onClick: async () => await downloadDcmtsAsync(getDcmts(), DownloadTypes.Attachment, "download", undefined, openConfirmAttachmentsDialog, true)
         });
         if (layoutMode === LayoutModes.Update && DID) {
             operationsItems.push({
-                icon: svgToString(_jsx(IconStar, {})),
-                text: SDKUI_Localizator.AddTo + ' ' + SDKUI_Localizator.Favorites,
-                operationType: 'singleRow',
+                icon: _jsx(IconStar, {}),
+                name: SDKUI_Localizator.AddTo + ' ' + SDKUI_Localizator.Favorites,
                 disabled: false,
                 onClick: async () => {
                     await runOperationAsync(getDcmts(), DcmtOperationTypes.AddToFavs);
@@ -569,9 +566,8 @@ const TMDcmtForm = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallback, addTa
         }
         if (onTaskCreateRequest && layoutMode === LayoutModes.Update && DID) {
             operationsItems.push({
-                icon: svgToString(_jsx(IconActivity, {})),
-                text: SDKUI_Localizator.CreateContextualTask,
-                operationType: 'singleRow',
+                icon: _jsx(IconActivity, {}),
+                name: SDKUI_Localizator.CreateContextualTask,
                 disabled: false,
                 onClick: () => {
                     const dcmt = getDcmts()[0];
@@ -588,52 +584,46 @@ const TMDcmtForm = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallback, addTa
         }
         if (operationsItems.length > 0) {
             items.push({
-                icon: svgToString(_jsx(IconCheck, {})),
-                text: SDKUI_Localizator.DocumentOperations,
-                items: operationsItems
+                icon: _jsx(IconCheck, {}),
+                name: SDKUI_Localizator.DocumentOperations,
+                submenu: operationsItems
             });
         }
         if (fromDTD?.id !== SystemTIDs.Drafts) {
             // Check in/Check out menu
             const { cicoEnabled, checkoutStatus } = getDcmtCicoStatus(formData, allUsers, fromDTD);
             items.push({
-                icon: svgToString(_jsx(IconFileDots, {})),
-                text: "Check in/Check out",
+                icon: _jsx(IconFileDots, {}),
+                name: "Check in/Check out",
                 disabled: false,
-                items: [
+                submenu: [
                     {
-                        icon: "edit",
-                        text: 'Check out',
+                        name: 'Check out',
                         disabled: !cicoEnabled || checkoutStatus.isCheckedOut,
                         onClick: () => handleCheckOutOperationCallback(true),
                     },
                     {
-                        icon: "unlock",
-                        text: 'Check in',
+                        name: 'Check in',
                         onClick: () => handleCheckInOperationCallback(),
                         disabled: !cicoEnabled || !checkoutStatus.isCheckedOut || checkoutStatus.mode === 'lockMode'
                     },
                     {
-                        icon: "remove",
-                        text: SDKUI_Localizator.CancelCheckOut,
+                        name: SDKUI_Localizator.CancelCheckOut,
                         disabled: !cicoEnabled || !checkoutStatus.isCheckedOut || checkoutStatus.mode === 'lockMode',
                         onClick: () => handleCheckOutOperationCallback(false),
                     },
                     {
-                        icon: "info",
-                        text: SDKUI_Localizator.CheckoutInfo,
+                        name: SDKUI_Localizator.CheckoutInfo,
                         onClick: showCheckoutInformationFormCallback,
                         disabled: !checkoutStatus.isCheckedOut
                     },
                     {
-                        icon: "copy",
-                        text: SDKUI_Localizator.CopyCheckoutPath,
+                        name: SDKUI_Localizator.CopyCheckoutPath,
                         onClick: copyCheckoutPathToClipboardOperationCallback,
                         disabled: !checkoutStatus.isCheckedOut
                     },
                     {
-                        icon: "clock",
-                        text: SDKUI_Localizator.History,
+                        name: SDKUI_Localizator.History,
                         disabled: !cicoEnabled,
                         onClick: showHistoryCallback,
                     },
@@ -643,68 +633,57 @@ const TMDcmtForm = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallback, addTa
         if (allowRelations && layoutMode === LayoutModes.Update && DID) {
             const relationsItems = [
                 {
-                    icon: svgToString(_jsx(IconPair, {})),
-                    text: SDKUI_Localizator.MatchManyDocumentsManyToMany,
-                    operationType: 'singleRow',
+                    icon: _jsx(IconPair, {}),
+                    name: SDKUI_Localizator.MatchManyDocumentsManyToMany,
                     disabled: !hasManyToManyRelation,
                     onClick: async () => await pairManyToMany?.(true)
                 },
                 {
-                    icon: svgToString(_jsx(IconUnpair, {})),
-                    text: SDKUI_Localizator.UnmatchManyDocumentsManyToMany,
-                    operationType: 'singleRow',
+                    icon: _jsx(IconUnpair, {}),
+                    name: SDKUI_Localizator.UnmatchManyDocumentsManyToMany,
                     disabled: !hasManyToManyRelation,
                     onClick: async () => await pairManyToMany?.(false)
                 },
                 {
-                    icon: svgToString(_jsx(IconArchiveMaster, {})),
-                    text: SDKUI_Localizator.ArchiveMasterDocument,
-                    operationType: 'singleRow',
-                    beginGroup: true,
+                    icon: _jsx(IconArchiveMaster, {}),
+                    name: SDKUI_Localizator.ArchiveMasterDocument,
                     disabled: canArchiveMasterRelation !== true,
                     onClick: async () => { if (TID)
                         await archiveMasterDocuments?.(TID); }
                 },
                 {
-                    icon: svgToString(_jsx(IconArchiveDetail, {})),
-                    text: SDKUI_Localizator.ArchiveDetailDocument,
-                    operationType: 'singleRow',
+                    icon: _jsx(IconArchiveDetail, {}),
+                    name: SDKUI_Localizator.ArchiveDetailDocument,
                     disabled: canArchiveDetailRelation !== true,
                     onClick: async () => { if (TID)
                         await archiveDetailDocuments?.(TID); }
                 },
                 {
-                    icon: svgToString(_jsx(IconDetailDcmts, { transform: 'scale(-1, 1)' })),
-                    text: SDKUI_Localizator.DcmtsMaster,
-                    operationType: 'singleRow',
-                    visible: true,
-                    beginGroup: true,
+                    icon: _jsx(IconDetailDcmts, { transform: 'scale(-1, 1)' }),
+                    name: SDKUI_Localizator.DcmtsMaster,
                     disabled: !currentTIDHasMasterRelations || isMasterDisabled,
                     onClick: () => { if (!isMasterDisabled)
                         setIsOpenMaster(!isOpenMaster); }
                 },
                 {
-                    icon: svgToString(_jsx(IconDetailDcmts, {})),
-                    text: SDKUI_Localizator.DcmtsDetail,
-                    operationType: 'singleRow',
+                    icon: _jsx(IconDetailDcmts, {}),
+                    name: SDKUI_Localizator.DcmtsDetail,
                     disabled: !currentTIDHasDetailRelations || isDetailsDisabled,
-                    visible: true,
                     onClick: () => { if (!isDetailsDisabled)
                         setIsOpenDetails(!isOpenDetails); }
                 }
             ];
             items.push({
-                icon: svgToString(_jsx(IconRelation, {})),
-                text: SDKUI_Localizator.Relations,
-                items: relationsItems
+                icon: _jsx(IconRelation, {}),
+                name: SDKUI_Localizator.Relations,
+                submenu: relationsItems
             });
         }
         if (layoutMode === LayoutModes.Update && DID) {
             const fullTextItems = [
                 {
-                    icon: svgToString(_jsx(IconInfo, {})),
-                    text: SDKUI_Localizator.IndexingInformation,
-                    operationType: 'singleRow',
+                    icon: _jsx(IconInfo, {}),
+                    name: SDKUI_Localizator.IndexingInformation,
                     disabled: false,
                     onClick: async () => {
                         try {
@@ -722,18 +701,16 @@ const TMDcmtForm = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallback, addTa
                     }
                 },
                 {
-                    icon: svgToString(_jsx(IconArchiveDoc, {})),
-                    text: SDKUI_Localizator.IndexOrReindex,
-                    operationType: 'singleRow',
+                    icon: _jsx(IconArchiveDoc, {}),
+                    name: SDKUI_Localizator.IndexOrReindex,
                     disabled: false,
                     onClick: async () => {
                         await runOperationAsync(getDcmts(), DcmtOperationTypes.FreeSearchReindex);
                     }
                 },
                 {
-                    icon: svgToString(_jsx(IconDelete, {})),
-                    text: SDKUI_Localizator.IndexingDelete,
-                    operationType: 'singleRow',
+                    icon: _jsx(IconDelete, {}),
+                    name: SDKUI_Localizator.IndexingDelete,
                     disabled: false,
                     onClick: async () => {
                         await runOperationAsync(getDcmts(), DcmtOperationTypes.FreeSearchPurge);
@@ -741,9 +718,9 @@ const TMDcmtForm = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallback, addTa
                 }
             ];
             items.push({
-                icon: svgToString(_jsx(IconSearch, {})),
-                text: SDKUI_Localizator.FullTextSearch,
-                items: fullTextItems
+                icon: _jsx(IconSearch, {}),
+                name: SDKUI_Localizator.FullTextSearch,
+                submenu: fullTextItems
             });
         }
         // Aggiungi submenu "Bottoni personalizzati" se esistono customButtons
@@ -751,14 +728,14 @@ const TMDcmtForm = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallback, addTa
             const customButtonsItems = customButtonsLayout.customButtons
                 .filter((customButton) => customButton.isForUpdate && customButton.isForUpdate > 0)
                 .map((customButton) => ({
-                icon: svgToString(TMImageLibrary({ imageID: customButton.glyphID, showPath: true })),
-                text: customButton.title || 'Bottone personalizzato',
+                icon: TMImageLibrary({ imageID: customButton.glyphID, showPath: false }),
+                name: customButton.title || 'Bottone personalizzato',
                 onClick: () => setCustomButton(customButton)
             }));
             items.push({
-                icon: svgToString(_jsx(IconCheck, {})),
-                text: SDKUI_Localizator.CustomButtons,
-                items: customButtonsItems
+                icon: _jsx(IconCheck, {}),
+                name: SDKUI_Localizator.CustomButtons,
+                submenu: customButtonsItems
             });
         }
         return items;
@@ -789,8 +766,9 @@ const TMDcmtForm = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallback, addTa
         openConfirmAttachmentsDialog
     ]);
     const isModified = useMemo(() => calcIsModified(formData, formDataOrig), [formData, formDataOrig]);
-    const formToolbar = useMemo(() => _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '10px' }, children: [allowNavigation && canPrev != undefined && _jsx("p", { style: { textAlign: 'center', padding: '1px 4px', display: 'flex' }, children: `${itemIndex}/${count}` }), allowNavigation && canPrev != undefined && _jsx(TMSaveFormButtonPrevious, { btnStyle: 'icon', iconColor: 'white', isModified: isModified, formMode: formMode, canPrev: canPrev, onPrev: onPrev }), allowNavigation && canNext != undefined && _jsx(TMSaveFormButtonNext, { btnStyle: 'icon', iconColor: 'white', isModified: isModified, formMode: formMode, canNext: canNext, onNext: onNext }), layoutMode === LayoutModes.Update && _jsx(IconMenuVertical, { id: `commands-detail-${id}`, color: 'white', cursor: 'pointer' }), layoutMode === LayoutModes.Update && _jsx(ContextMenu, { showEvent: 'click', dataSource: commandsMenuItems, target: `#commands-detail-${id}` }), layoutMode === LayoutModes.Ark &&
-                _jsx(TMTooltip, { content: SDKUI_Localizator.PassToSearch, position: 'bottom', children: _jsx(IconSearch, { style: { cursor: 'pointer' }, onClick: handlePassToSearch }) })] }), [allowNavigation, canPrev, canNext, itemIndex, count, isModified, formMode, onPrev, onNext, layoutMode, id, commandsMenuItems, handlePassToSearch]);
+    const formToolbar = useMemo(() => _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '10px' }, children: [allowNavigation && canPrev != undefined && _jsx("p", { style: { textAlign: 'center', padding: '1px 4px', display: 'flex' }, children: `${itemIndex}/${count}` }), allowNavigation && canPrev != undefined && _jsx(TMSaveFormButtonPrevious, { btnStyle: 'icon', iconColor: 'white', isModified: isModified, formMode: formMode, canPrev: canPrev, onPrev: onPrev }), allowNavigation && canNext != undefined && _jsx(TMSaveFormButtonNext, { btnStyle: 'icon', iconColor: 'white', isModified: isModified, formMode: formMode, canNext: canNext, onNext: onNext }), layoutMode === LayoutModes.Update &&
+                _jsx(ContextMenu, { items: commandsMenuItems, trigger: "left", children: _jsx(IconMenuVertical, { color: 'white', cursor: 'pointer' }) }), layoutMode === LayoutModes.Ark &&
+                _jsx(TMTooltip, { content: SDKUI_Localizator.PassToSearch, position: 'bottom', children: _jsx(IconSearch, { style: { cursor: 'pointer' }, onClick: handlePassToSearch }) })] }), [allowNavigation, canPrev, canNext, itemIndex, count, isModified, formMode, onPrev, onNext, layoutMode, commandsMenuItems, handlePassToSearch]);
     const handleUndo = useCallback(() => {
         setFormData(structuredClone(formDataOrig));
     }, [formDataOrig]);

package/lib/components/features/documents/TMDcmtPreview.js

@@ -8,13 +8,13 @@ import { FileExtensionHandler, FormModes } from '../../../ts';
 import { TMColors } from '../../../utils/theme';
 import ShowAlert from '../../base/TMAlert';
 import TMButton from '../../base/TMButton';
-import TMDropDownMenu from '../../base/TMDropDownMenu';
 import { TMExceptionBoxManager } from '../../base/TMPopUp';
 import { TMLayoutWaitingContainer } from '../../base/TMWaitPanel';
 import { TMSaveFormButtonPrevious, TMSaveFormButtonNext } from '../../forms/TMSaveForm';
 import { StyledAnimatedComponentOpacity } from '../../base/Styled';
 import TMPanel from '../../base/TMPanel';
 import TMTooltip from '../../base/TMTooltip';
+import { ContextMenu } from '../../NewComponents/ContextMenu';
 let Document = null;
 let Page = null;
 let pdfjs = null;
@@ -153,10 +153,11 @@ const TMDcmtPreview = ({ dcmtData, isResizingActive, isVisible, canNext, canPrev
             console.error('Error reopening document:', error);
         }
     };
-    return (_jsx(TMLayoutWaitingContainer, { direction: 'vertical', showWaitPanel: showWaitPanel, showWaitPanelPrimary: showPrimary, showWaitPanelSecondary: showSecondary, waitPanelTitle: waitPanelTitle, waitPanelTextPrimary: waitPanelTextPrimary, waitPanelValuePrimary: waitPanelValuePrimary, waitPanelMaxValuePrimary: waitPanelMaxValuePrimary, waitPanelTextSecondary: waitPanelTextSecondary, waitPanelValueSecondary: waitPanelValueSecondary, waitPanelMaxValueSecondary: waitPanelMaxValueSecondary, isCancelable: true, abortController: abortController, children: _jsx(TMPanel, { padding: '0', title: titleHandler(), onClose: onClosePanel, allowMaximize: allowMaximize, onMaximize: onMaximizePanel, onHeaderDoubleClick: onMaximizePanel, toolbar: _jsxs("div", { style: { width: 'max-content', display: 'flex', alignItems: 'center', gap: '10px' }, children: [onPrev && _jsx(TMSaveFormButtonPrevious, { btnStyle: 'icon', isModified: false, formMode: FormModes.ReadOnly, canPrev: canPrev, onPrev: onPrev }), onNext && _jsx(TMSaveFormButtonNext, { btnStyle: 'icon', isModified: false, formMode: FormModes.ReadOnly, canNext: canNext, onNext: onNext }), _jsx(StyledHeaderIcon, { "$color": TMColors.primaryColor, children: _jsx(TMDropDownMenu, { backgroundColor: 'white', borderRadius: '3px', content: _jsx(TMButton, { btnStyle: 'icon', caption: 'Altro', icon: _jsx(IconMenuVertical, {}), showTooltip: false }), items: [
-                                { icon: _jsx(IconCloseCircle, {}), text: SDKUI_Localizator.RemoveFromCache, onClick: () => { removeDcmtsFileCache(cacheKey); setIsFromCache(false); } },
-                                { icon: _jsx(IconClear, {}), text: SDKUI_Localizator.ClearCache, onClick: () => { clearDcmtsFileCache(); setIsFromCache(false); } },
-                            ] }, "btn13") }), _jsx(StyledHeaderIcon, { onClick: reOpenDcmt, "$color": TMColors.primaryColor, children: _jsx(TMTooltip, { content: SDKUI_Localizator.ReopenDocument, children: _jsx(IconRefresh, {}) }) })] }), children: error
+    const cacheMenuItems = useMemo(() => [
+        { icon: _jsx(IconCloseCircle, {}), name: SDKUI_Localizator.RemoveFromCache, onClick: () => { removeDcmtsFileCache(cacheKey); setIsFromCache(false); } },
+        { icon: _jsx(IconClear, {}), name: SDKUI_Localizator.ClearCache, onClick: () => { clearDcmtsFileCache(); setIsFromCache(false); } },
+    ], [cacheKey, removeDcmtsFileCache, clearDcmtsFileCache, setIsFromCache]);
+    return (_jsx(TMLayoutWaitingContainer, { direction: 'vertical', showWaitPanel: showWaitPanel, showWaitPanelPrimary: showPrimary, showWaitPanelSecondary: showSecondary, waitPanelTitle: waitPanelTitle, waitPanelTextPrimary: waitPanelTextPrimary, waitPanelValuePrimary: waitPanelValuePrimary, waitPanelMaxValuePrimary: waitPanelMaxValuePrimary, waitPanelTextSecondary: waitPanelTextSecondary, waitPanelValueSecondary: waitPanelValueSecondary, waitPanelMaxValueSecondary: waitPanelMaxValueSecondary, isCancelable: true, abortController: abortController, children: _jsx(TMPanel, { padding: '0', title: titleHandler(), onClose: onClosePanel, allowMaximize: allowMaximize, onMaximize: onMaximizePanel, onHeaderDoubleClick: onMaximizePanel, toolbar: _jsxs("div", { style: { width: 'max-content', display: 'flex', alignItems: 'center', gap: '10px' }, children: [onPrev && _jsx(TMSaveFormButtonPrevious, { btnStyle: 'icon', isModified: false, formMode: FormModes.ReadOnly, canPrev: canPrev, onPrev: onPrev }), onNext && _jsx(TMSaveFormButtonNext, { btnStyle: 'icon', isModified: false, formMode: FormModes.ReadOnly, canNext: canNext, onNext: onNext }), _jsx(StyledHeaderIcon, { "$color": TMColors.primaryColor, children: _jsx(ContextMenu, { items: cacheMenuItems, trigger: "left", children: _jsx(IconMenuVertical, {}) }) }), _jsx(StyledHeaderIcon, { onClick: reOpenDcmt, "$color": TMColors.primaryColor, children: _jsx(TMTooltip, { content: SDKUI_Localizator.ReopenDocument, children: _jsx(IconRefresh, {}) }) })] }), children: error
                 ? _jsx(ErrorContent, { error: error, isAbortError: isAbortError, onRetry: reOpenDcmt })
                 : renderedPreview(dcmtData?.tid, dcmtData?.did, dcmtData?.fileExt, dcmtData?.fileSize, dcmtData?.fileCount, extensionHandler(dcmtData?.fileExt), showPreview, isResizingActive, () => { loadDocumentWithCache(); setShowPreview(true); }, dcmtBlob) }) }));
 };

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { PlatformObjectValidator, WhereItem, SDK_Localizator, OrderByItem, SelectItem, SelectItemVisibilities, SDK_Globals, SavedQueryCacheService, SearchEngine, QueryOperators } from '@topconsultnpm/sdk-ts';
 import styled from 'styled-components';
 import TMSearchQueryEditor from './TMSearchQueryEditor';
@@ -11,7 +11,6 @@ import { StyledModalContainer } from '../../base/Styled';
 import ShowAlert from '../../base/TMAlert';
 import TMButton from '../../base/TMButton';
 import { useDeviceType, DeviceType } from '../../base/TMDeviceProvider';
-import TMDropDownMenu from '../../base/TMDropDownMenu';
 import { TMExceptionBoxManager } from '../../base/TMPopUp';
 import TMSpinner from '../../base/TMSpinner';
 import TMPanel from '../../base/TMPanel';
@@ -19,6 +18,7 @@ import TMDistinctValues from '../../choosers/TMDistinctValues';
 import { TMMetadataChooserForm } from '../../choosers/TMMetadataChooser';
 import TMQueryEditor from '../../query/TMQueryEditor';
 import TMSavedQueryForm from './TMSavedQueryForm';
+import { ContextMenu } from '../../NewComponents/ContextMenu';
 import { AdvancedMenuButtons } from '../../editors/TMMetadataValues';
 import TMToppyMessage from '../../../helper/TMToppyMessage';
 const TMSearchQueryPanel = ({ fromDTD, showBackToResultButton, isExpertMode = SDKUI_Globals.userSettings.advancedSettings.expertMode === 1, SQD, inputMids, onSearchCompleted, onSqdSaved, onBack, onClosePanel, allowMaximize = true, onMaximizePanel, onBackToResult, passToArchiveCallback }) => {
@@ -299,20 +299,21 @@ const TMSearchQueryPanel = ({ fromDTD, showBackToResultButton, isExpertMode = SD
         }
         setQd({ ...qd, orderBy: newOrderBy });
     }, [qd, fromDTD?.metadata, SQD?.masterTID]);
+    const contextMenuItems = useMemo(() => [
+        ...(showBackToResultButton ? [{ icon: _jsx(IconArrowRight, {}), name: "Vai a risultato", onClick: () => { onBackToResult?.(); } }] : []),
+        { icon: _jsx(IconAddCircleOutline, {}), name: SDKUI_Localizator.SavedQueryNew, beginGroup: showBackToResultButton, onClick: () => { openSqdForm(FormModes.Create); } },
+        { icon: _jsx(IconEdit, {}), name: SDKUI_Localizator.SavedQueryUpdate, disabled: (SQD && SQD.id == 1), onClick: () => { openSqdForm(FormModes.Update); } },
+        { icon: showAdvancedSearch ? _jsx(IconEasy, {}) : _jsx(IconAdvanced, {}), beginGroup: true, name: showAdvancedSearch ? SDKUI_Localizator.Search_Easy : SDKUI_Localizator.Search_Advanced, onClick: () => { changeAdvancedSearchAsync(!showAdvancedSearch); } },
+        { icon: _jsx(IconEdit, {}), name: `${SDKUI_Localizator.Configure} - ${SDK_Localizator.QueryWhere}`, beginGroup: true, onClick: () => { setShowFiltersConfig(true); } },
+        { icon: _jsx(IconEdit, {}), name: `${SDKUI_Localizator.Configure} - ${SDK_Localizator.QuerySelect}`, onClick: () => { setShowOutputConfig(true); } },
+        { icon: _jsx(IconEdit, {}), name: `${SDKUI_Localizator.Configure} - ${SDK_Localizator.QueryOrderBy}`, onClick: () => { setShowOrderByConfig(true); } },
+        { icon: _jsx(IconMenuCAArchive, { viewBox: '11 11.5 26 27', fontSize: 16, strokeWidth: 2, color: 'black' }), beginGroup: true, name: SDKUI_Localizator.PassToArchive, onClick: handlePassToArchive }
+    ], [showBackToResultButton, showAdvancedSearch, SQD, onBackToResult, openSqdForm, changeAdvancedSearchAsync, setShowFiltersConfig, setShowOutputConfig, setShowOrderByConfig, handlePassToArchive]);
     const captionText = showAllMdWhere ? SDKUI_Localizator.ShowLess : SDKUI_Localizator.ShowAll;
     let maxItems = getListMaxItems(deviceType ?? DeviceType.DESKTOP);
     const diff = (qd?.where?.length ?? 0) - maxItems;
     return (_jsxs(_Fragment, { children: [_jsxs(TMPanel, { title: fromDTD?.nameLoc ?? SDKUI_Localizator.Search_Metadata, allowMaximize: allowMaximize, onMaximize: onMaximizePanel, onHeaderDoubleClick: onMaximizePanel, onBack: onBack, onActiveChanged: handlePanelActiveChanged, toolbar: _jsx(_Fragment, { children: (SQD && !showSqdForm) ?
-                        _jsx(TMDropDownMenu, { backgroundColor: 'white', borderRadius: '3px', content: _jsx(TMButton, { btnStyle: 'icon', caption: 'Altro', icon: _jsx(IconMenuVertical, { color: 'white' }), showTooltip: false, onClick: () => setIsQueryPanelActive(true) }), items: [
-                                ...(showBackToResultButton ? [{ icon: _jsx(IconArrowRight, {}), text: "Vai a risultato", onClick: () => { onBackToResult?.(); } }] : []),
-                                { icon: _jsx(IconAddCircleOutline, {}), beginGroup: true, text: SDKUI_Localizator.SavedQueryNew, onClick: () => { openSqdForm(FormModes.Create); } },
-                                { icon: _jsx(IconEdit, {}), text: SDKUI_Localizator.SavedQueryUpdate, disabled: (SQD && SQD.id == 1), onClick: () => { openSqdForm(FormModes.Update); } },
-                                { icon: showAdvancedSearch ? _jsx(IconEasy, {}) : _jsx(IconAdvanced, {}), beginGroup: true, text: showAdvancedSearch ? SDKUI_Localizator.Search_Easy : SDKUI_Localizator.Search_Advanced, onClick: () => { changeAdvancedSearchAsync(!showAdvancedSearch); } },
-                                { icon: _jsx(IconEdit, {}), beginGroup: true, text: `${SDKUI_Localizator.Configure} - ${SDK_Localizator.QueryWhere}`, onClick: () => { setShowFiltersConfig(true); } },
-                                { icon: _jsx(IconEdit, {}), text: `${SDKUI_Localizator.Configure} - ${SDK_Localizator.QuerySelect}`, onClick: () => { setShowOutputConfig(true); } },
-                                { icon: _jsx(IconEdit, {}), text: `${SDKUI_Localizator.Configure} - ${SDK_Localizator.QueryOrderBy}`, onClick: () => { setShowOrderByConfig(true); } },
-                                { icon: _jsx(IconMenuCAArchive, { viewBox: '11 11.5 26 27', fontSize: 16, strokeWidth: 2, color: 'black' }), beginGroup: true, text: SDKUI_Localizator.PassToArchive, onClick: handlePassToArchive }
-                            ], onMenuShown: () => setIsQueryPanelActive(true) })
+                        _jsx(ContextMenu, { items: contextMenuItems, trigger: "left", children: _jsx(TMButton, { btnStyle: 'icon', caption: 'Altro', icon: _jsx(IconMenuVertical, { color: 'white' }), showTooltip: false, onClick: () => setIsQueryPanelActive(true) }) })
                         : _jsx(_Fragment, {}) }), children: [_jsx(ConfirmQueryParamsDialog, {}), SQD
                         ? _jsxs("div", { onContextMenu: (e) => e.preventDefault(), style: { height: '100%', width: '100%', position: 'relative', display: 'flex', flexDirection: 'column', gap: 5 }, children: [showAdvancedSearch
                                     ? _jsx(TMQueryEditor, { formMode: FormModes.Update, showToolbar: false, inputData: qd, validateSelect: true, showApply: false, onQDChanged: handleQdChanged })

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

@@ -1,13 +1,13 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { SDK_Globals, DataColumnTypes, MetadataDataDomains, DataListViewModes, MetadataFormats, LayoutModes, TemplateTIDs, DcmtTypeListCacheService, AccessLevels, SystemMIDsAsNumber, RetrieveFileOptions, DcmtOpers, GeneralRetrieveFormats, AccessLevelsEx, LayoutCacheService, UserListCacheService } from '@topconsultnpm/sdk-ts';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { SDK_Globals, DataColumnTypes, MetadataDataDomains, DataListViewModes, MetadataFormats, LayoutModes, TemplateTIDs, DcmtTypeListCacheService, SystemMIDsAsNumber, RetrieveFileOptions, DcmtOpers, GeneralRetrieveFormats, AccessLevelsEx, LayoutCacheService, UserListCacheService } from '@topconsultnpm/sdk-ts';
 import styled from 'styled-components';
 import { getAllFieldSelectedDcmtsOrFocused, getCommandsMenuItems, getSelectedDcmtsOrFocused } from './TMSearchResultsMenuItems';
-import { genUniqueId, IconShow, IconBoard, IconDcmtTypeSys, IconDetailDcmts, SDKUI_Localizator, IconDelete, IconRefresh, IconMenuVertical, IconDownload, deepCompare, generateUniqueColumnKeys, searchResultDescriptorToSimpleArray, searchResultToMetadataValues, IconSearchCheck, TMCommandsContextMenu, IconCheck, svgToString, TMImageLibrary, convertSearchResultDescriptorToFileItems } from '../../../helper';
+import { genUniqueId, IconShow, IconBoard, IconDcmtTypeSys, SDKUI_Localizator, IconDelete, IconRefresh, IconMenuVertical, deepCompare, generateUniqueColumnKeys, searchResultDescriptorToSimpleArray, searchResultToMetadataValues, IconSearchCheck, IconCheck, svgToString, TMImageLibrary, convertSearchResultDescriptorToFileItems } from '../../../helper';
 import { useDcmtOperations } from '../../../hooks/useDcmtOperations';
 import { useInputAttachmentsDialog, useInputCvtFormatDialog } from '../../../hooks/useInputDialog';
 import { useRelatedDocuments } from '../../../hooks/useRelatedDocuments';
-import { DcmtOperationTypes, SearchResultContext, DownloadTypes } from '../../../ts';
+import { DcmtOperationTypes, SearchResultContext } from '../../../ts';
 import { Gutters, TMColors } from '../../../utils/theme';
 import { StyledModalContainer, StyledMultiViewPanel } from '../../base/Styled';
 import TMButton from '../../base/TMButton';
@@ -21,7 +21,8 @@ import TMMetadataValues from '../../editors/TMMetadataValues';
 import TMDataListItemViewer from '../../viewers/TMDataListItemViewer';
 import TMTidViewer from '../../viewers/TMTidViewer';
 import TMDcmtPreview from '../documents/TMDcmtPreview';
-import TMFloatingToolbar from '../../base/TMFloatingToolbar';
+import TMFloatingMenuBar from '../../NewComponents/FloatingMenuBar/TMFloatingMenuBar';
+import TMContextMenu from '../../NewComponents/ContextMenu/TMContextMenu';
 import { WorkFlowApproveRejectPopUp, WorkFlowMoreInfoPopUp, WorkFlowOperationButtons, WorkFlowReAssignPopUp } from '../workflow/TMWorkflowPopup';
 import TMMasterDetailDcmts from '../documents/TMMasterDetailDcmts';
 import TMBatchUpdateForm from '../../features/documents/TMBatchUpdateForm';
@@ -94,6 +95,7 @@ const TMSearchResult = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallback, a
     // State to control whether the export form (for exporting to Excel/CSV/txt and others) should be shown
     const [showExportForm, setShowExportForm] = useState(false);
     const [showSignSettingsForm, setShowSignSettingsForm] = useState(false);
+    const floatingBarContainerRef = useRef(null);
     const [confirmFormat, ConfirmFormatDialog] = useInputCvtFormatDialog();
     const { openConfirmAttachmentsDialog, ConfirmAttachmentsDialog } = useInputAttachmentsDialog();
     const { abortController, showWaitPanel, waitPanelTitle, showPrimary, waitPanelTextPrimary, waitPanelValuePrimary, waitPanelMaxValuePrimary, showSecondary, waitPanelTextSecondary, waitPanelValueSecondary, waitPanelMaxValueSecondary, downloadDcmtsAsync, runOperationAsync, getDcmtFileAsync } = useDcmtOperations();
@@ -358,7 +360,7 @@ const TMSearchResult = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallback, a
     const customButtonMenuItems = () => {
         const customButtonsItems = customButtonsLayout?.customButtons?.filter((customButton) => customButton.isForSearchResult && customButton.isForSearchResult > 0)
             .map((customButton) => ({
-            icon: svgToString(TMImageLibrary({ imageID: customButton.glyphID, showPath: true })),
+            icon: svgToString(TMImageLibrary({ imageID: customButton.glyphID, showPath: false })),
             text: customButton.title || 'Bottone personalizzato',
             onClick: () => setCustomButton(customButton)
         }));
@@ -570,8 +572,6 @@ const TMSearchResult = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallback, a
                 break;
         }
     };
-    const searchResutlToolbar = _jsxs(_Fragment, { children: [(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.FAVORITES_AND_RECENTS &&
-                _jsx("div", { style: { display: 'flex', alignItems: 'center', gap: '5px' }, children: _jsx(TMButton, { btnStyle: 'icon', icon: _jsx(IconDelete, { color: 'white' }), caption: "Rimuovi da " + (selectedSearchResult?.category === "Favorites" ? '"Preferiti"' : '"Recenti"'), disabled: getSelectedDcmtsOrFocused(selectedItems, focusedItem).length <= 0, onClick: removeDcmtFromFavsOrRecents }) }), _jsx(TMButton, { btnStyle: 'icon', icon: _jsx(IconRefresh, { color: 'white' }), caption: SDKUI_Localizator.Refresh, onClick: onRefreshSearchAsync }), _jsx(IconMenuVertical, { id: `commands-header-${id}`, color: 'white', cursor: 'pointer' }), _jsx(TMCommandsContextMenu, { target: `#commands-header-${id}`, showEvent: "click", menuItems: getCommandsMenuItems(isMobile, fromDTD, allUsers, selectedItems, focusedItem, context, showFloatingBar, workingGroupContext, showSearch, setShowFloatingBar, openFormHandler, openSharedArchiveHandler, showSharedDcmtsHandler, downloadDcmtsAsync, runOperationAsync, onRefreshSearchAsync, refreshSelectionDataRowsAsync, onRefreshAfterAddDcmtToFavs, confirmFormat, openConfirmAttachmentsDialog, openTaskFormHandler, openDetailDcmtsFormHandler, openMasterDcmtsFormHandler, openBatchUpdateFormHandler, openExportForm, handleToggleSearch, handleSignApprove, openSignSettingsForm, handleCheckOutOperationCallback, handleCheckInOperationCallback, showCheckoutInformationFormCallback, showHistoryCallback, copyCheckoutPathToClipboardOperationCallback, openWGsCopyMoveForm, openCommentFormCallback, openEditPdf, openAddDocumentForm, passToArchiveCallback, archiveMasterDocuments, archiveDetailDocuments, currentTIDHasMasterRelations, currentTIDHasDetailRelations, canArchiveMasterRelation, canArchiveDetailRelation, pairManyToMany, hasManyToManyRelation).concat([customButtonMenuItems()]) })] });
     const handleAddItem = (tid, did) => {
         let newItem = { TID: tid ?? 0, DID: did ?? 0 };
         setSecondaryMasterDcmts((prevItems) => [...prevItems, newItem]);
@@ -583,14 +583,38 @@ const TMSearchResult = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallback, a
         await refreshFocusedDataRowAsync(tid, did, true, metadataResult);
     }, [refreshFocusedDataRowAsync]);
     const showToppyForApprove = (isVisible && fromDTD?.templateTID === TemplateTIDs.WF_WIApprView && !isOpenDcmtForm && !isOpenDetails && !isOpenMaster);
+    // Convert TMDataGridContextMenuItem to TMContextMenuItemProps for the floating menu bar
+    const convertToContextMenuItems = (items) => {
+        return items
+            .filter(item => item.visible !== false)
+            .map(item => ({
+            name: item.text,
+            icon: item.icon ? _jsx("div", { dangerouslySetInnerHTML: { __html: item.icon } }) : undefined,
+            disabled: item.disabled,
+            onClick: item.onClick,
+            submenu: item.items ? convertToContextMenuItems(item.items) : undefined,
+            beginGroup: item.beginGroup,
+        }));
+    };
+    const floatingMenuItems = useMemo(() => {
+        const menuItems = getCommandsMenuItems(isMobile, fromDTD, allUsers, selectedItems, focusedItem, context, showFloatingBar, workingGroupContext, showSearch, setShowFloatingBar, openFormHandler, openSharedArchiveHandler, showSharedDcmtsHandler, downloadDcmtsAsync, runOperationAsync, onRefreshSearchAsync, refreshSelectionDataRowsAsync, onRefreshAfterAddDcmtToFavs, confirmFormat, openConfirmAttachmentsDialog, openTaskFormHandler, openDetailDcmtsFormHandler, openMasterDcmtsFormHandler, openBatchUpdateFormHandler, openExportForm, handleToggleSearch, handleSignApprove, openSignSettingsForm, handleCheckOutOperationCallback, handleCheckInOperationCallback, showCheckoutInformationFormCallback, showHistoryCallback, copyCheckoutPathToClipboardOperationCallback, openWGsCopyMoveForm, openCommentFormCallback, openEditPdf, openAddDocumentForm, passToArchiveCallback, archiveMasterDocuments, archiveDetailDocuments, currentTIDHasMasterRelations, currentTIDHasDetailRelations, canArchiveMasterRelation, canArchiveDetailRelation, pairManyToMany, hasManyToManyRelation).concat([customButtonMenuItems()]);
+        return convertToContextMenuItems(menuItems);
+    }, [
+        isMobile, fromDTD, allUsers, selectedItems, focusedItem, context,
+        showFloatingBar, workingGroupContext, showSearch, currentTIDHasMasterRelations,
+        currentTIDHasDetailRelations, canArchiveMasterRelation, canArchiveDetailRelation,
+        hasManyToManyRelation, customButtonsLayout
+    ]);
+    const searchResutlToolbar = _jsxs(_Fragment, { children: [(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.FAVORITES_AND_RECENTS &&
+                _jsx("div", { style: { display: 'flex', alignItems: 'center', gap: '5px' }, children: _jsx(TMButton, { btnStyle: 'icon', icon: _jsx(IconDelete, { color: 'white' }), caption: "Rimuovi da " + (selectedSearchResult?.category === "Favorites" ? '"Preferiti"' : '"Recenti"'), disabled: getSelectedDcmtsOrFocused(selectedItems, focusedItem).length <= 0, onClick: removeDcmtFromFavsOrRecents }) }), _jsx(TMButton, { btnStyle: 'icon', icon: _jsx(IconRefresh, { color: 'white' }), caption: SDKUI_Localizator.Refresh, onClick: onRefreshSearchAsync }), _jsx(TMContextMenu, { items: floatingMenuItems, trigger: "left", children: _jsx(IconMenuVertical, { color: 'white', cursor: 'pointer' }) })] });
     const tmSearchResult = useMemo(() => (!searchResults || searchResults.length <= 0)
         ? _jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', width: '100%' }, children: [_jsx(IconBoard, { fontSize: 96 }), _jsx("div", { style: { fontSize: "15px", marginTop: "10px" }, children: SDKUI_Localizator.NoDcmtFound }), openAddDocumentForm && _jsx("div", { style: { marginTop: "10px" }, children: _jsx(TMButton, { fontSize: "15px", icon: _jsx("i", { className: 'dx-icon-share' }), caption: SDKUI_Localizator.Share, onClick: openAddDocumentForm }) })] })
         :
             _jsxs(_Fragment, { children: [_jsxs(TMLayoutItem, { height: '100%', children: [_jsxs(TMSplitterLayout, { direction: 'horizontal', overflow: 'visible', separatorSize: Gutters.getGutters(), separatorActiveColor: 'transparent', separatorColor: 'transparent', min: ['0', '0'], showSeparator: showSelector && deviceType !== DeviceType.MOBILE, start: showSelector ? deviceType !== DeviceType.MOBILE ? ['30%', '70%'] : splitterSize : ['0%', '100%'], children: [showSelector ?
                                         _jsx(TMLayoutItem, { children: _jsx(TMSearchResultSelector, { searchResults: currentSearchResults, disableAccordionIfSingleCategory: disableAccordionIfSingleCategory, selectedTID: selectedSearchResultTID, selectedSearchResult: selectedSearchResult, autoSelectFirst: !isMobile || currentSearchResults.length === 1, onSelectionChanged: onSearchResultSelectionChanged }) })
                                         :
-                                            _jsx(_Fragment, {}), _jsxs(TMLayoutItem, { children: [_jsx(TMSearchResultGrid, { showSearch: showSearch, fromDTD: fromDTD, allUsers: allUsers, inputFocusedItem: focusedItem, inputSelectedItems: selectedItems, searchResult: searchResults.length > 1 ? selectedSearchResult : searchResults[0], lastUpdateSearchTime: lastUpdateSearchTime, openInOffice: openInOffice, onDblClick: () => openFormHandler(LayoutModes.Update), onContextMenuPreparing: onContextMenuPreparing, onSelectionChanged: (items) => { setSelectedItems(items); }, onVisibleItemChanged: setVisibleItems, onFocusedItemChanged: setFocusedItem, onDownloadDcmtsAsync: async (inputDcmts, downloadType, downloadMode, _y, confirmAttachments) => await downloadDcmtsAsync(inputDcmts, downloadType, downloadMode, onFileOpened, confirmAttachments), showExportForm: showExportForm, onCloseExportForm: onCloseExportForm }), 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 || !focusedItem?.DID, icon: _jsx(IconDownload, { color: 'white' }), onClick: () => { downloadDcmtsAsync(getSelectedDcmtsOrFocused(selectedItems, focusedItem), DownloadTypes.Dcmt, "download"); } }), allowRelations && _jsx(TMButton, { btnStyle: 'icon', disabled: !currentTIDHasDetailRelations || !focusedItem?.DID, icon: _jsx(IconDetailDcmts, { color: 'white' }), caption: SDKUI_Localizator.DcmtsDetail, onClick: () => setIsOpenDetails(true) }), allowRelations && _jsx(TMButton, { btnStyle: 'icon', disabled: !currentTIDHasMasterRelations || !focusedItem?.DID, icon: _jsx(IconDetailDcmts, { color: 'white', transform: 'scale(-1, 1)' }), caption: SDKUI_Localizator.DcmtsMaster, onClick: () => setIsOpenMaster(true) }), _jsx(IconMenuVertical, { id: `commands-floating-${id}`, color: 'white', cursor: 'pointer' }), _jsx(TMCommandsContextMenu, { target: `#commands-floating-${id}`, showEvent: "click", menuItems: getCommandsMenuItems(isMobile, fromDTD, allUsers, selectedItems, focusedItem, context, showFloatingBar, workingGroupContext, showSearch, setShowFloatingBar, openFormHandler, openSharedArchiveHandler, showSharedDcmtsHandler, downloadDcmtsAsync, runOperationAsync, onRefreshSearchAsync, refreshSelectionDataRowsAsync, onRefreshAfterAddDcmtToFavs, confirmFormat, openConfirmAttachmentsDialog, openTaskFormHandler, openDetailDcmtsFormHandler, openMasterDcmtsFormHandler, openBatchUpdateFormHandler, openExportForm, handleToggleSearch, handleSignApprove, openSignSettingsForm, handleCheckOutOperationCallback, handleCheckInOperationCallback, showCheckoutInformationFormCallback, showHistoryCallback, copyCheckoutPathToClipboardOperationCallback, openWGsCopyMoveForm, openCommentFormCallback, openEditPdf, openAddDocumentForm, passToArchiveCallback, archiveMasterDocuments, archiveDetailDocuments, currentTIDHasMasterRelations, currentTIDHasDetailRelations, canArchiveMasterRelation, canArchiveDetailRelation, pairManyToMany, hasManyToManyRelation).concat([customButtonMenuItems()]) })] })] })] }), showApprovePopup && _jsx(WorkFlowApproveRejectPopUp, { deviceType: deviceType, onCompleted: onWFOperationCompleted, selectedItems: getSelectedDcmtsOrFocused(selectedItems, focusedItem), isReject: 0, onClose: () => setShowApprovePopup(false) }), showRejectPopup && _jsx(WorkFlowApproveRejectPopUp, { deviceType: deviceType, onCompleted: onWFOperationCompleted, selectedItems: getSelectedDcmtsOrFocused(selectedItems, focusedItem), isReject: 1, onClose: () => setShowRejectPopup(false) }), showReAssignPopup && _jsx(WorkFlowReAssignPopUp, { deviceType: deviceType, onCompleted: onWFOperationCompleted, selectedItems: getSelectedDcmtsOrFocused(selectedItems, focusedItem), onClose: () => setShowReAssignPopup(false) }), showMoreInfoPopup && _jsx(WorkFlowMoreInfoPopUp, { TID: focusedItem?.TID, DID: focusedItem?.DID, deviceType: deviceType, onCompleted: onWFOperationCompleted, onClose: () => setShowMoreInfoPopup(false) }), isOpenBatchUpdate && _jsx(TMBatchUpdateForm, { isModal: true, titleModal: `${SDKUI_Localizator.BatchUpdate} (${getSelectionDcmtInfo().length} documenti selezionati)`, inputDcmts: getSelectionDcmtInfo(), TID: focusedItem ? focusedItem?.TID : selectedItems[0]?.TID, DID: focusedItem ? focusedItem?.DID : selectedItems[0]?.DID, onBack: () => {
+                                            _jsx(_Fragment, {}), _jsx(TMLayoutItem, { children: _jsxs("div", { ref: floatingBarContainerRef, style: { position: 'relative', height: '100%', width: '100%' }, children: [_jsx(TMSearchResultGrid, { showSearch: showSearch, fromDTD: fromDTD, allUsers: allUsers, inputFocusedItem: focusedItem, inputSelectedItems: selectedItems, searchResult: searchResults.length > 1 ? selectedSearchResult : searchResults[0], lastUpdateSearchTime: lastUpdateSearchTime, openInOffice: openInOffice, onDblClick: () => openFormHandler(LayoutModes.Update), onContextMenuPreparing: onContextMenuPreparing, onSelectionChanged: (items) => { setSelectedItems(items); }, onVisibleItemChanged: setVisibleItems, onFocusedItemChanged: setFocusedItem, onDownloadDcmtsAsync: async (inputDcmts, downloadType, downloadMode, _y, confirmAttachments) => await downloadDcmtsAsync(inputDcmts, downloadType, downloadMode, onFileOpened, confirmAttachments), showExportForm: showExportForm, onCloseExportForm: onCloseExportForm }), allowFloatingBar && showFloatingBar && deviceType !== DeviceType.MOBILE &&
+                                                    _jsx(TMFloatingMenuBar, { containerRef: floatingBarContainerRef, contextMenuItems: floatingMenuItems, storageKey: `floatingMenuBar-search-${groupId || 'default'}`, isConstrained: true, defaultPosition: { x: 10, y: window.innerHeight - 215 }, maxItems: 8 })] }) })] }), showApprovePopup && _jsx(WorkFlowApproveRejectPopUp, { deviceType: deviceType, onCompleted: onWFOperationCompleted, selectedItems: getSelectedDcmtsOrFocused(selectedItems, focusedItem), isReject: 0, onClose: () => setShowApprovePopup(false) }), showRejectPopup && _jsx(WorkFlowApproveRejectPopUp, { deviceType: deviceType, onCompleted: onWFOperationCompleted, selectedItems: getSelectedDcmtsOrFocused(selectedItems, focusedItem), isReject: 1, onClose: () => setShowRejectPopup(false) }), showReAssignPopup && _jsx(WorkFlowReAssignPopUp, { deviceType: deviceType, onCompleted: onWFOperationCompleted, selectedItems: getSelectedDcmtsOrFocused(selectedItems, focusedItem), onClose: () => setShowReAssignPopup(false) }), showMoreInfoPopup && _jsx(WorkFlowMoreInfoPopUp, { TID: focusedItem?.TID, DID: focusedItem?.DID, deviceType: deviceType, onCompleted: onWFOperationCompleted, onClose: () => setShowMoreInfoPopup(false) }), isOpenBatchUpdate && _jsx(TMBatchUpdateForm, { isModal: true, titleModal: `${SDKUI_Localizator.BatchUpdate} (${getSelectionDcmtInfo().length} documenti selezionati)`, inputDcmts: getSelectionDcmtInfo(), TID: focusedItem ? focusedItem?.TID : selectedItems[0]?.TID, DID: focusedItem ? focusedItem?.DID : selectedItems[0]?.DID, onBack: () => {
                                     setIsOpenBatchUpdate(false);
                                 }, onSavedCallbackAsync: async () => {
                                     setIsOpenBatchUpdate(false);
@@ -1033,7 +1057,7 @@ const TMSearchResultGrid = ({ openInOffice, fromDTD, allUsers, inputFocusedItem,
         setVisibleItems(visibleRows.map((row) => { return row.data; }));
     }, []);
     useEffect(() => { onVisibleItemChanged?.(visibleItems); }, [visibleItems]);
-    return _jsxs("div", { style: { width: "100%", height: "100%" }, children: [_jsx(TMDataGrid, { id: "tm-search-result", keyExpr: "rowIndex", dataColumns: dataColumns, dataSource: dataSource, repaintChangesOnly: true, selectedRowKeys: selectedRowKeys, focusedRowKey: Number(focusedItem?.rowIndex ?? 0), showSearchPanel: showSearch, showFilterPanel: true, sorting: { mode: "multiple" }, selection: { mode: allowMultipleSelection ? 'multiple' : 'single' }, pageSize: TMDataGridPageSize.Small, onSelectionChanged: handleSelectionChange, onFocusedRowChanged: handleFocusedRowChange, onRowDblClick: onRowDblClick, onContentReady: onContentReady, onContextMenuPreparing: onContextMenuPreparing, showHeaderColumnChooser: true, onKeyDown: onKeyDown, counterConfig: { show: true } }), (showExportForm && searchResult && onCloseExportForm) && _jsx(TMDataGridExportForm, { dataColumns: dataColumns, dataSource: dataSource, selectedRowKeys: selectedRowKeys, onCloseExportForm: onCloseExportForm, searchResult: searchResult })] });
+    return _jsxs("div", { style: { width: "100%", height: "100%" }, children: [_jsx(TMDataGrid, { id: "tm-search-result", keyExpr: "rowIndex", dataColumns: dataColumns, dataSource: dataSource, repaintChangesOnly: true, selectedRowKeys: selectedRowKeys, focusedRowKey: Number(focusedItem?.rowIndex ?? 0), showSearchPanel: showSearch, showFilterPanel: true, sorting: { mode: "multiple" }, selection: { mode: allowMultipleSelection ? 'multiple' : 'single' }, pageSize: TMDataGridPageSize.Small, onSelectionChanged: handleSelectionChange, onFocusedRowChanged: handleFocusedRowChange, onRowDblClick: onRowDblClick, onContentReady: onContentReady, showHeaderColumnChooser: true, onKeyDown: onKeyDown, onContextMenuPreparing: onContextMenuPreparing, counterConfig: { show: true } }), (showExportForm && searchResult && onCloseExportForm) && _jsx(TMDataGridExportForm, { dataColumns: dataColumns, dataSource: dataSource, selectedRowKeys: selectedRowKeys, onCloseExportForm: onCloseExportForm, searchResult: searchResult })] });
 };
 //#region TMSearchResultSelector
 const StyledItemTemplate = styled.div ` 

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

@@ -141,7 +141,6 @@ export const getCommandsMenuItems = (isMobile, dtd, allUsers, selectedItems, foc
                     text: SDKUI_Localizator.LogDelete,
                     operationType: 'multiRow',
                     disabled: dtd?.perm?.canLogicalDelete !== AccessLevels.Yes ? true : disabledForMultiRow(selectedItems, focusedItem),
-                    beginGroup: true,
                     onClick: async () => {
                         let dcmts = getSelectedDcmtsOrFocused(selectedItems, focusedItem);
                         await runOperationAsync(dcmts, DcmtOperationTypes.LogDelete, dcmts.length <= MAX_DCMTS_FOR_SELECTION_REFRESH ? onRefreshDataRowsAsync : onRefreshSearchAsync);

package/lib/helper/SDKUI_Globals.d.ts

@@ -54,6 +54,16 @@ export declare class SearchSettings {
     mruTIDs: number[];
     defaultTree: number;
     previewThreshold: number;
+    floatingMenuBar: FloatingMenuBarSettings;
+}
+export declare class FloatingMenuBarSettings {
+    orientation: 'horizontal' | 'vertical';
+    pinnedItemIds: string[];
+    itemIds: string[];
+    position: {
+        x: number;
+        y: number;
+    };
 }
 export declare class ArchivingSettings {
     mruTIDs: number[];

package/lib/helper/SDKUI_Globals.js

@@ -98,6 +98,15 @@ export class SearchSettings {
         this.mruTIDs = [];
         this.defaultTree = -1;
         this.previewThreshold = 500; // KB
+        this.floatingMenuBar = new FloatingMenuBarSettings();
+    }
+}
+export class FloatingMenuBarSettings {
+    constructor() {
+        this.orientation = 'horizontal';
+        this.pinnedItemIds = [];
+        this.itemIds = [];
+        this.position = { x: 10, y: globalThis.window?.innerHeight ? globalThis.window.innerHeight - 215 : 100 };
     }
 }
 export class ArchivingSettings {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@topconsultnpm/sdkui-react",
-  "version": "6.20.0-dev1.20",
+  "version": "6.20.0-dev1.22",
   "description": "",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",