@topconsultnpm/sdkui-react 6.20.0-dev1.36 → 6.20.0-dev1.37

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

@@ -200,6 +200,6 @@ const TMContextMenu = ({ items, trigger = 'right', children, externalControl })
                     if (e.key === 'Enter' || e.key === ' ') {
                         handleClick(e);
                     }
-                }, role: "button", tabIndex: 0, style: { display: 'inline-block' }, children: children })), menuState.visible && (_jsxs(_Fragment, { children: [_jsx(S.Overlay, { onClick: handleClose }), _jsxs(S.MenuContainer, { ref: menuRef, "$x": menuState.position.x, "$y": menuState.position.y, "$openLeft": openLeft, "$openUp": openUp, "$isPositioned": isCalculated, "$externalControl": !!externalControl, children: [isMobile && menuState.parentNames.length > 0 && (_jsxs(S.MobileMenuHeader, { children: [_jsx(S.BackButton, { onClick: handleBack, "aria-label": "Go back", children: _jsx(IconArrowLeft, {}) }), _jsx(S.HeaderTitle, { children: currentParentName })] })), renderMenuItems(currentMenu, 0)] }), !isMobile && hoveredSubmenus.map((submenu, idx) => (_jsx(S.Submenu, { "$parentRect": submenu.parentRect, "$openUp": submenu.openUp, "data-submenu": "true", onMouseEnter: handleSubmenuMouseEnter, onMouseLeave: () => handleMouseLeave(submenu.depth), children: renderMenuItems(submenu.items, submenu.depth) }, `submenu-${submenu.depth}-${idx}`)))] }))] }));
+                }, role: "button", tabIndex: 0, style: { display: 'inline-block' }, children: children })), menuState.visible && (_jsxs(_Fragment, { children: [_jsxs(S.MenuContainer, { ref: menuRef, "$x": menuState.position.x, "$y": menuState.position.y, "$openLeft": openLeft, "$openUp": openUp, "$isPositioned": isCalculated, "$externalControl": !!externalControl, children: [isMobile && menuState.parentNames.length > 0 && (_jsxs(S.MobileMenuHeader, { children: [_jsx(S.BackButton, { onClick: handleBack, "aria-label": "Go back", children: _jsx(IconArrowLeft, {}) }), _jsx(S.HeaderTitle, { children: currentParentName })] })), renderMenuItems(currentMenu, 0)] }), !isMobile && hoveredSubmenus.map((submenu, idx) => (_jsx(S.Submenu, { "$parentRect": submenu.parentRect, "$openUp": submenu.openUp, "data-submenu": "true", onMouseEnter: handleSubmenuMouseEnter, onMouseLeave: () => handleMouseLeave(submenu.depth), children: renderMenuItems(submenu.items, submenu.depth) }, `submenu-${submenu.depth}-${idx}`)))] }))] }));
 };
 export default TMContextMenu;

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

@@ -25,7 +25,7 @@ export const MenuContainer = styled.div `
   right: ${props => props.$openLeft ? `${window.innerWidth - props.$x}px` : 'auto'};
   top: ${props => props.$openUp ? 'auto' : `${props.$y}px`};
   bottom: ${props => props.$openUp ? `${window.innerHeight - props.$y}px` : 'auto'};
-  z-index: 10000;
+  z-index: 10100;
   background: #ffffff;
   border-radius: 12px;
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12),
@@ -223,7 +223,7 @@ export const Submenu = styled.div `
     // If openUp is true, anchor to bottom and grow upward
     return props.$openUp ? `${globalThis.innerHeight - props.$parentRect.bottom - 8}px` : 'auto';
 }};
-  z-index: 10001;
+  z-index: 10101;
   background: #ffffff;
   border-radius: 12px;
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12),

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

@@ -1,4 +1,5 @@
 export interface TMContextMenuItemProps {
+    id?: string;
     name: string;
     icon?: React.ReactNode;
     disabled?: boolean;

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

@@ -4,7 +4,7 @@ import { ContextMenu } from '../ContextMenu';
 import ShowAlert from '../../base/TMAlert';
 import TMTooltip from '../../base/TMTooltip';
 import * as S from './styles';
-import { IconApply, IconMenuKebab, IconMenuVertical, IconPencil, IconPin, SDKUI_Globals } from '../../../helper';
+import { IconApply, IconMenuKebab, IconMenuVertical, IconPencil, IconPin, IconUndo, SDKUI_Globals, SDKUI_Localizator } 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 = [], isConstrained = false, defaultPosition = { x: 100, y: 100 }, maxItems = 8, }) => {
     const getDefaultConfig = () => ({
@@ -57,6 +57,19 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
                 : 'horizontal';
             // Validate itemIds
             const validItemIds = Array.isArray(settings.itemIds) ? settings.itemIds : [];
+            // IMPORTANT: Detect old name-based configurations and reset them
+            // Old configs would have saved items, but those items don't have proper IDs from menu items
+            // New IDs are short like 'fav', 'dl', 'open-form', etc.
+            // If we detect old-style data (no items have valid IDs), reset to empty
+            if (validItemIds.length > 0) {
+                // Check if any ID looks like the old format (contains language-specific text or is too long)
+                const hasOldFormatIds = validItemIds.some(id => typeof id === 'string' && (id.length > 20 || id.includes(' ')));
+                if (hasOldFormatIds) {
+                    console.warn('FloatingMenuBar: Detected old name-based configuration, resetting to defaults');
+                    resetFloatingBarSettings();
+                    return getDefaultConfig();
+                }
+            }
             // Check if position was actually saved (not just the default class value)
             const hasSavedPosition = settings.position.x !== 100 || settings.position.y !== 100 || validItemIds.length > 0;
             return {
@@ -89,6 +102,7 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
     const floatingRef = useRef(null);
     const dragOffset = useRef({ x: 0, y: 0 });
     const [dragOverIndex, setDragOverIndex] = useState(null);
+    const stateSnapshot = useRef(null);
     // Use refs to track item IDs without causing re-renders
     const floatingBarItemIds = useRef(new Set());
     const floatingBarItemNames = useRef(new Set());
@@ -101,11 +115,12 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
     const flattenMenuItems = useCallback((items, parentPath = '') => {
         const result = [];
         items.forEach((item, index) => {
-            const itemId = `${parentPath}${item.name}-${index}`;
+            // Use the actual item.id if available, otherwise fall back to generating from name
+            const itemId = item.id || `${parentPath}${item.name}-${index}`;
             // Only add items that have onClick (final actions, not submenu parents)
             if (item.onClick && !item.submenu) {
-                // Check if item is currently in the floating bar
-                const isPinned = state.items.some(i => i.id === itemId || i.name === item.name);
+                // Check if item is currently in the floating bar by ID only
+                const isPinned = state.items.some(i => i.id === itemId);
                 result.push({
                     id: itemId,
                     name: item.name,
@@ -138,10 +153,10 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
     }, []); // Only run once on mount
     const togglePin = useCallback((item) => {
         setState(s => {
-            const isInFloatingBar = s.items.some(i => i.id === item.id || i.name === item.name);
+            const isInFloatingBar = s.items.some(i => i.id === item.id);
             if (isInFloatingBar) {
                 // Remove from floating bar
-                const newItems = s.items.filter(i => i.id !== item.id && i.name !== item.name);
+                const newItems = s.items.filter(i => i.id !== item.id);
                 return { ...s, items: newItems };
             }
             else {
@@ -160,11 +175,14 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
         });
     }, [maxItems]);
     // Get current item state (disabled and onClick) from contextMenuItems
-    const getCurrentItemState = useCallback((itemName) => {
+    const getCurrentItemState = useCallback((itemId) => {
         const findInItems = (items) => {
-            for (const item of items) {
-                if (item.name === itemName)
+            for (let i = 0; i < items.length; i++) {
+                const item = items[i];
+                // Match by ID if the item has one
+                if (item.id === itemId)
                     return item;
+                // Check in submenu
                 if (item.submenu) {
                     const found = findInItems(item.submenu);
                     if (found)
@@ -178,34 +196,34 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
             disabled: foundItem?.disabled,
             onClick: foundItem?.onClick
         };
-    }, [contextMenuItems]); // Enhanced context menu items with pin functionality
-    const enhancedContextMenuItems = useCallback(() => {
+    }, [contextMenuItems]);
+    // Create context menu items for pinning (used by + button in edit mode)
+    const getPinContextMenuItems = useCallback(() => {
         const flatItems = flattenMenuItems(contextMenuItems);
-        // Calculate current pinned items directly from state.items (not refs)
         const currentItemIds = new Set(state.items.map(i => i.id));
-        const currentItemNames = new Set(state.items.map(i => i.name));
-        const enhanceItems = (items) => {
+        const createPinItems = (items) => {
             return items.map(item => {
-                const flatItem = flatItems.find(fi => fi.name === item.name);
-                const itemId = flatItem?.id || '';
-                // Check if item is in the floating bar using current state
-                const isInFloatingBar = currentItemIds.has(itemId) || currentItemNames.has(item.name);
-                const enhanced = {
+                const flatItem = flatItems.find(fi => fi.id === item.id);
+                const itemId = flatItem?.id || item.id || '';
+                const isAlreadyPinned = currentItemIds.has(itemId);
+                const pinItem = {
                     ...item,
-                    rightIcon: item.onClick && !item.submenu ? (isInFloatingBar ? _jsx(IconPin, { color: "#e12a2a" }) : _jsx(IconPin, {})) : undefined,
-                    onRightIconClick: item.onClick && !item.submenu ? () => {
-                        if (flatItem) {
+                    // Override onClick to pin instead of executing the action
+                    onClick: item.onClick && !item.submenu ? () => {
+                        if (flatItem && !isAlreadyPinned) {
                             togglePin(flatItem);
                         }
                     } : undefined,
+                    // Remove original disabled state - only disable already pinned items
+                    disabled: isAlreadyPinned,
                 };
                 if (item.submenu) {
-                    enhanced.submenu = enhanceItems(item.submenu);
+                    pinItem.submenu = createPinItems(item.submenu);
                 }
-                return enhanced;
+                return pinItem;
             });
         };
-        return enhanceItems(contextMenuItems);
+        return createPinItems(contextMenuItems);
     }, [contextMenuItems, flattenMenuItems, togglePin, state.items]);
     const handleMouseDown = (e) => {
         if (state.isConfigMode)
@@ -271,8 +289,10 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
         }
         return undefined;
     }, [state.isDragging, handleMouseMove, handleMouseUp]);
-    // Save to SDKUI_Globals.userSettings whenever config changes (including position)
+    // Save to SDKUI_Globals.userSettings only when NOT in config mode (when applying changes)
     useEffect(() => {
+        if (state.isConfigMode)
+            return; // Don't save during edit mode
         try {
             // Replace the entire object to trigger the Proxy
             SDKUI_Globals.userSettings.searchSettings.floatingMenuBar = {
@@ -284,9 +304,44 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
         catch (error) {
             console.error('Failed to save FloatingMenuBar config:', error);
         }
-    }, [state.orientation, state.items, state.position]);
+    }, [state.orientation, state.items, state.position, state.isConfigMode]);
     const toggleConfigMode = () => {
-        setState(s => ({ ...s, isConfigMode: !s.isConfigMode }));
+        setState(s => {
+            if (!s.isConfigMode) {
+                // Entering edit mode - save snapshot
+                stateSnapshot.current = {
+                    items: [...s.items],
+                    orientation: s.orientation,
+                    position: { ...s.position },
+                };
+                return { ...s, isConfigMode: true };
+            }
+            else {
+                // Exiting edit mode (applying changes) - clear snapshot
+                stateSnapshot.current = null;
+                return { ...s, isConfigMode: false };
+            }
+        });
+    };
+    const handleUndo = () => {
+        if (stateSnapshot.current) {
+            setState(s => ({
+                ...s,
+                items: [...stateSnapshot.current.items],
+                orientation: stateSnapshot.current.orientation,
+                position: { ...stateSnapshot.current.position },
+                isConfigMode: true, // Stay in edit mode
+            }));
+        }
+    };
+    // Check if current state has changed from snapshot
+    const hasChanges = () => {
+        if (!stateSnapshot.current)
+            return false;
+        // Check if items have changed (different IDs or different order)
+        const currentIds = state.items.map(i => i.id).join(',');
+        const snapshotIds = stateSnapshot.current.items.map(i => i.id).join(',');
+        return currentIds !== snapshotIds;
     };
     const toggleOrientation = () => {
         const newOrientation = state.orientation === 'horizontal' ? 'vertical' : 'horizontal';
@@ -385,7 +440,7 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
     };
     return (_jsxs(_Fragment, { children: [_jsx(S.Overlay, { "$visible": state.isConfigMode }), _jsxs(S.FloatingContainer, { ref: floatingRef, "$x": state.position.x, "$y": state.position.y, "$orientation": state.orientation, "$isDragging": state.isDragging, "$isConfigMode": state.isConfigMode, "$isConstrained": isConstrained, children: [_jsx(S.GripHandle, { "$orientation": state.orientation, onMouseDown: handleMouseDown, children: _jsx(IconDraggableDots, {}) }), _jsx(S.Separator, { "$orientation": state.orientation }), state.items.map((item, index) => {
                         // Get current state (disabled and onClick) from contextMenuItems
-                        const currentState = getCurrentItemState(item.name);
+                        const currentState = getCurrentItemState(item.id);
                         const isDisabled = currentState.disabled || false;
                         const currentOnClick = currentState.onClick || item.onClick; // Fallback to stored onClick if not found
                         return (_jsxs(S.DraggableItem, { "$isDragging": state.draggedItemIndex === index, "$isDragOver": dragOverIndex === index && state.draggedItemIndex !== index, draggable: state.isConfigMode, onDragStart: (e) => handleDragStart(e, index), onDragEnter: (e) => handleDragEnter(e, index), onDragOver: handleDragOver, onDragLeave: (e) => handleDragLeave(e, index), onDrop: (e) => handleDrop(e, index), onDragEnd: handleDragEnd, children: [state.isConfigMode ? (_jsx(S.MenuButton, { onClick: () => {
@@ -401,6 +456,9 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
                                                 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, {}) }) }, state.items.map(i => i.id).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, {}) }))] })] }));
+                    }), !state.isConfigMode && contextMenuItems.length > 0 && (_jsx(ContextMenu, { items: contextMenuItems, trigger: "left", children: _jsx(S.ContextMenuButton, { children: _jsx(IconMenuVertical, {}) }) })), state.isConfigMode && state.items.length < maxItems && contextMenuItems.length > 0 && (_jsx(ContextMenu, { items: getPinContextMenuItems(), trigger: "left", children: _jsx(TMTooltip, { content: SDKUI_Localizator.Add, children: _jsx(S.AddButton, { children: " + " }) }) })), _jsx(S.Separator, { "$orientation": state.orientation }), _jsxs(S.ButtonGroup, { "$orientation": state.orientation, children: [state.isConfigMode ? (_jsx(TMTooltip, { content: SDKUI_Localizator.Undo, position: state.orientation === 'horizontal' ? 'right' : 'top', children: _jsx(S.OrientationToggle, { "$orientation": state.orientation, onClick: handleUndo, disabled: !hasChanges(), children: _jsx(IconUndo, {}) }) })) : (_jsx(TMTooltip, { content: state.orientation === 'horizontal' ? 'Verticale' : 'Orizzontale', position: state.orientation === 'horizontal' ? 'right' : 'top', children: _jsx(S.OrientationToggle, { "$orientation": state.orientation, onClick: toggleOrientation, children: _jsx(IconMenuKebab, {}) }) })), _jsx(S.ConfigButton, { onClick: toggleConfigMode, "$isActive": state.isConfigMode, children: state.isConfigMode ?
+                                    _jsx(TMTooltip, { content: SDKUI_Localizator.ApplyAndClose, position: state.orientation === 'horizontal' ? 'right' : 'top', children: _jsx(IconApply, { fontSize: 18 }) })
+                                    :
+                                        _jsx(TMTooltip, { content: SDKUI_Localizator.Configure, position: state.orientation === 'horizontal' ? 'right' : 'top', children: _jsx(IconPencil, { fontSize: 18 }) }) })] })] })] }));
 };
 export default TMFloatingMenuBar;

package/lib/components/NewComponents/FloatingMenuBar/styles.d.ts

@@ -35,6 +35,7 @@ export declare const ContextMenuButton: import("styled-components/dist/types").I
 }, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement> | null | undefined;
 }, never>> & string;
+export declare const AddButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
 export declare const RemoveButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
 export declare const OrientationToggle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
     $orientation: "horizontal" | "vertical";
@@ -44,3 +45,6 @@ export declare const DraggableItem: import("styled-components/dist/types").IStyl
     $isDragOver: boolean;
 }>> & string;
 export declare const ContextMenuWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ButtonGroup: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $orientation: "horizontal" | "vertical";
+}>> & string;

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

@@ -41,14 +41,13 @@ export const FloatingContainer = styled.div.attrs(props => ({
   display: flex;
   flex-direction: ${props => props.$orientation === 'horizontal' ? 'row' : 'column'};
   align-items: center;
-  background: ${props => props.$isDragging || props.$isConfigMode
-    ? 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
-    : 'rgba(102, 126, 234, 0.9)'};
-  border: 1px solid rgba(255, 255, 255, 0.2);
+  background: linear-gradient(135deg, #0071BC 0%, #1B1464 100%);
+  border: 1px solid #667eea;
   border-radius: 14px;
   padding: 6px;
   gap: 3px;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3),
+              0 6px 16px rgba(0, 0, 0, 0.2);
   cursor: ${props => props.$isDragging ? 'grabbing' : 'default'};
   user-select: none;
   animation: ${props => props.$isConfigMode && css `${shake} 0.3s ease-in-out`};
@@ -62,10 +61,8 @@ export const FloatingContainer = styled.div.attrs(props => ({
   }
 
   [data-theme='dark'] & {
-    background: ${props => props.$isDragging || props.$isConfigMode
-    ? 'linear-gradient(135deg, #1a1a2e 0%, #16213e 100%)'
-    : 'rgba(26, 26, 46, 0.9)'};
-    border-color: rgba(255, 255, 255, 0.1);
+    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+    border: 1px solid #1a1a2e;
     
     &:hover {
       background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
@@ -143,35 +140,29 @@ export const ConfigButton = styled.button `
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 28px;
-  height: 28px;
-  background: ${props => props.$isActive
-    ? 'rgba(0, 0, 0, 0.2)'
-    : 'rgba(0, 0, 0, 0.1)'};
-  border: 1px solid ${props => props.$isActive
-    ? 'rgba(255, 255, 255, 0.3)'
-    : 'rgba(255, 255, 255, 0.15)'};
-  border-radius: 8px;
-  color: white;
-  font-size: 14px;
+  width: 20px;
+  height: 20px;
+  background: transparent;
+  border: none;
+  border-radius: 4px;
+  color: ${props => props.$isActive ? 'rgba(255, 255, 255, 0.8)' : 'rgba(255, 255, 255, 0.5)'};
+  font-size: 10px;
   cursor: pointer;
-  transition: background 0.2s ease, border-color 0.2s ease;
-  position: relative;
+  transition: all 0.2s ease;
+  padding: 0px;
 
   &:hover {
-    background: ${props => props.$isActive
-    ? 'rgba(0, 0, 0, 0.25)'
-    : 'rgba(0, 0, 0, 0.15)'};
-    border-color: rgba(255, 255, 255, 0.35);
+    background: rgba(255, 255, 255, 0.1);
+    color: rgba(255, 255, 255, 0.8);
   }
 
   &:active {
-    opacity: 0.8;
+    transform: scale(0.9);
   }
 
   svg {
-    width: 16px;
-    height: 16px;
+    width: 14px;
+    height: 14px;
   }
 `;
 export const ContextMenuButton = styled(MenuButton) `
@@ -179,6 +170,34 @@ export const ContextMenuButton = styled(MenuButton) `
     transform: translateY(0);
   }
 `;
+export const AddButton = styled.button `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  background: rgba(255, 255, 255, 0.15);
+  border: 1px dashed rgba(255, 255, 255, 0.4);
+  border-radius: 8px;
+  color: white;
+  font-size: 20px;
+  font-weight: bold;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  position: relative;
+  margin-right: 6px;
+  margin-left: 8px;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.25);
+    border-color: rgba(255, 255, 255, 0.6);
+    transform: scale(1.05);
+  }
+
+  &:active {
+    transform: scale(0.95);
+  }
+`;
 export const RemoveButton = styled.button `
   position: absolute;
   top: -6px;
@@ -222,20 +241,25 @@ export const OrientationToggle = styled.button `
   cursor: pointer;
   transition: all 0.2s ease;
   padding: 2px;
-  transform: ${props => props.$orientation === 'vertical' ? 'rotate(90deg)' : 'rotate(0deg)'};
+  transform: ${props => props.$orientation === 'horizontal' ? 'rotate(90deg)' : 'rotate(0deg)'};
 
-  &:hover {
+  &:hover:not(:disabled) {
     background: rgba(255, 255, 255, 0.1);
     color: rgba(255, 255, 255, 0.8);
   }
 
-  &:active {
-    transform: ${props => props.$orientation === 'vertical' ? 'rotate(90deg) scale(0.9)' : 'scale(0.9)'};
+  &:active:not(:disabled) {
+    transform: ${props => props.$orientation === 'horizontal' ? 'rotate(90deg) scale(0.9)' : 'scale(0.9)'};
+  }
+
+  &:disabled {
+    opacity: 0.3;
+    cursor: not-allowed;
   }
 
   svg {
-    width: 10px;
-    height: 10px;
+    width: 14px;
+    height: 14px;
   }
 `;
 export const DraggableItem = styled.div `
@@ -275,3 +299,9 @@ export const ContextMenuWrapper = styled.div `
   position: static;
   display: contents;
 `;
+export const ButtonGroup = styled.div `
+  display: flex;
+  flex-direction: ${props => props.$orientation === 'horizontal' ? 'column' : 'row'};
+  align-items: center;
+  gap: ${props => props.$orientation === 'horizontal' ? '0px' : '4px'};
+`;

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

@@ -88,6 +88,7 @@ export const getCommandsMenuItems = (isMobile, dtd, allUsers, selectedItems, foc
     }
     const addToFavoriteMenuItem = () => {
         return {
+            id: 'fav',
             icon: _jsx(IconStar, {}),
             name: SDKUI_Localizator.AddTo + ' ' + SDKUI_Localizator.Favorites,
             operationType: 'multiRow',
@@ -97,6 +98,7 @@ export const getCommandsMenuItems = (isMobile, dtd, allUsers, selectedItems, foc
     };
     const addReplaceFileMenuItem = () => {
         return {
+            id: 'repl',
             icon: _jsx(IconSubstFile, {}),
             name: SDKUI_Localizator.AddOrSubstFile,
             operationType: 'singleRow',
@@ -106,6 +108,7 @@ export const getCommandsMenuItems = (isMobile, dtd, allUsers, selectedItems, foc
     };
     const openFormMenuItem = () => {
         return {
+            id: 'open-form',
             icon: _jsx(IconPreview, {}),
             name: SDKUI_Localizator.OpenForm,
             operationType: 'singleRow',
@@ -115,12 +118,14 @@ export const getCommandsMenuItems = (isMobile, dtd, allUsers, selectedItems, foc
     };
     const deletetionMenuItem = () => {
         return {
+            id: 'del',
             icon: _jsx(IconDelete, {}),
             name: SDKUI_Localizator.Deletion,
             operationType: 'multiRow',
             disabled: disabledForMultiRow(selectedItems, focusedItem),
             submenu: [
                 {
+                    id: 'del-log',
                     icon: _jsx(IconDelete, {}),
                     name: SDKUI_Localizator.LogDelete,
                     operationType: 'multiRow',
@@ -131,6 +136,7 @@ export const getCommandsMenuItems = (isMobile, dtd, allUsers, selectedItems, foc
                     }
                 },
                 {
+                    id: 'del-rest',
                     icon: _jsx(IconUndo, {}),
                     name: SDKUI_Localizator.Restore,
                     operationType: 'multiRow',
@@ -141,6 +147,7 @@ export const getCommandsMenuItems = (isMobile, dtd, allUsers, selectedItems, foc
                     }
                 },
                 {
+                    id: 'del-phys',
                     icon: _jsx(IconCloseCircle, {}),
                     name: SDKUI_Localizator.PhysDelete,
                     operationType: 'multiRow',
@@ -152,6 +159,7 @@ export const getCommandsMenuItems = (isMobile, dtd, allUsers, selectedItems, foc
     };
     const fileCheckMenuItem = () => {
         return {
+            id: 'chk',
             icon: _jsx(IconCheckFile, {}),
             name: SDKUI_Localizator.FileCheck,
             operationType: 'multiRow',
@@ -161,6 +169,7 @@ export const getCommandsMenuItems = (isMobile, dtd, allUsers, selectedItems, foc
     };
     const fileConversionsMenuItem = () => {
         return {
+            id: 'conv',
             icon: _jsx(IconConvertFilePdf, {}),
             name: SDKUI_Localizator.FileConversion,
             operationType: 'multiRow',
@@ -176,6 +185,7 @@ export const getCommandsMenuItems = (isMobile, dtd, allUsers, selectedItems, foc
     };
     const createContextualTaskMenuItem = () => {
         return {
+            id: 'task',
             icon: _jsx(IconActivity, {}),
             name: SDKUI_Localizator.CreateContextualTask,
             operationType: 'singleRow',
@@ -185,6 +195,7 @@ export const getCommandsMenuItems = (isMobile, dtd, allUsers, selectedItems, foc
     };
     const downloadFileMenuItem = () => {
         return {
+            id: 'dl',
             icon: _jsx(IconDownload, {}),
             operationType: 'multiRow',
             disabled: dtd?.perm?.canRetrieveFile !== AccessLevels.Yes ? true : disabledForMultiRow(selectedItems, focusedItem),
@@ -193,6 +204,7 @@ export const getCommandsMenuItems = (isMobile, dtd, allUsers, selectedItems, foc
     };
     const downloadXMLAttachmentsMenuItem = () => {
         return {
+            id: 'dl-xml',
             icon: _jsx(IconDownload, {}),
             operationType: 'singleRow',
             disabled: !isXMLFileExt(getSelectedDcmtsOrFocused(selectedItems, focusedItem)?.[0]?.FILEEXT) ? true : disabledForSingleRow(selectedItems, focusedItem),
@@ -201,6 +213,7 @@ export const getCommandsMenuItems = (isMobile, dtd, allUsers, selectedItems, foc
     };
     const duplicateDocumentMenuItem = () => {
         return {
+            id: 'dup',
             icon: _jsx(IconArchiveDoc, {}),
             name: SDKUI_Localizator.DuplicateDocument,
             operationType: 'singleRow',
@@ -210,6 +223,7 @@ export const getCommandsMenuItems = (isMobile, dtd, allUsers, selectedItems, foc
     };
     const batchUpdateMenuItem = () => {
         return {
+            id: 'batch',
             icon: _jsx(IconBatchUpdate, {}),
             name: SDKUI_Localizator.BatchUpdate,
             operationType: 'multiRow',
@@ -219,6 +233,7 @@ export const getCommandsMenuItems = (isMobile, dtd, allUsers, selectedItems, foc
     };
     const passToArchive = () => {
         return {
+            id: 'p2a',
             icon: _jsx(IconMenuCAArchive, { fontSize: 16, viewBox: '11 11.5 26 27', strokeWidth: 2, color: 'black' }),
             name: SDKUI_Localizator.PassToArchive,
             operationType: 'singleRow',
@@ -262,6 +277,7 @@ export const getCommandsMenuItems = (isMobile, dtd, allUsers, selectedItems, foc
         // Determine whether the menu item should be disabled
         const isDisabled = !canSubstitute || disabledForSingleRow(selectedItems, focusedItem) || !isPdf || isSigned;
         return {
+            id: 'pdf-ed',
             icon: _jsx(IconEdit, {}),
             name: "PDF Editor",
             operationType: 'singleRow',
@@ -271,11 +287,13 @@ export const getCommandsMenuItems = (isMobile, dtd, allUsers, selectedItems, foc
     };
     const signatureMenuItem = () => {
         return {
+            id: 'sign',
             icon: _jsx(IconSignaturePencil, {}),
             name: SDKUI_Localizator.Signature,
             disabled: disabledForSingleRow(selectedItems, focusedItem) && disabledForMultiRow(selectedItems, focusedItem),
             submenu: [
                 {
+                    id: 'sign-do',
                     icon: _jsx(IconSignaturePencil, {}),
                     operationType: 'singleRow',
                     disabled: disabledForSingleRow(selectedItems, focusedItem),
@@ -290,6 +308,7 @@ export const getCommandsMenuItems = (isMobile, dtd, allUsers, selectedItems, foc
                     onClick: openSignSettingsForm
                 }, */
                 {
+                    id: 'sign-info',
                     icon: _jsx(IconCircleInfo, {}),
                     name: SDKUI_Localizator.SignatureInformation,
                     operationType: 'singleRow',
@@ -297,6 +316,7 @@ export const getCommandsMenuItems = (isMobile, dtd, allUsers, selectedItems, foc
                     onClick: () => signatureInformationCallback(isMobile, getSelectedDcmtsOrFocused(selectedItems, focusedItem))
                 },
                 {
+                    id: 'sign-verify',
                     icon: _jsx(IconCheckIn, {}),
                     name: SDKUI_Localizator.VerifySignature,
                     operationType: 'multiRow',
@@ -313,42 +333,49 @@ export const getCommandsMenuItems = (isMobile, dtd, allUsers, selectedItems, foc
         const firstDoc = selectedDocs?.[0];
         const { cicoEnabled, checkoutStatus } = getDcmtCicoStatus(firstDoc, allUsers, dtd);
         return {
+            id: 'cico',
             icon: _jsx(IconFileDots, {}),
             name: "Check in/Check out",
             disabled: firstDoc === undefined || disabledForSingleRow(selectedItems, focusedItem),
             submenu: [
                 {
-                    icon: _jsx("span", { className: "dx-icon-edit" }),
+                    id: 'co',
+                    icon: _jsx("span", { style: { fontSize: '18px' }, className: "dx-icon-edit" }),
                     name: 'Check out',
                     disabled: !cicoEnabled || checkoutStatus.isCheckedOut || disabledForSingleRow(selectedItems, focusedItem),
                     onClick: () => handleCheckOutOperationCallback(true),
                 },
                 {
-                    icon: _jsx("span", { className: "dx-icon-unlock" }),
+                    id: 'ci',
+                    icon: _jsx("span", { style: { fontSize: '18px' }, className: "dx-icon-unlock" }),
                     name: 'Check in',
                     onClick: () => handleCheckInOperationCallback(),
                     disabled: !cicoEnabled || !checkoutStatus.isCheckedOut || checkoutStatus.mode === 'lockMode' || disabledForSingleRow(selectedItems, focusedItem)
                 },
                 {
-                    icon: _jsx("span", { className: "dx-icon-remove" }),
+                    id: 'co-cancel',
+                    icon: _jsx("span", { style: { fontSize: '18px' }, className: "dx-icon-remove" }),
                     name: SDKUI_Localizator.CancelCheckOut,
                     disabled: !cicoEnabled || !checkoutStatus.isCheckedOut || checkoutStatus.mode === 'lockMode' || disabledForSingleRow(selectedItems, focusedItem),
                     onClick: () => handleCheckOutOperationCallback(false),
                 },
                 {
-                    icon: _jsx("span", { className: "dx-icon-info" }),
+                    id: 'co-info',
+                    icon: _jsx("span", { style: { fontSize: '18px' }, className: "dx-icon-info" }),
                     name: SDKUI_Localizator.CheckoutInfo,
                     onClick: showCheckoutInformationFormCallback,
                     disabled: !checkoutStatus.isCheckedOut || disabledForSingleRow(selectedItems, focusedItem)
                 },
                 {
-                    icon: _jsx("span", { className: "dx-icon-copy" }),
+                    id: 'co-path',
+                    icon: _jsx("span", { style: { fontSize: '18px' }, className: "dx-icon-copy" }),
                     name: SDKUI_Localizator.CopyCheckoutPath,
                     onClick: copyCheckoutPathToClipboardOperationCallback,
                     disabled: !checkoutStatus.isCheckedOut || disabledForSingleRow(selectedItems, focusedItem)
                 },
                 {
-                    icon: _jsx("span", { className: "dx-icon-clock" }),
+                    id: 'co-hist',
+                    icon: _jsx("span", { style: { fontSize: '18px' }, className: "dx-icon-clock" }),
                     name: SDKUI_Localizator.History,
                     disabled: !cicoEnabled || disabledForSingleRow(selectedItems, focusedItem),
                     onClick: viewHistoryCallback,
@@ -358,12 +385,14 @@ export const getCommandsMenuItems = (isMobile, dtd, allUsers, selectedItems, foc
     };
     const relationsMenuItem = () => {
         return {
+            id: 'rel',
             icon: _jsx(IconRelation, {}),
             name: SDKUI_Localizator.Relations,
             operationType: 'multiRow',
             disabled: disabledForMultiRow(selectedItems, focusedItem),
             submenu: [
                 {
+                    id: 'rel-pair',
                     icon: _jsx(IconPair, {}),
                     name: SDKUI_Localizator.MatchManyDocumentsManyToMany,
                     operationType: 'multiRow',
@@ -371,6 +400,7 @@ export const getCommandsMenuItems = (isMobile, dtd, allUsers, selectedItems, foc
                     onClick: async () => await pairManyToManyDocuments?.(true)
                 },
                 {
+                    id: 'rel-unpair',
                     icon: _jsx(IconUnpair, {}),
                     name: SDKUI_Localizator.UnmatchManyDocumentsManyToMany,
                     operationType: 'multiRow',
@@ -378,6 +408,7 @@ export const getCommandsMenuItems = (isMobile, dtd, allUsers, selectedItems, foc
                     onClick: async () => await pairManyToManyDocuments?.(false)
                 },
                 {
+                    id: 'rel-ark-mst',
                     icon: _jsx(IconArchiveMaster, {}),
                     name: SDKUI_Localizator.ArchiveMasterDocument,
                     operationType: 'multiRow',
@@ -386,6 +417,7 @@ export const getCommandsMenuItems = (isMobile, dtd, allUsers, selectedItems, foc
                     onClick: async () => await archiveMasterDocuments?.(focusedItem?.TID)
                 },
                 {
+                    id: 'rel-ark-det',
                     icon: _jsx(IconArchiveDetail, {}),
                     name: SDKUI_Localizator.ArchiveDetailDocument,
                     operationType: 'multiRow',
@@ -393,6 +425,7 @@ export const getCommandsMenuItems = (isMobile, dtd, allUsers, selectedItems, foc
                     onClick: async () => await archiveDetailDocuments?.(focusedItem?.TID)
                 },
                 {
+                    id: 'rel-mst',
                     icon: _jsx(IconDetailDcmts, { transform: 'scale(-1, 1)' }),
                     name: SDKUI_Localizator.DcmtsMaster,
                     operationType: 'singleRow',
@@ -402,6 +435,7 @@ export const getCommandsMenuItems = (isMobile, dtd, allUsers, selectedItems, foc
                     onClick: () => openMasterDcmtsFormHandler?.(true)
                 },
                 {
+                    id: 'rel-det',
                     icon: _jsx(IconDetailDcmts, {}),
                     name: SDKUI_Localizator.DcmtsDetail,
                     operationType: 'multiRow',
@@ -414,12 +448,14 @@ export const getCommandsMenuItems = (isMobile, dtd, allUsers, selectedItems, foc
     };
     const sharedDcmtsMenuItem = () => {
         return {
+            id: 'shr',
             icon: _jsx(IconSharedDcmt, {}),
             name: SDKUI_Localizator.SharedDocuments,
             operationType: 'multiRow',
             disabled: disabledForMultiRow(selectedItems, focusedItem),
             submenu: [
                 {
+                    id: 'shr-ark',
                     icon: _jsx(IconSharedDcmt, {}),
                     name: SDKUI_Localizator.SharedArchiving,
                     operationType: 'singleRow',
@@ -427,6 +463,7 @@ export const getCommandsMenuItems = (isMobile, dtd, allUsers, selectedItems, foc
                     onClick: async () => { await openSharedArchiveHandler(); }
                 },
                 {
+                    id: 'shr-show',
                     icon: _jsx(IconSharedDcmt, {}),
                     name: SDKUI_Localizator.ShowSharedDocuments,
                     operationType: 'multiRow',
@@ -462,12 +499,14 @@ export const getCommandsMenuItems = (isMobile, dtd, allUsers, selectedItems, foc
     } */
     const fullTextSearchMenuItem = () => {
         return {
+            id: 'ft',
             icon: _jsx(IconSearch, {}),
             name: SDKUI_Localizator.FullTextSearch,
             operationType: 'multiRow',
             disabled: disabledForMultiRow(selectedItems, focusedItem),
             submenu: [
                 {
+                    id: 'ft-info',
                     icon: _jsx(IconInfo, {}),
                     name: SDKUI_Localizator.IndexingInformation,
                     operationType: 'singleRow',
@@ -488,6 +527,7 @@ export const getCommandsMenuItems = (isMobile, dtd, allUsers, selectedItems, foc
                     }
                 },
                 {
+                    id: 'ft-idx',
                     icon: _jsx(IconArchiveDoc, {}),
                     name: SDKUI_Localizator.IndexOrReindex,
                     operationType: 'multiRow',
@@ -495,6 +535,7 @@ export const getCommandsMenuItems = (isMobile, dtd, allUsers, selectedItems, foc
                     onClick: async () => { await runOperationAsync(getSelectedDcmtsOrFocused(selectedItems, focusedItem), DcmtOperationTypes.FreeSearchReindex); }
                 },
                 {
+                    id: 'ft-del',
                     icon: _jsx(IconDelete, {}),
                     name: SDKUI_Localizator.IndexingDelete,
                     operationType: 'multiRow',
@@ -503,6 +544,7 @@ export const getCommandsMenuItems = (isMobile, dtd, allUsers, selectedItems, foc
                 },
                 ...(focusedItem?.FTExplanations !== undefined
                     ? [{
+                            id: 'ft-det',
                             icon: _jsx(IconPlatform, {}),
                             name: SDKUI_Localizator.ResultDetails,
                             operationType: 'singleRow',
@@ -516,16 +558,19 @@ export const getCommandsMenuItems = (isMobile, dtd, allUsers, selectedItems, foc
     };
     const otherMenuItem = () => {
         return {
+            id: 'oth',
             icon: _jsx(IconDotsVerticalCircleOutline, {}),
             name: SDKUI_Localizator.Other,
             submenu: [
                 {
+                    id: 'oth-search',
                     icon: _jsx(IconSearch, {}),
                     name: showSearch ? SDKUI_Localizator.HideSearch : SDKUI_Localizator.ShowSearch,
                     disabled: false,
                     onClick: handleToggleSearch
                 },
                 {
+                    id: 'oth-exp',
                     icon: _jsx(IconExportTo, {}),
                     name: SDKUI_Localizator.ExportTo,
                     operationType: 'multiRow',
@@ -539,6 +584,7 @@ export const getCommandsMenuItems = (isMobile, dtd, allUsers, selectedItems, foc
                 //     onClick: () => ShowAlert({ message: "TODO Mostra footer", mode: 'info', title: `${"TODO"}`, duration: 3000 })
                 // },
                 {
+                    id: 'oth-float',
                     icon: showFloatingBar ? _jsx(IconHide, {}) : _jsx(IconShow, {}),
                     name: showFloatingBar ? SDKUI_Localizator.HideFloatingBar : SDKUI_Localizator.ShowFloatingBar,
                     disabled: false,
@@ -573,6 +619,7 @@ export const getCommandsMenuItems = (isMobile, dtd, allUsers, selectedItems, foc
     };
     const shareFromWgMenuItem = () => {
         return {
+            id: 'wg-share',
             icon: _jsx(IconShare, {}),
             name: SDKUI_Localizator.Share,
             visible: workingGroupContext !== undefined && openAddDocumentForm !== undefined,
@@ -582,6 +629,7 @@ export const getCommandsMenuItems = (isMobile, dtd, allUsers, selectedItems, foc
     };
     const copyFromWgMenuItem = () => {
         return {
+            id: 'wg-copy',
             icon: _jsx(IconCopy, {}),
             name: SDKUI_Localizator.CopyToDrafts,
             operationType: 'multiRow',
@@ -592,6 +640,7 @@ export const getCommandsMenuItems = (isMobile, dtd, allUsers, selectedItems, foc
     };
     const movetofolderFromWgMenuItem = () => {
         return {
+            id: 'wg-move',
             icon: _jsx(IconMoveToFolder, {}),
             name: !isMobile ? SDKUI_Localizator.CopyToArchivedDocuments : SDKUI_Localizator.CopyToArchived,
             operationType: 'multiRow',
@@ -602,6 +651,7 @@ export const getCommandsMenuItems = (isMobile, dtd, allUsers, selectedItems, foc
     };
     const commentFromWgMenuItem = (beginGroup) => {
         return {
+            id: 'wg-cmt',
             icon: _jsx("span", { className: "dx-icon-chat" }),
             name: SDKUI_Localizator.Comment,
             operationType: 'multiRow',
@@ -613,6 +663,7 @@ export const getCommandsMenuItems = (isMobile, dtd, allUsers, selectedItems, foc
     };
     const removeFromWgMenuItem = (name) => {
         return {
+            id: 'wg-rm',
             icon: _jsx(IconDelete, {}),
             name: name,
             operationType: 'multiRow',
@@ -647,6 +698,7 @@ export const getCommandsMenuItems = (isMobile, dtd, allUsers, selectedItems, foc
     const getDefaultMenuItems = () => {
         return [
             {
+                id: 'doc',
                 icon: _jsx(IconFileDots, {}),
                 name: !isMobile ? SDKUI_Localizator.DocumentOperations : SDKUI_Localizator.Documents,
                 disabled: disabledForSingleRow(selectedItems, focusedItem) && disabledForMultiRow(selectedItems, focusedItem),
@@ -674,6 +726,7 @@ export const getCommandsMenuItems = (isMobile, dtd, allUsers, selectedItems, foc
             fullTextSearchMenuItem(),
             otherMenuItem(),
             {
+                id: 'wg',
                 icon: _jsx(IconUserGroupOutline, {}),
                 name: !isMobile ? SDKUI_Localizator.WorkgroupOperations : SDKUI_Localizator.WorkingGroups,
                 operationType: 'multiRow',

package/lib/helper/SDKUI_Globals.js

@@ -105,7 +105,7 @@ export class SearchSettings {
 export class FloatingMenuBarSettings {
     constructor() {
         this.orientation = 'horizontal';
-        this.itemIds = [];
+        this.itemIds = ['rel-det', 'rel-mst', 'dl'];
         this.position = { x: 10, y: globalThis.window?.innerHeight ? globalThis.window.innerHeight - 215 : 100 };
     }
 }

package/package.json

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