@topconsultnpm/sdkui-react 6.20.0-dev1.113 → 6.20.0-dev1.114

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

@@ -12,6 +12,8 @@ const TMContextMenu = ({ items, trigger = 'right', children, target, externalCon
         parentNames: [],
     });
     const [hoveredSubmenus, setHoveredSubmenus] = useState([]);
+    // Tracks items whose rightIconProps have been clicked, so the icon color flips immediately
+    const [toggledItemIds, setToggledItemIds] = useState(new Set());
     const isMobile = useIsMobile();
     const isIOS = useIsIOS();
     const menuRef = useRef(null);
@@ -35,6 +37,7 @@ const TMContextMenu = ({ items, trigger = 'right', children, target, externalCon
             }));
         }
         setHoveredSubmenus([]);
+        setToggledItemIds(new Set());
     };
     // Sync with external control when provided
     useEffect(() => {
@@ -247,8 +250,17 @@ const TMContextMenu = ({ items, trigger = 'right', children, target, externalCon
     const handleContextMenu = (e) => {
         if (trigger === 'right') {
             e.preventDefault();
-            e.stopPropagation(); // Prevent event from bubbling to close other menus prematurely
-            // Small delay to ensure other menus receive the contextmenu event and close first
+            // Close any other open context menus by dispatching a synthetic contextmenu event to document
+            // This triggers the document listener in other ContextMenu instances to close them
+            const syntheticEvent = new MouseEvent('contextmenu', {
+                bubbles: true,
+                cancelable: true,
+                clientX: -1000, // Position outside viewport so it doesn't interfere
+                clientY: -1000,
+            });
+            document.dispatchEvent(syntheticEvent);
+            e.stopPropagation(); // Prevent event from bubbling after closing others
+            // Small delay to ensure other menus close first
             setTimeout(() => {
                 setMenuState({
                     visible: true,
@@ -421,13 +433,36 @@ const TMContextMenu = ({ items, trigger = 'right', children, target, externalCon
                 e.stopPropagation();
                 handleItemClick(item);
             };
-            const handleRightIconClick = (e) => {
+            const handleRightIconPropsClick = (e) => {
+                e.preventDefault();
                 e.stopPropagation();
-                // if (item.disabled) return;
-                item.onRightIconClick?.();
-                handleClose();
+                e.nativeEvent.stopImmediatePropagation();
+                item.rightIconProps?.onClick?.();
+                if (item.id) {
+                    setToggledItemIds(prev => {
+                        const next = new Set(prev);
+                        if (next.has(item.id))
+                            next.delete(item.id);
+                        else
+                            next.add(item.id);
+                        return next;
+                    });
+                }
             };
-            return (_jsxs(S.MenuItem, { "$disabled": item.disabled, "$hasSubmenu": !!item.submenu && item.submenu.length > 0, "$beginGroup": item.beginGroup, "data-disabled": item.disabled ? "true" : undefined, 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));
+            // rightIconProps takes precedence over rightIcon
+            let rightIconElement = null;
+            let rightIconClickHandler = null;
+            if (item.rightIconProps) {
+                const rip = item.rightIconProps;
+                const wasToggled = item.id ? toggledItemIds.has(item.id) : false;
+                const isActive = wasToggled ? !rip.isActive : rip.isActive;
+                const color = isActive ? (rip.activeColor || '#d32f2f') : (rip.inactiveColor || '#626262');
+                rightIconElement = _jsx("span", { style: { color, display: 'flex', alignItems: 'center' }, children: rip.icon });
+                if (rip.onClick) {
+                    rightIconClickHandler = handleRightIconPropsClick;
+                }
+            }
+            return (_jsxs(S.MenuItem, { "$disabled": item.disabled, "$hasSubmenu": !!item.submenu && item.submenu.length > 0, "$beginGroup": item.beginGroup, "data-disabled": item.disabled ? "true" : undefined, 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 })] }), rightIconElement && rightIconClickHandler ? (_jsx(S.RightIconButton, { onClick: rightIconClickHandler, onMouseDown: (e) => e.stopPropagation(), "aria-label": `Action for ${item.name}`, children: rightIconElement })) : rightIconElement ? (_jsx(S.IconWrapper, { children: rightIconElement })) : null, item.submenu && item.submenu.length > 0 && (_jsx(S.SubmenuIndicator, { "$isMobile": isMobile, children: isMobile ? '›' : '▸' }))] }, itemKey));
         });
     };
     const currentParentName = menuState.parentNames.at(-1) || '';

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

@@ -1,3 +1,10 @@
+export interface RightIconProps {
+    icon: React.ReactNode;
+    activeColor?: string;
+    inactiveColor?: string;
+    isActive?: boolean;
+    onClick?: () => void;
+}
 export interface TMContextMenuItemProps {
     id?: string;
     name: string;
@@ -6,8 +13,7 @@ export interface TMContextMenuItemProps {
     onClick?: (data?: any) => void;
     submenu?: TMContextMenuItemProps[];
     visible?: boolean;
-    rightIcon?: React.ReactNode;
-    onRightIconClick?: () => void;
+    rightIconProps?: RightIconProps;
     beginGroup?: boolean;
     tooltip?: string;
     operationType?: 'singleRow' | 'multiRow';

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

@@ -4,11 +4,11 @@ import { ContextMenu } from '../ContextMenu';
 import ShowAlert from '../../base/TMAlert';
 import TMTooltip from '../../base/TMTooltip';
 import * as S from './styles';
-import { IconAdd, IconCloseOutline, IconMenuVertical, IconPin, IconSave, IconSeparator, IconUndo, SDKUI_Globals, SDKUI_Localizator } from '../../../helper';
+import { IconAdd, IconCloseOutline, IconDelete, IconMenuVertical, IconPin, IconRotate, IconSave, IconSeparator, IconSettings, IconUndo, SDKUI_Globals, SDKUI_Localizator } from '../../../helper';
 import { ButtonNames, TMMessageBoxManager } from '../../base/TMPopUp';
 const Separator = (props) => (_jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", height: "1em", width: "1em", ...props, children: _jsx("path", { d: "M12 2v20", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round" }) }));
 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: 1, y: 90 }, defaultOrientation = 'horizontal', maxItems = 100, contextMenuDefaultPinnedIds = [], defaultItems = [], disbaleConfigMode = false, bgColor = undefined, }) => {
+const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained = false, defaultPosition = { x: 1, y: 90 }, defaultOrientation = 'horizontal', maxItems = 100, contextMenuDefaultPinnedIds = [], defaultItems = [], disbaleConfigMode = false, bgColor = undefined, hasContextMenu = true, pinnedItemIds: externalPinnedItemIds, onPinChange, }) => {
     const percentToPixels = (percent, containerSize) => {
         return (percent / 100) * containerSize;
     };
@@ -145,6 +145,10 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
     const positionBeforeOrientationChange = useRef(null);
     const floatingBarItemIds = useRef(new Set());
     const floatingBarItemNames = useRef(new Set());
+    const isSyncingFromExternal = useRef(false);
+    const isExitingConfigMode = useRef(false);
+    const isLocalChange = useRef(false);
+    const dragStartPosition = useRef(null);
     useEffect(() => {
         floatingBarItemIds.current = new Set(state.items.map(i => i.id));
         floatingBarItemNames.current = new Set(state.items.map(i => i.name));
@@ -247,6 +251,44 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
             }
         }
     }, disbaleConfigMode ? [defaultItems] : []); // Update when defaultItems change if config mode is disabled
+    // Sync with external pinnedItemIds when they change (from parent component)
+    useEffect(() => {
+        // Skip sync if exiting config mode - let save effect update external state first
+        if (isExitingConfigMode.current) {
+            isExitingConfigMode.current = false;
+            return;
+        }
+        // Skip sync if a local change was just made (e.g. right-click remove/add separator)
+        if (isLocalChange.current) {
+            isLocalChange.current = false;
+            return;
+        }
+        if (externalPinnedItemIds === undefined || disbaleConfigMode || state.isConfigMode)
+            return;
+        const flatItems = flattenMenuItems(contextMenuItems);
+        // Build items from external pinned IDs
+        const itemsFromExternal = externalPinnedItemIds
+            .map((id) => {
+            if (id.startsWith('separator-')) {
+                return {
+                    id,
+                    name: 'Separator',
+                    icon: _jsx(Separator, {}),
+                    onClick: () => { },
+                    isSeparator: true,
+                };
+            }
+            return flatItems.find(item => item.id === id);
+        })
+            .filter((item) => item !== undefined);
+        // Only update if different
+        const currentIds = state.items.map(i => i.id).join(',');
+        const newIds = itemsFromExternal.map(i => i.id).join(',');
+        if (currentIds !== newIds) {
+            isSyncingFromExternal.current = true; // Mark that we're syncing from external
+            setState(s => ({ ...s, items: itemsFromExternal }));
+        }
+    }, [externalPinnedItemIds, contextMenuItems, disbaleConfigMode, state.isConfigMode, flattenMenuItems]);
     const togglePin = useCallback((item) => {
         setState(s => {
             const isInFloatingBar = s.items.some(i => i.id === item.id);
@@ -336,6 +378,8 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
                 const isAlreadyPinned = currentItemIds.has(itemId);
                 const pinItem = {
                     ...item,
+                    // Remove rightIconProps in config mode - clicking the item itself pins it
+                    rightIconProps: undefined,
                     onClick: item.onClick && !item.submenu ? () => {
                         if (flatItem && !isAlreadyPinned) {
                             togglePin(flatItem);
@@ -370,9 +414,12 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
                 const isPinned = currentItemIds.has(itemId);
                 const itemWithPin = {
                     ...item,
-                    rightIcon: flatItem ? _jsx(IconPin, { color: isPinned ? 'red' : 'black' }) : undefined,
-                    onRightIconClick: flatItem ? () => {
-                        togglePin(flatItem);
+                    rightIconProps: flatItem ? {
+                        icon: _jsx(IconPin, {}),
+                        activeColor: 'red',
+                        inactiveColor: 'black',
+                        isActive: isPinned,
+                        onClick: () => togglePin(flatItem),
                     } : undefined,
                 };
                 if (item.submenu) {
@@ -404,6 +451,8 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
                 };
             }
         }
+        // Save starting position to detect if user actually moved the bar
+        dragStartPosition.current = { ...pixelPosition };
         setState(s => ({ ...s, isDragging: true }));
     };
     const handleGripDoubleClick = () => {
@@ -443,6 +492,15 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
                 x: pixelsToPercent(pixelPosition.x, containerSizeRef.current.width),
                 y: pixelsToPercent(pixelPosition.y, containerSizeRef.current.height),
             };
+            // Only clear saved position if user actually moved the bar significantly (more than 5 pixels)
+            if (dragStartPosition.current) {
+                const dx = Math.abs(pixelPosition.x - dragStartPosition.current.x);
+                const dy = Math.abs(pixelPosition.y - dragStartPosition.current.y);
+                if (dx > 5 || dy > 5) {
+                    positionBeforeOrientationChange.current = null;
+                }
+            }
+            dragStartPosition.current = null;
             setState(s => ({
                 ...s,
                 isDragging: false,
@@ -473,6 +531,8 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
                 };
             }
         }
+        // Save starting position to detect if user actually moved the bar
+        dragStartPosition.current = { ...pixelPosition };
         setState(s => ({ ...s, isDragging: true }));
     };
     const handleTouchMove = useCallback((e) => {
@@ -502,6 +562,15 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
                 x: pixelsToPercent(pixelPosition.x, containerSizeRef.current.width),
                 y: pixelsToPercent(pixelPosition.y, containerSizeRef.current.height),
             };
+            // Only clear saved position if user actually moved the bar significantly (more than 5 pixels)
+            if (dragStartPosition.current) {
+                const dx = Math.abs(pixelPosition.x - dragStartPosition.current.x);
+                const dy = Math.abs(pixelPosition.y - dragStartPosition.current.y);
+                if (dx > 5 || dy > 5) {
+                    positionBeforeOrientationChange.current = null;
+                }
+            }
+            dragStartPosition.current = null;
             setState(s => ({
                 ...s,
                 isDragging: false,
@@ -533,11 +602,12 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
             return; // Don't save during edit mode
         if (disbaleConfigMode)
             return; // Don't save if config mode is disabled
+        const pinnedIds = state.items.map(item => item.id);
         try {
             // Replace the entire object to trigger the Proxy
             SDKUI_Globals.userSettings.searchSettings.floatingMenuBar = {
                 orientation: state.orientation,
-                itemIds: state.items.map(item => item.id),
+                itemIds: pinnedIds,
                 position: state.position,
                 positionFormat: 'percentage',
             };
@@ -545,7 +615,13 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
         catch (error) {
             console.error('Failed to save FloatingMenuBar config:', error);
         }
-    }, [state.orientation, state.items, state.position, state.isConfigMode, disbaleConfigMode]);
+        // Notify parent about pin changes only if not syncing from external
+        // This prevents infinite loop: external change -> sync -> save -> onPinChange -> external change
+        if (!isSyncingFromExternal.current) {
+            onPinChange?.(pinnedIds);
+        }
+        isSyncingFromExternal.current = false; // Reset the flag
+    }, [state.orientation, state.items, state.position, state.isConfigMode, disbaleConfigMode, onPinChange]);
     const toggleConfigMode = () => {
         setState(s => {
             if (!s.isConfigMode) {
@@ -560,6 +636,7 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
             else {
                 // Exiting edit mode (applying changes) - clean up trailing separators and clear snapshot
                 stateSnapshot.current = null;
+                isExitingConfigMode.current = true; // Prevent sync effect from overwriting changes
                 const cleanedItems = removeTrailingSeparators(s.items);
                 return { ...s, isConfigMode: false, items: cleanedItems };
             }
@@ -679,11 +756,11 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
     };
     const toggleOrientation = () => {
         const newOrientation = state.orientation === 'horizontal' ? 'vertical' : 'horizontal';
-        // Hide the bar during transition to prevent flicker
-        setIsOrientationChanging(true);
         // When switching from vertical back to horizontal, restore the original position
+        // Use visibility hiding only for this case to prevent flicker during position restoration
         if (state.orientation === 'vertical' && newOrientation === 'horizontal') {
             if (positionBeforeOrientationChange.current) {
+                setIsOrientationChanging(true); // Hide only when restoring position
                 const savedPosition = positionBeforeOrientationChange.current.position;
                 const savedPixelPosition = positionBeforeOrientationChange.current.pixelPosition;
                 setPixelPosition(savedPixelPosition);
@@ -702,7 +779,9 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
             }
         }
         // When switching to vertical, save current position and check if we need to expand upward
+        // Use opacity hiding (doesn't affect focus unlike visibility:hidden)
         if (state.orientation === 'horizontal' && newOrientation === 'vertical') {
+            setIsOrientationChanging(true);
             // Save the current position before changing orientation
             positionBeforeOrientationChange.current = {
                 position: { ...state.position },
@@ -750,7 +829,7 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
                                 ...s,
                                 position: { ...s.position, y: newPercentY },
                             }));
-                            setIsOrientationChanging(false); // Show bar after position is set
+                            setIsOrientationChanging(false);
                         });
                     });
                     return;
@@ -787,16 +866,70 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
                         }));
                     }
                 }
-                setIsOrientationChanging(false); // Show bar after position is set
+                setIsOrientationChanging(false);
             });
         });
     };
     const removeItem = (itemId) => {
+        isLocalChange.current = true;
         setState(s => ({
             ...s,
             items: s.items.filter(item => item.id !== itemId),
         }));
     };
+    const getItemRightClickMenuItems = useCallback((item, index) => {
+        const hasSeparatorOnRight = index < state.items.length - 1 && state.items[index + 1]?.isSeparator;
+        const hasSeparatorOnLeft = index > 0 && state.items[index - 1]?.isSeparator;
+        return [
+            {
+                name: 'Rimuovi',
+                icon: _jsx(IconDelete, { fontSize: 16 }),
+                onClick: () => removeItem(item.id),
+            },
+            {
+                name: 'Aggiungi separatore a destra',
+                icon: _jsx(IconSeparator, { style: { transform: 'rotate(-90deg)' }, fontSize: 16 }),
+                disabled: hasSeparatorOnRight,
+                onClick: () => {
+                    isLocalChange.current = true;
+                    const separator = createSeparator();
+                    setState(s => {
+                        const newItems = [...s.items];
+                        newItems.splice(index + 1, 0, separator);
+                        return { ...s, items: newItems };
+                    });
+                },
+            },
+            {
+                name: 'Aggiungi separatore a sinistra',
+                icon: _jsx(IconSeparator, { fontSize: 16 }),
+                disabled: hasSeparatorOnLeft,
+                onClick: () => {
+                    isLocalChange.current = true;
+                    const separator = createSeparator();
+                    setState(s => {
+                        const newItems = [...s.items];
+                        newItems.splice(index, 0, separator);
+                        return { ...s, items: newItems };
+                    });
+                },
+            },
+            ...(!disbaleConfigMode ? [{
+                    name: SDKUI_Localizator.Configure,
+                    icon: _jsx(IconSettings, { fontSize: 16 }),
+                    onClick: () => {
+                        if (!state.isConfigMode) {
+                            toggleConfigMode();
+                        }
+                    },
+                }] : []),
+            {
+                name: state.orientation === 'horizontal' ? 'Floating bar verticale' : 'Floating bar orizzontale',
+                icon: _jsx(IconRotate, { fontSize: 16 }),
+                onClick: toggleOrientation,
+            },
+        ];
+    }, [state.items, state.isConfigMode, state.orientation, removeItem, createSeparator, toggleConfigMode, toggleOrientation, disbaleConfigMode]);
     // Drag and drop for reordering
     const handleDragStart = (e, index) => {
         if (!state.isConfigMode)
@@ -851,9 +984,10 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
         setState(s => ({ ...s, draggedItemIndex: null }));
         setDragOverIndex(null);
     };
-    return (_jsxs(_Fragment, { children: [_jsx(S.Overlay, { "$visible": state.isConfigMode }), _jsxs(S.FloatingContainer, { ref: floatingRef, "$x": pixelPosition.x, "$y": pixelPosition.y, "$orientation": state.orientation, "$verticalDirection": state.verticalDirection, "$isDragging": state.isDragging, "$isConfigMode": state.isConfigMode, "$isConstrained": isConstrained, "$isHidden": isOrientationChanging, "$bgColor": bgColor, onContextMenu: (e) => e.preventDefault(), children: [!state.isConfigMode ? (_jsx(ContextMenu, { items: [
+    return (_jsxs(_Fragment, { children: [_jsx(S.Overlay, { "$visible": state.isConfigMode }), _jsxs(S.FloatingContainer, { ref: floatingRef, "$x": pixelPosition.x, "$y": pixelPosition.y, "$orientation": state.orientation, "$verticalDirection": state.verticalDirection, "$isDragging": state.isDragging, "$isConfigMode": state.isConfigMode, "$isConstrained": isConstrained, "$isHidden": isOrientationChanging, "$bgColor": bgColor, onContextMenu: state.isConfigMode ? (e) => e.preventDefault() : undefined, children: [!state.isConfigMode ? (_jsx(ContextMenu, { items: [
                             ...(!disbaleConfigMode ? [{
                                     name: SDKUI_Localizator.Configure,
+                                    icon: _jsx(IconSettings, { fontSize: 16 }),
                                     onClick: () => {
                                         if (!state.isConfigMode) {
                                             toggleConfigMode();
@@ -862,6 +996,7 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
                                 }] : []),
                             {
                                 name: state.orientation === 'horizontal' ? 'Floating bar verticale' : 'Floating bar orizzontale',
+                                icon: _jsx(IconRotate, { fontSize: 16, style: { transform: state.orientation === 'horizontal' ? 'rotate(90deg)' : 'rotate(0deg)' } }),
                                 onClick: toggleOrientation,
                             },
                         ], trigger: "right", children: _jsx(S.GripHandle, { "$orientation": state.orientation, onMouseDown: handleMouseDown, onTouchStart: handleTouchStart, onDoubleClick: handleGripDoubleClick, children: _jsx(IconDraggableDots, {}) }) })) : (_jsx(S.GripHandle, { "$orientation": state.orientation, onMouseDown: handleMouseDown, onTouchStart: handleTouchStart, onDoubleClick: handleGripDoubleClick, children: _jsx(IconDraggableDots, {}) })), _jsx(S.Separator, { "$orientation": state.orientation }), state.items.map((item, index) => {
@@ -876,18 +1011,18 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
                             ? currentState.disabled === true
                             : item.disabled === true;
                         const currentOnClick = currentState.onClick || item.onClick; // Fallback to stored onClick if not found
-                        return (_jsx(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: item.staticItem ? (
-                            // Visualizza l'elemento statico personalizzato
-                            _jsxs(_Fragment, { children: [item.staticItem, state.isConfigMode && (_jsx(S.RemoveButton, { onClick: () => removeItem(item.id), children: "\u00D7" }))] })) : (
-                            // Visualizza il pulsante standard
-                            _jsxs(_Fragment, { children: [_jsx(TMTooltip, { content: item.name, position: "bottom", children: _jsx(S.MenuButton, { onClick: () => {
-                                                if (state.isConfigMode || isDisabled)
-                                                    return;
-                                                if (currentOnClick) {
-                                                    currentOnClick();
-                                                }
-                                            }, disabled: isDisabled, "$isActive": item.isToggle, children: item.icon }) }), state.isConfigMode && (_jsx(S.RemoveButton, { onClick: () => removeItem(item.id), children: "\u00D7" }))] })) }, item.id));
-                    }), !state.isConfigMode && !disbaleConfigMode && contextMenuItems.length > 0 && (_jsx(ContextMenu, { items: getContextMenuItemsWithPinIcons(), trigger: "left", keepOpenOnClick: false, children: _jsx(S.ContextMenuButton, { children: _jsx(IconMenuVertical, {}) }) })), state.isConfigMode && state.items.length < maxItems && contextMenuItems.length > 0 && (_jsx(ContextMenu, { items: getPinContextMenuItems(), trigger: "left", keepOpenOnClick: true, children: _jsx(TMTooltip, { content: SDKUI_Localizator.Add, children: _jsx(S.AddButton, { children: _jsx(IconAdd, {}) }) }) })), state.isConfigMode && (_jsxs(_Fragment, { children: [_jsx(S.Separator, { "$orientation": state.orientation }), _jsxs(S.ButtonGroup, { "$orientation": state.orientation, children: [_jsx(TMTooltip, { content: SDKUI_Localizator.Undo, position: state.orientation === 'horizontal' ? 'right' : 'top', children: _jsx(S.UndoButton, { onClick: handleUndo, disabled: !hasChanges(), children: _jsx(IconUndo, { fontSize: 18 }) }) }), _jsx(TMTooltip, { content: state.items.length === 0
+                        return (_jsx(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 ? (
+                            // Config mode: show remove button, no right-click menu
+                            _jsxs(_Fragment, { children: [item.staticItem ? (item.staticItem) : (_jsx(TMTooltip, { content: item.name, position: "bottom", children: _jsx(S.MenuButton, { onClick: () => { }, disabled: isDisabled, "$isActive": item.isToggle, children: item.icon }) })), _jsx(S.RemoveButton, { onClick: () => removeItem(item.id), children: "\u00D7" })] })) : (
+                            // Normal mode: wrap in right-click context menu
+                            _jsx(ContextMenu, { items: getItemRightClickMenuItems(item, index), trigger: "right", children: item.staticItem ? (_jsx("div", { children: item.staticItem })) : (_jsx(TMTooltip, { content: item.name, position: "bottom", children: _jsx(S.MenuButton, { onClick: () => {
+                                            if (isDisabled)
+                                                return;
+                                            if (currentOnClick) {
+                                                currentOnClick();
+                                            }
+                                        }, disabled: isDisabled, "$isActive": item.isToggle, children: item.icon }) })) })) }, item.id));
+                    }), !state.isConfigMode && !disbaleConfigMode && hasContextMenu && contextMenuItems.length > 0 && (_jsx(ContextMenu, { items: getContextMenuItemsWithPinIcons(), trigger: "left", keepOpenOnClick: false, children: _jsx(S.ContextMenuButton, { children: _jsx(IconMenuVertical, {}) }) })), state.isConfigMode && state.items.length < maxItems && contextMenuItems.length > 0 && (_jsx(ContextMenu, { items: getPinContextMenuItems(), trigger: "left", keepOpenOnClick: true, children: _jsx(TMTooltip, { content: SDKUI_Localizator.Add, children: _jsx(S.AddButton, { children: _jsx(IconAdd, {}) }) }) })), state.isConfigMode && (_jsxs(_Fragment, { children: [_jsx(S.Separator, { "$orientation": state.orientation }), _jsxs(S.ButtonGroup, { "$orientation": state.orientation, children: [_jsx(TMTooltip, { content: SDKUI_Localizator.Undo, position: state.orientation === 'horizontal' ? 'right' : 'top', children: _jsx(S.UndoButton, { onClick: handleUndo, disabled: !hasChanges(), children: _jsx(IconUndo, { fontSize: 18 }) }) }), _jsx(TMTooltip, { content: state.items.length === 0
                                             ? 'Devi aggiungere almeno un item'
                                             : SDKUI_Localizator.Save, position: state.orientation === 'horizontal' ? 'right' : 'top', children: _jsx(S.ApplyButton, { onClick: toggleConfigMode, disabled: state.items.length === 0 || !hasChanges(), children: _jsx(IconSave, { fontSize: 20 }) }) }), _jsx(TMTooltip, { content: SDKUI_Localizator.Close, position: state.orientation === 'horizontal' ? 'right' : 'top', children: _jsx(S.CloseButton, { onClick: handleClose, children: _jsx(IconCloseOutline, { fontSize: 20 }) }) })] })] }))] })] }));
 };

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

@@ -39,7 +39,8 @@ export const FloatingContainer = styled.div.attrs(props => ({
   position: ${props => props.$isConstrained ? 'absolute' : 'fixed'};
   z-index: ${props => props.$isConfigMode ? 9999 : 1500};
   display: flex;
-  visibility: ${props => props.$isHidden ? 'hidden' : 'visible'};
+  opacity: ${props => props.$isHidden ? 0 : 1};
+  pointer-events: ${props => props.$isHidden ? 'none' : 'auto'};
   flex-direction: ${props => props.$orientation === 'horizontal' ? 'row' : (props.$verticalDirection === 'up' ? 'column-reverse' : 'column')};
   align-items: center;
   background: ${props => props.$bgColor || 'linear-gradient(135deg, #0071BC 0%, #1B1464 100%)'};
@@ -139,7 +140,7 @@ export const ItemSeparator = styled.div `
   ` : `
     /* Normal mode: simple line with tight spacing */
     background: rgba(255, 255, 255, 0.25);
-    width: ${props.$orientation === 'horizontal' ? '1px' : '100%'};
+    width: ${props.$orientation === 'horizontal' ? '1px' : '20px'};
     height: ${props.$orientation === 'horizontal' ? '20px' : '1px'};
     margin: ${props.$orientation === 'horizontal' ? '0 2px' : '2px 0'};
   `}

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

@@ -21,6 +21,9 @@ export interface TMFloatingMenuBarProps {
     defaultItems?: TMFloatingMenuItem[];
     disbaleConfigMode?: boolean;
     bgColor?: string;
+    hasContextMenu?: boolean;
+    pinnedItemIds?: string[];
+    onPinChange?: (pinnedIds: string[]) => void;
 }
 export interface Position {
     x: number;

package/lib/components/base/TMListView.js

@@ -246,7 +246,7 @@ const TMListView = ({ customGroupingHeaders, headerBackGroundColor, header, show
                     onClick: () => { setOrderedBy(key); setShowOrderOptions(false); setOrderMenuVisible(false); },
                     icon: _jsx(IconColumns, { fontSize: 16 }),
                     name: key,
-                    rightIcon: key === orderedBy ? _jsx(IconApply, { fontSize: 14, color: 'gray' }) : undefined
+                    rightIconProps: key === orderedBy ? { icon: _jsx(IconApply, { fontSize: 14, color: 'gray' }) } : undefined
                 });
             }
         }

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

@@ -341,32 +341,28 @@ const ImageViewer = ({ fileBlob, alt = 'Image', className }) => {
         const doc = iframe.contentWindow?.document;
         if (!doc)
             return;
-        doc.open();
-        doc.write(`
-            <html>
-                <head>
-                    <title>Print Image</title>
-                    <style>
-                        body, html {
-                            margin: 0;
-                            padding: 0;
-                            height: 100%;
-                            display: flex;
-                            justify-content: center;
-                            align-items: center;
-                        }
-                        img {
-                            max-width: 100%;
-                            max-height: 100%;
-                        }
-                    </style>
-                </head>
-                <body>
-                    <img src="${dataUrl}" onload="setTimeout(() => { window.print(); window.close(); }, 100);" />
-                </body>
-            </html>
-        `);
-        doc.close();
+        doc.documentElement.innerHTML = `
+            <head>
+                <title>Print Image</title>
+                <style>
+                    body, html {
+                        margin: 0;
+                        padding: 0;
+                        height: 100%;
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+                    }
+                    img {
+                        max-width: 100%;
+                        max-height: 100%;
+                    }
+                </style>
+            </head>
+            <body>
+                <img src="${dataUrl}" onload="setTimeout(() => { window.print(); window.close(); }, 100);" />
+            </body>
+        `;
         iframe.contentWindow?.addEventListener('afterprint', () => {
             document.body.removeChild(iframe);
         });

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

@@ -44,6 +44,7 @@ import { getDcmtCicoStatus } from '../../../helper/checkinCheckoutManager';
 import TMViewHistoryDcmt from './TMViewHistoryDcmt';
 import TMBlogCommentForm from '../blog/TMBlogCommentForm';
 import { useCheckInOutOperations } from '../../../hooks/useCheckInOutOperations';
+import { useFloatingBarPinnedItems } from '../../../hooks/useFloatingBarPinnedItems';
 import TMDcmtCheckoutInfoForm from './TMDcmtCheckoutInfoForm';
 import { useDataListItem } from '../../../hooks/useDataListItem';
 import { useDataUserIdItem } from '../../../hooks/useDataUserIdItem';
@@ -107,6 +108,7 @@ const TMSearchResult = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallback, a
     const [customButton, setCustomButton] = useState();
     const deviceType = useDeviceType();
     const isMobile = deviceType === DeviceType.MOBILE;
+    const { pinnedItemIds, togglePin, setPinnedItemIds } = useFloatingBarPinnedItems();
     const selectedDocs = getSelectedDcmtsOrFocused(selectedItems, focusedItem);
     const allFieldSelectedDocs = useMemo(() => getAllFieldSelectedDcmtsOrFocused(selectedItems, focusedItem), [selectedItems, focusedItem]);
     // Disable the "Sign/Approve" button if:
@@ -594,14 +596,14 @@ const TMSearchResult = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallback, a
             && !showTodoDcmtForm);
     }, [showToppyForApprove, showToppyDraggableHelpCenter, selectedDocs, showApprovePopup, showRejectPopup, showReAssignPopup, showMoreInfoPopup, editPdfForm, openS4TViewer, showTodoDcmtForm]);
     const floatingMenuItems = useMemo(() => {
-        const baseMenuItems = 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);
+        const baseMenuItems = 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, pinnedItemIds, togglePin);
         const customButtons = customButtonMenuItems();
         return customButtons.name ? baseMenuItems.concat([customButtons]) : baseMenuItems;
     }, [
         isMobile, fromDTD, allUsers, selectedItems, focusedItem, context,
         showFloatingBar, workingGroupContext, showSearch, currentTIDHasMasterRelations,
         currentTIDHasDetailRelations, canArchiveMasterRelation, canArchiveDetailRelation,
-        hasManyToManyRelation, customButtonsLayout
+        hasManyToManyRelation, customButtonsLayout, pinnedItemIds, togglePin
     ]);
     const searchResutlToolbar = _jsxs(_Fragment, { children: [(dcmtsReturned != dcmtsFound) && _jsx("p", { style: { 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' }) })] });
@@ -612,7 +614,7 @@ const TMSearchResult = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallback, a
                                                 _jsx(TMLayoutItem, { children: _jsx(TMSearchResultSelector, { searchResults: currentSearchResults, disableAccordionIfSingleCategory: disableAccordionIfSingleCategory, selectedTID: selectedSearchResultTID, selectedSearchResult: selectedSearchResult, autoSelectFirst: !isMobile || currentSearchResults.length === 1, onSelectionChanged: onSearchResultSelectionChanged }) })
                                                 :
                                                     _jsx(_Fragment, {}), _jsx(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), floatingMenuItems: floatingMenuItems, 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, isConstrained: true, defaultPosition: { x: 1, y: 88 }, contextMenuDefaultPinnedIds: ['rel-det', 'rel-mst', 'dl'], defaultOrientation: 'horizontal' })] }), 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(TMFloatingMenuBar, { containerRef: floatingBarContainerRef, contextMenuItems: floatingMenuItems, isConstrained: true, defaultPosition: { x: 1, y: 88 }, contextMenuDefaultPinnedIds: ['rel-det', 'rel-mst', 'dl'], defaultOrientation: 'horizontal', hasContextMenu: false, pinnedItemIds: pinnedItemIds, onPinChange: setPinnedItemIds })] }), 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);

package/lib/components/features/search/TMSearchResultsMenuItems.d.ts

@@ -8,4 +8,4 @@ export declare const signatureInformationCallback: (isMobile: boolean, inputDcmt
 export declare const getCommandsMenuItems: (isMobile: boolean, dtd: DcmtTypeDescriptor | undefined, allUsers: Array<UserDescriptor>, selectedItems: Array<any>, focusedItem: any, context: SearchResultContext, showFloatingBar: boolean, workingGroupContext: WorkingGroupDescriptor | undefined, showSearch: boolean, setShowFloatingBar: React.Dispatch<React.SetStateAction<boolean>>, openFormHandler: (layoutMode: LayoutModes) => void, openSharedArchiveHandler: () => Promise<void>, showSharedDcmtsHandler: () => Promise<void>, downloadDcmtsAsync: (inputDcmts: DcmtInfo[] | undefined, downloadType: DownloadTypes, downloadMode: DownloadModes, onFileDownloaded?: (dcmtFile: File | undefined) => void, confirmAttachments?: (list: FileDescriptor[]) => Promise<string[] | undefined>, skipConfirmation?: boolean) => Promise<void>, runOperationAsync: (inputDcmts: DcmtInfo[] | undefined, dcmtOperationType: DcmtOperationTypes, actionAfterOperationAsync?: () => Promise<void>) => Promise<void>, onRefreshSearchAsync: (() => Promise<void>) | undefined, onRefreshDataRowsAsync: (() => Promise<void>) | undefined, onRefreshAfterAddDcmtToFavs: (() => void) | undefined, confirmFormat: () => Promise<FileFormats>, confirmAttachments: (list: FileDescriptor[]) => Promise<string[] | undefined>, openTaskFormHandler: () => void, openDetailDcmtsFormHandler: (value: boolean) => void, openMasterDcmtsFormHandler: (value: boolean) => void, openBatchUpdateFormHandler: (value: boolean) => void, openExportForm: () => void, handleToggleSearch: () => void, handleSignApprove: () => void, openSignSettingsForm: () => void, handleCheckOutOperationCallback: (checkout: boolean) => Promise<void>, handleCheckInOperationCallback: () => void, showCheckoutInformationFormCallback: () => void, viewHistoryCallback: () => void, copyCheckoutPathToClipboardOperationCallback: () => void, openWGsCopyMoveForm?: ((mode: "copyToWgDraft" | "copyToWgArchivedDoc", dcmtTypeDescriptor: DcmtTypeDescriptor, documents: Array<DcmtInfo>) => void), openCommentFormCallback?: ((documents: Array<DcmtInfo>) => void), openEditPdf?: ((documents: Array<DcmtInfo>) => void), openAddDocumentForm?: () => void, passToArchiveCallback?: (outputMids: Array<{
     mid: number;
     value: string;
-}>, tid?: number) => void, archiveMasterDocuments?: (tid: number | undefined) => Promise<void>, archiveDetailDocuments?: (tid: number | undefined) => Promise<void>, hasMasterRelation?: boolean, hasDetailRelation?: boolean, canArchiveMasterRelation?: boolean, canArchiveDetailRelation?: boolean, pairManyToManyDocuments?: (isPairing: boolean) => Promise<void>, hasManyToManyRelation?: boolean) => Array<TMContextMenuItemProps>;
+}>, tid?: number) => void, archiveMasterDocuments?: (tid: number | undefined) => Promise<void>, archiveDetailDocuments?: (tid: number | undefined) => Promise<void>, hasMasterRelation?: boolean, hasDetailRelation?: boolean, canArchiveMasterRelation?: boolean, canArchiveDetailRelation?: boolean, pairManyToManyDocuments?: (isPairing: boolean) => Promise<void>, hasManyToManyRelation?: boolean, pinnedItemIds?: string[], onTogglePin?: (id: string) => void) => Array<TMContextMenuItemProps>;

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { AccessLevels, AccessLevelsEx, AppModules, FileFormats, LayoutModes, SDK_Globals, DcmtTypeListCacheService, LicenseModuleStatus } from '@topconsultnpm/sdk-ts';
-import { IconActivity, IconArchiveDoc, IconBatchUpdate, IconCheckFile, IconCheckIn, IconCircleInfo, IconCloseCircle, IconConvertFilePdf, IconDelete, IconDotsVerticalCircleOutline, IconDownload, IconEdit, IconExportTo, IconFileDots, IconHide, IconInfo, IconMenuCAArchive, IconPlatform, IconPreview, IconRelation, IconSearch, IconShow, IconStar, IconSubstFile, IconUndo, IconUserGroupOutline, SDKUI_Localizator, searchResultToMetadataValues, IconSignaturePencil, IconArchiveMaster, IconArchiveDetail, IconDetailDcmts, isPdfEditorEnabled, IconPair, IconUnpair, IconSharedDcmt, IconShare, IconCopy, IconMoveToFolder } from '../../../helper';
+import { IconActivity, IconArchiveDoc, IconBatchUpdate, IconCheckFile, IconCheckIn, IconCircleInfo, IconCloseCircle, IconConvertFilePdf, IconDelete, IconDotsVerticalCircleOutline, IconDownload, IconEdit, IconExportTo, IconFileDots, IconHide, IconInfo, IconMenuCAArchive, IconPlatform, IconPreview, IconRelation, IconSearch, IconShow, IconStar, IconSubstFile, IconUndo, IconUserGroupOutline, SDKUI_Localizator, searchResultToMetadataValues, IconSignaturePencil, IconArchiveMaster, IconArchiveDetail, IconDetailDcmts, isPdfEditorEnabled, IconPair, IconUnpair, IconSharedDcmt, IconShare, IconCopy, IconMoveToFolder, IconPin } from '../../../helper';
 import ShowAlert from '../../base/TMAlert';
 import { TMMessageBoxManager, ButtonNames, TMExceptionBoxManager } from '../../base/TMPopUp';
 import TMSpinner from '../../base/TMSpinner';
@@ -80,8 +80,28 @@ export const signatureInformationCallback = async (isMobile, inputDcmts) => {
         TMSpinner.hide();
     }
 };
-export const getCommandsMenuItems = (isMobile, dtd, allUsers, selectedItems, focusedItem, context, showFloatingBar, workingGroupContext, showSearch, setShowFloatingBar, openFormHandler, openSharedArchiveHandler, showSharedDcmtsHandler, downloadDcmtsAsync, runOperationAsync, onRefreshSearchAsync, onRefreshDataRowsAsync, onRefreshAfterAddDcmtToFavs, confirmFormat, confirmAttachments, openTaskFormHandler, openDetailDcmtsFormHandler, openMasterDcmtsFormHandler, openBatchUpdateFormHandler, openExportForm, handleToggleSearch, handleSignApprove, openSignSettingsForm, handleCheckOutOperationCallback, handleCheckInOperationCallback, showCheckoutInformationFormCallback, viewHistoryCallback, copyCheckoutPathToClipboardOperationCallback, openWGsCopyMoveForm, openCommentFormCallback, openEditPdf, openAddDocumentForm, passToArchiveCallback, archiveMasterDocuments, archiveDetailDocuments, hasMasterRelation, hasDetailRelation, canArchiveMasterRelation, canArchiveDetailRelation, pairManyToManyDocuments, hasManyToManyRelation) => {
+export const getCommandsMenuItems = (isMobile, dtd, allUsers, selectedItems, focusedItem, context, showFloatingBar, workingGroupContext, showSearch, setShowFloatingBar, openFormHandler, openSharedArchiveHandler, showSharedDcmtsHandler, downloadDcmtsAsync, runOperationAsync, onRefreshSearchAsync, onRefreshDataRowsAsync, onRefreshAfterAddDcmtToFavs, confirmFormat, confirmAttachments, openTaskFormHandler, openDetailDcmtsFormHandler, openMasterDcmtsFormHandler, openBatchUpdateFormHandler, openExportForm, handleToggleSearch, handleSignApprove, openSignSettingsForm, handleCheckOutOperationCallback, handleCheckInOperationCallback, showCheckoutInformationFormCallback, viewHistoryCallback, copyCheckoutPathToClipboardOperationCallback, openWGsCopyMoveForm, openCommentFormCallback, openEditPdf, openAddDocumentForm, passToArchiveCallback, archiveMasterDocuments, archiveDetailDocuments, hasMasterRelation, hasDetailRelation, canArchiveMasterRelation, canArchiveDetailRelation, pairManyToManyDocuments, hasManyToManyRelation, pinnedItemIds, onTogglePin) => {
     const isPdfEditorLicensed = SDK_Globals?.license?.dcmtArchiveLicenses?.[0]?.siX_60007?.status === LicenseModuleStatus.Licensed;
+    const addPinIconToItems = (items) => {
+        if (isMobile || !onTogglePin)
+            return items;
+        return items.map(item => {
+            const newItem = { ...item };
+            if (item.id && item.onClick && !item.submenu) {
+                newItem.rightIconProps = {
+                    icon: _jsx(IconPin, {}),
+                    activeColor: 'red',
+                    inactiveColor: 'black',
+                    isActive: pinnedItemIds?.includes(item.id) ?? false,
+                    onClick: () => onTogglePin(item.id),
+                };
+            }
+            if (item.submenu && item.submenu.length > 0) {
+                newItem.submenu = addPinIconToItems(item.submenu);
+            }
+            return newItem;
+        });
+    };
     let pdfEditorAvailable = false;
     if (dtd && dtd.widgets && dtd.widgets.length > 0) {
         pdfEditorAvailable = isPdfEditorEnabled(dtd.widgets);
@@ -744,7 +764,7 @@ export const getCommandsMenuItems = (isMobile, dtd, allUsers, selectedItems, foc
         ];
     };
     if (context === SearchResultContext.ARCHIVED_WORKGROUP) {
-        return getArchivedWorkgroupMenuItems();
+        return addPinIconToItems(getArchivedWorkgroupMenuItems());
     }
-    return getDefaultMenuItems();
+    return addPinIconToItems(getDefaultMenuItems());
 };

package/lib/helper/helpers.d.ts

@@ -67,7 +67,8 @@ export declare enum LandingPages {
     RECENT = "recent",
     AREA_MANAGER = "areaManager",
     NOTIFICATIONS = "notifications",
-    ACTIVITIES = "activities"
+    ACTIVITIES = "activities",
+    WORKFLOW_CTRL = "workflowCtrl"
 }
 export declare function getExceptionMessage(ex: any): string;
 export declare function getContrastColor(inputColor: string): {

package/lib/helper/helpers.js

@@ -728,6 +728,7 @@ export var LandingPages;
     LandingPages["AREA_MANAGER"] = "areaManager";
     LandingPages["NOTIFICATIONS"] = "notifications";
     LandingPages["ACTIVITIES"] = "activities";
+    LandingPages["WORKFLOW_CTRL"] = "workflowCtrl";
 })(LandingPages || (LandingPages = {}));
 // #endregion
 // #region Exception

package/lib/hooks/useFloatingBarPinnedItems.d.ts

@@ -0,0 +1,11 @@
+interface UseFloatingBarPinnedItemsOptions {
+    defaultPinnedIds?: string[];
+}
+interface UseFloatingBarPinnedItemsReturn {
+    pinnedItemIds: string[];
+    isPinned: (id: string) => boolean;
+    togglePin: (id: string) => void;
+    setPinnedItemIds: (ids: string[]) => void;
+}
+export declare const useFloatingBarPinnedItems: (options?: UseFloatingBarPinnedItemsOptions) => UseFloatingBarPinnedItemsReturn;
+export default useFloatingBarPinnedItems;

package/lib/hooks/useFloatingBarPinnedItems.js

@@ -0,0 +1,54 @@
+import { useState, useCallback } from 'react';
+import { SDKUI_Globals } from '../helper';
+export const useFloatingBarPinnedItems = (options = {}) => {
+    const { defaultPinnedIds = [] } = options;
+    const loadPinnedIds = useCallback(() => {
+        try {
+            const settings = SDKUI_Globals.userSettings?.searchSettings?.floatingMenuBar || {};
+            if (settings.itemIds && Array.isArray(settings.itemIds) && settings.itemIds.length > 0) {
+                return settings.itemIds;
+            }
+            return defaultPinnedIds;
+        }
+        catch (error) {
+            console.error('Failed to load pinned items from localStorage:', error);
+            return defaultPinnedIds;
+        }
+    }, [defaultPinnedIds]);
+    const [internalPinnedItemIds, setInternalPinnedItemIds] = useState(loadPinnedIds);
+    const savePinnedIds = useCallback((ids) => {
+        try {
+            const currentSettings = SDKUI_Globals.userSettings?.searchSettings?.floatingMenuBar || {};
+            SDKUI_Globals.userSettings.searchSettings.floatingMenuBar = {
+                ...currentSettings,
+                itemIds: ids,
+            };
+        }
+        catch (error) {
+            console.error('Failed to save pinned items to localStorage:', error);
+        }
+    }, []);
+    const setPinnedItemIds = useCallback((ids) => {
+        setInternalPinnedItemIds(ids);
+        savePinnedIds(ids);
+    }, [savePinnedIds]);
+    const isPinned = useCallback((id) => {
+        return internalPinnedItemIds.includes(id);
+    }, [internalPinnedItemIds]);
+    const togglePin = useCallback((id) => {
+        setInternalPinnedItemIds(prev => {
+            const newIds = prev.includes(id)
+                ? prev.filter(pinnedId => pinnedId !== id)
+                : [...prev, id];
+            savePinnedIds(newIds);
+            return newIds;
+        });
+    }, [savePinnedIds]);
+    return {
+        pinnedItemIds: internalPinnedItemIds,
+        isPinned,
+        togglePin,
+        setPinnedItemIds,
+    };
+};
+export default useFloatingBarPinnedItems;

package/package.json

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