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

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

@@ -1,14 +1,13 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useRef, useEffect, useCallback } from 'react';
 import { ContextMenu } from '../ContextMenu';
 import ShowAlert from '../../base/TMAlert';
 import TMTooltip from '../../base/TMTooltip';
 import * as S from './styles';
-import { IconAdd, IconCloseOutline, IconDelete, IconMenuVertical, IconPin, IconRotate, IconSave, IconSeparator, IconSettings, IconUndo, SDKUI_Globals, SDKUI_Localizator } from '../../../helper';
-import { ButtonNames, TMMessageBoxManager } from '../../base/TMPopUp';
+import { IconDelete, IconMenuVertical, IconPin, IconRotate, IconSeparator, SDKUI_Globals } from '../../../helper';
 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, hasContextMenu = true, pinnedItemIds: externalPinnedItemIds, onPinChange, }) => {
+const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained = false, defaultPosition = { x: 1, y: 90 }, defaultOrientation = 'horizontal', maxItems = 100, contextMenuDefaultPinnedIds = [], defaultItems = [], enableConfigMode = true, bgColor = undefined, hasContextMenu = true, pinnedItemIds: externalPinnedItemIds, onPinChange, }) => {
     const percentToPixels = (percent, containerSize) => {
         return (percent / 100) * containerSize;
     };
@@ -42,7 +41,7 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
     };
     const loadConfig = () => {
         // If config mode is disabled, use default position and orientation
-        if (disbaleConfigMode) {
+        if (!enableConfigMode) {
             return {
                 orientation: defaultOrientation,
                 savedItemIds: contextMenuDefaultPinnedIds,
@@ -129,7 +128,6 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
     const [state, setState] = useState({
         position: initialConfig.position, // Stored as percentage
         isDragging: false,
-        isConfigMode: false,
         orientation: initialConfig.orientation,
         verticalDirection: 'down',
         items: [],
@@ -141,12 +139,10 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
     const [pixelPosition, setPixelPosition] = useState({ x: 0, y: 0 }); // Calculated pixel position
     const [isOrientationChanging, setIsOrientationChanging] = useState(false); // Hide bar during orientation transition
     const containerSizeRef = useRef({ width: 0, height: 0 });
-    const stateSnapshot = useRef(null);
     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(() => {
@@ -213,11 +209,11 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
         if (contextMenuItems.length > 0 || initialConfig.savedItemIds.length > 0 || defaultItems.length > 0) {
             const flatItems = flattenMenuItems(contextMenuItems);
             let itemsToSet = [];
-            // If disbaleConfigMode is true and defaultItems provided, use only defaultItems
-            if (disbaleConfigMode && defaultItems.length > 0) {
+            // If enableConfigMode is false and defaultItems provided, use only defaultItems
+            if (!enableConfigMode && defaultItems.length > 0) {
                 itemsToSet = defaultItems;
             }
-            else if (!disbaleConfigMode && initialConfig.savedItemIds.length > 0) {
+            else if (enableConfigMode && initialConfig.savedItemIds.length > 0) {
                 // Restore items in the saved order from localStorage (only if config mode is enabled)
                 const restoredItems = initialConfig.savedItemIds
                     .map((id) => {
@@ -250,20 +246,15 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
                 setState(s => ({ ...s, items: itemsToSet }));
             }
         }
-    }, disbaleConfigMode ? [defaultItems] : []); // Update when defaultItems change if config mode is disabled
+    }, enableConfigMode ? [] : [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)
+        if (externalPinnedItemIds === undefined || !enableConfigMode)
             return;
         const flatItems = flattenMenuItems(contextMenuItems);
         // Build items from external pinned IDs
@@ -288,7 +279,7 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
             isSyncingFromExternal.current = true; // Mark that we're syncing from external
             setState(s => ({ ...s, items: itemsFromExternal }));
         }
-    }, [externalPinnedItemIds, contextMenuItems, disbaleConfigMode, state.isConfigMode, flattenMenuItems]);
+    }, [externalPinnedItemIds, contextMenuItems, enableConfigMode, flattenMenuItems]);
     const togglePin = useCallback((item) => {
         setState(s => {
             const isInFloatingBar = s.items.some(i => i.id === item.id);
@@ -368,42 +359,6 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
         const separator = createSeparator();
         setState(s => ({ ...s, items: [...s.items, separator] }));
     }, [state.items.length, maxItems, createSeparator]);
-    const getPinContextMenuItems = useCallback(() => {
-        const flatItems = flattenMenuItems(contextMenuItems);
-        const currentItemIds = new Set(state.items.map(i => i.id));
-        const createPinItems = (items) => {
-            return items.map(item => {
-                const flatItem = flatItems.find(fi => fi.id === item.id);
-                const itemId = flatItem?.id || item.id || '';
-                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);
-                        }
-                    } : undefined,
-                    disabled: isAlreadyPinned,
-                };
-                if (item.submenu) {
-                    pinItem.submenu = createPinItems(item.submenu);
-                }
-                return pinItem;
-            });
-        };
-        const pinItems = createPinItems(contextMenuItems);
-        // Add separator option at the end
-        pinItems.push({
-            id: 'add-separator',
-            name: SDKUI_Localizator.Add + ' separatore',
-            icon: _jsx(IconSeparator, {}),
-            onClick: addSeparator,
-            beginGroup: true
-        });
-        return pinItems;
-    }, [contextMenuItems, flattenMenuItems, togglePin, state.items, addSeparator]);
     const getContextMenuItemsWithPinIcons = useCallback(() => {
         const flatItems = flattenMenuItems(contextMenuItems);
         const currentItemIds = new Set(state.items.map(i => i.id));
@@ -431,8 +386,6 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
         return addPinIcons(contextMenuItems);
     }, [contextMenuItems, flattenMenuItems, togglePin, state.items]);
     const handleMouseDown = (e) => {
-        if (state.isConfigMode)
-            return;
         const containerRect = containerRef.current?.getBoundingClientRect();
         if (containerRect) {
             // Calculate drag offset based on positioning mode
@@ -456,8 +409,6 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
         setState(s => ({ ...s, isDragging: true }));
     };
     const handleGripDoubleClick = () => {
-        if (state.isConfigMode)
-            return;
         toggleOrientation();
     };
     const handleMouseMove = useCallback((e) => {
@@ -513,8 +464,6 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
     }, [state.isDragging, pixelPosition]);
     // Touch event handlers for tablet support
     const handleTouchStart = (e) => {
-        if (state.isConfigMode)
-            return;
         const touch = e.touches[0];
         const containerRect = containerRef.current?.getBoundingClientRect();
         if (containerRect) {
@@ -596,11 +545,9 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
         }
         return undefined;
     }, [state.isDragging, handleMouseMove, handleMouseUp, handleTouchMove, handleTouchEnd]);
-    // Save to SDKUI_Globals.userSettings only when NOT in config mode (when applying changes)
+    // Save to SDKUI_Globals.userSettings
     useEffect(() => {
-        if (state.isConfigMode)
-            return; // Don't save during edit mode
-        if (disbaleConfigMode)
+        if (!enableConfigMode)
             return; // Don't save if config mode is disabled
         const pinnedIds = state.items.map(item => item.id);
         try {
@@ -621,139 +568,7 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
             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) {
-                stateSnapshot.current = {
-                    items: [...s.items],
-                    orientation: s.orientation,
-                    verticalDirection: s.verticalDirection,
-                    position: { ...s.position },
-                };
-                return { ...s, isConfigMode: true };
-            }
-            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 };
-            }
-        });
-    };
-    // Auto-reposition when entering edit mode to ensure Apply/Undo buttons are visible
-    useEffect(() => {
-        if (!state.isConfigMode || !floatingRef.current)
-            return;
-        // Use double requestAnimationFrame to ensure the DOM has fully updated with new buttons
-        requestAnimationFrame(() => {
-            requestAnimationFrame(() => {
-                if (!floatingRef.current)
-                    return;
-                const floating = floatingRef.current.getBoundingClientRect();
-                const containerWidth = isConstrained && containerRef.current
-                    ? containerRef.current.getBoundingClientRect().width
-                    : window.innerWidth;
-                const containerHeight = isConstrained && containerRef.current
-                    ? containerRef.current.getBoundingClientRect().height
-                    : window.innerHeight;
-                // Use current pixel position
-                let newPixelX = pixelPosition.x;
-                let newPixelY = pixelPosition.y;
-                let needsUpdate = false;
-                // Check horizontal overflow
-                if (newPixelX + floating.width > containerWidth) {
-                    newPixelX = Math.max(0, containerWidth - floating.width);
-                    needsUpdate = true;
-                }
-                // Check vertical overflow
-                if (newPixelY + floating.height > containerHeight) {
-                    newPixelY = Math.max(0, containerHeight - floating.height);
-                    needsUpdate = true;
-                }
-                if (needsUpdate) {
-                    // Update pixel position immediately
-                    setPixelPosition({ x: newPixelX, y: newPixelY });
-                    // Convert to percentage for state
-                    const newPercentagePosition = {
-                        x: pixelsToPercent(newPixelX, containerWidth),
-                        y: pixelsToPercent(newPixelY, containerHeight),
-                    };
-                    setState(s => ({
-                        ...s,
-                        position: newPercentagePosition,
-                    }));
-                    // Update snapshot position to the corrected position so Undo restores to visible position
-                    if (stateSnapshot.current) {
-                        stateSnapshot.current.position = newPercentagePosition;
-                    }
-                }
-            });
-        });
-    }, [state.isConfigMode, state.orientation, isConstrained, state.items, pixelPosition.x, pixelPosition.y]);
-    const handleUndo = () => {
-        if (stateSnapshot.current) {
-            setState(s => ({
-                ...s,
-                items: [...stateSnapshot.current.items],
-                orientation: stateSnapshot.current.orientation,
-                verticalDirection: stateSnapshot.current.verticalDirection,
-                position: { ...stateSnapshot.current.position },
-                isConfigMode: true,
-            }));
-        }
-    };
-    // 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 handleClose = () => {
-        // If all items removed, exit without asking and restore last items
-        if (state.items.length === 0 && stateSnapshot.current) {
-            setState(s => ({
-                ...s,
-                items: [...stateSnapshot.current.items],
-                orientation: stateSnapshot.current.orientation,
-                verticalDirection: stateSnapshot.current.verticalDirection,
-                position: { ...stateSnapshot.current.position },
-                isConfigMode: false,
-            }));
-            stateSnapshot.current = null;
-            return;
-        }
-        // If no changes, simply exit config mode
-        if (!hasChanges()) {
-            stateSnapshot.current = null;
-            const cleanedItems = removeTrailingSeparators(state.items);
-            setState(s => ({ ...s, isConfigMode: false, items: cleanedItems }));
-            return;
-        }
-        // If there are changes, ask for confirmation
-        TMMessageBoxManager.show({
-            message: 'Perderai le tue modifiche, sei sicuro?',
-            buttons: [ButtonNames.YES, ButtonNames.NO],
-            onButtonClick: (buttonName) => {
-                if (buttonName === ButtonNames.YES && stateSnapshot.current) {
-                    // Restore snapshot and exit config mode
-                    setState(s => ({
-                        ...s,
-                        items: [...stateSnapshot.current.items],
-                        orientation: stateSnapshot.current.orientation,
-                        verticalDirection: stateSnapshot.current.verticalDirection,
-                        position: { ...stateSnapshot.current.position },
-                        isConfigMode: false,
-                    }));
-                    stateSnapshot.current = null;
-                }
-            },
-        });
-    };
+    }, [state.orientation, state.items, state.position, enableConfigMode, onPinChange]);
     const toggleOrientation = () => {
         const newOrientation = state.orientation === 'horizontal' ? 'vertical' : 'horizontal';
         // When switching from vertical back to horizontal, restore the original position
@@ -887,50 +702,41 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
                 onClick: () => removeItem(item.id),
             },
             {
-                name: 'Aggiungi separatore a destra',
-                icon: _jsx(IconSeparator, { style: { transform: 'rotate(-90deg)' }, fontSize: 16 }),
-                disabled: hasSeparatorOnRight,
+                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 + 1, 0, separator);
+                        newItems.splice(index, 0, separator);
                         return { ...s, items: newItems };
                     });
                 },
             },
             {
-                name: 'Aggiungi separatore a sinistra',
-                icon: _jsx(IconSeparator, { fontSize: 16 }),
-                disabled: hasSeparatorOnLeft,
+                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, 0, separator);
+                        newItems.splice(index + 1, 0, separator);
                         return { ...s, items: newItems };
                     });
                 },
             },
-            ...(!disbaleConfigMode ? [{
-                    beginGroup: true,
-                    name: SDKUI_Localizator.Configure,
-                    icon: _jsx(IconSettings, { fontSize: 16 }),
-                    onClick: () => {
-                        if (!state.isConfigMode) {
-                            toggleConfigMode();
-                        }
-                    },
-                }] : []),
             {
+                beginGroup: true,
                 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]);
+    }, [state.items, state.orientation, removeItem, createSeparator, toggleOrientation]);
     const getSeparatorRightClickMenuItems = useCallback((index) => {
         return [
             {
@@ -939,42 +745,33 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
                 onClick: () => removeItem(state.items[index].id),
             },
             {
-                name: 'Aggiungi separatore a destra',
-                icon: _jsx(IconSeparator, { style: { transform: 'rotate(-90deg)' }, fontSize: 16 }),
+                name: 'Aggiungi separatore a sinistra',
+                icon: _jsx(IconSeparator, { fontSize: 16 }),
                 disabled: true,
             },
             {
-                name: 'Aggiungi separatore a sinistra',
-                icon: _jsx(IconSeparator, { fontSize: 16 }),
+                name: 'Aggiungi separatore a destra',
+                icon: _jsx(IconSeparator, { style: { transform: 'rotate(-90deg)' }, fontSize: 16 }),
                 disabled: true,
             },
-            ...(!disbaleConfigMode ? [{
-                    beginGroup: true,
-                    name: SDKUI_Localizator.Configure,
-                    icon: _jsx(IconSettings, { fontSize: 16 }),
-                    onClick: () => {
-                        if (!state.isConfigMode) {
-                            toggleConfigMode();
-                        }
-                    },
-                }] : []),
             {
+                beginGroup: true,
                 name: state.orientation === 'horizontal' ? 'Floating bar verticale' : 'Floating bar orizzontale',
                 icon: _jsx(IconRotate, { fontSize: 16 }),
                 onClick: toggleOrientation,
             },
         ];
-    }, [state.items, state.isConfigMode, state.orientation, removeItem, toggleConfigMode, toggleOrientation, disbaleConfigMode]);
+    }, [state.items, state.orientation, removeItem, toggleOrientation]);
     // Drag and drop for reordering
     const handleDragStart = (e, index) => {
-        if (!state.isConfigMode)
+        if (!enableConfigMode)
             return;
         e.dataTransfer.effectAllowed = 'move';
         e.dataTransfer.setData('text/plain', index.toString());
         setState(s => ({ ...s, draggedItemIndex: index }));
     };
     const handleDragEnter = (e, index) => {
-        if (!state.isConfigMode)
+        if (!enableConfigMode)
             return;
         e.preventDefault();
         if (state.draggedItemIndex !== index) {
@@ -982,13 +779,13 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
         }
     };
     const handleDragOver = (e) => {
-        if (!state.isConfigMode)
+        if (!enableConfigMode)
             return;
         e.preventDefault();
         e.dataTransfer.dropEffect = 'move';
     };
     const handleDragLeave = (_e, index) => {
-        if (!state.isConfigMode)
+        if (!enableConfigMode)
             return;
         // Only clear if we're actually leaving this specific item
         if (dragOverIndex === index) {
@@ -996,7 +793,7 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
         }
     };
     const handleDrop = (e, dropIndex) => {
-        if (!state.isConfigMode || state.draggedItemIndex === null)
+        if (!enableConfigMode || state.draggedItemIndex === null)
             return;
         e.preventDefault();
         e.stopPropagation();
@@ -1005,6 +802,7 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
             setDragOverIndex(null);
             return;
         }
+        isLocalChange.current = true;
         const newItems = [...state.items];
         const [draggedItem] = newItems.splice(dragIndex, 1);
         newItems.splice(dropIndex, 0, draggedItem);
@@ -1019,46 +817,37 @@ 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: 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();
-                                        }
-                                    },
-                                }] : []),
-                            {
-                                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) => {
-                        // Handle separator items
-                        if (item.isSeparator) {
-                            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 ? (_jsxs(_Fragment, { children: [_jsx(S.ItemSeparator, { "$orientation": state.orientation, "$isConfigMode": state.isConfigMode }), _jsx(S.RemoveButton, { onClick: () => removeItem(item.id), children: "\u00D7" })] })) : (_jsx(ContextMenu, { items: getSeparatorRightClickMenuItems(index), trigger: "right", children: _jsx(S.ItemSeparator, { "$orientation": state.orientation, "$isConfigMode": state.isConfigMode }) })) }, item.id));
-                        }
-                        // Get current state (disabled and onClick) from contextMenuItems
-                        const currentState = getCurrentItemState(item.id);
-                        // Prefer currentState.disabled if contextMenuItems has items, otherwise use item.disabled
-                        const isDisabled = (contextMenuItems.length > 0 && currentState.disabled !== undefined)
-                            ? 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: 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 }) }) })] })] }))] })] }));
+    return (_jsxs(S.FloatingContainer, { ref: floatingRef, "$x": pixelPosition.x, "$y": pixelPosition.y, "$orientation": state.orientation, "$verticalDirection": state.verticalDirection, "$isDragging": state.isDragging, "$isConfigMode": false, "$isConstrained": isConstrained, "$isHidden": isOrientationChanging, "$bgColor": bgColor, onContextMenu: undefined, children: [_jsx(ContextMenu, { items: [
+                    {
+                        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.Separator, { "$orientation": state.orientation }), state.items.map((item, index) => {
+                // Handle separator items
+                if (item.isSeparator) {
+                    return (_jsx(S.DraggableItem, { "$isDragging": state.draggedItemIndex === index, "$isDragOver": dragOverIndex === index && state.draggedItemIndex !== index, draggable: enableConfigMode, 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: enableConfigMode ? (_jsx(ContextMenu, { items: getSeparatorRightClickMenuItems(index), trigger: "right", children: _jsx(S.ItemSeparator, { "$orientation": state.orientation, "$isConfigMode": false }) })) : (_jsx(S.ItemSeparator, { "$orientation": state.orientation, "$isConfigMode": false })) }, item.id));
+                }
+                // Get current state (disabled and onClick) from contextMenuItems
+                const currentState = getCurrentItemState(item.id);
+                // Prefer currentState.disabled if contextMenuItems has items, otherwise use item.disabled
+                const isDisabled = (contextMenuItems.length > 0 && currentState.disabled !== undefined)
+                    ? 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: enableConfigMode, 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: enableConfigMode ? (_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.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));
+            }), enableConfigMode && hasContextMenu && contextMenuItems.length > 0 && (_jsx(ContextMenu, { items: getContextMenuItemsWithPinIcons(), trigger: "left", keepOpenOnClick: false, children: _jsx(S.ContextMenuButton, { children: _jsx(IconMenuVertical, {}) }) }))] }));
 };
 export default TMFloatingMenuBar;

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

@@ -19,7 +19,7 @@ export interface TMFloatingMenuBarProps {
     contextMenuDefaultPinnedIds?: string[];
     defaultOrientation?: 'horizontal' | 'vertical';
     defaultItems?: TMFloatingMenuItem[];
-    disbaleConfigMode?: boolean;
+    enableConfigMode?: boolean;
     bgColor?: string;
     hasContextMenu?: boolean;
     pinnedItemIds?: string[];
@@ -32,7 +32,6 @@ export interface Position {
 export interface TMFloatingMenuBarState {
     position: Position;
     isDragging: boolean;
-    isConfigMode: boolean;
     orientation: 'horizontal' | 'vertical';
     verticalDirection: 'down' | 'up';
     items: TMFloatingMenuItem[];

package/lib/components/features/workflow/diagram/WFDiagram.js

@@ -1822,7 +1822,7 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, allowEdit = true, onDiagram
     }, [isFullScreen]);
     const diagramContent = (_jsxs(CanvasContainer, { onDoubleClick: handleCanvasDoubleClick, children: [_jsx("input", { ref: fileInputRef, type: "file", accept: ".xml" // Filtra per file XML
                 , onChange: handleFileChange, style: { display: 'none' } }), SDK_Globals.tmSession?.SessionDescr?.appModuleID === AppModules.SURFER ?
-                _jsx(TMFloatingMenuBar, { containerRef: diagramRef, defaultPosition: { x: 45, y: 85 }, disbaleConfigMode: true, defaultItems: [
+                _jsx(TMFloatingMenuBar, { containerRef: diagramRef, defaultPosition: { x: 45, y: 85 }, enableConfigMode: false, defaultItems: [
                         { icon: _jsx(IconZoomIn, {}), name: SDKUI_Localizator.ZoomIn, disabled: isAutoZoomEnabled, onClick: () => { handleZoomIn(); }, id: 'zoom-in', isPinned: true },
                         { icon: _jsx(IconZoomOut, {}), name: SDKUI_Localizator.ZoomOut, disabled: isAutoZoomEnabled, onClick: () => { handleZoomOut(); }, id: 'zoom-out', isPinned: true },
                         { icon: _jsx(IconZoomAuto, {}), name: 'AutoZoom', onClick: () => { handleToggleAutoZoom(); }, id: 'zoom-auto', isPinned: true, isToggle: isAutoZoomEnabled },

package/package.json

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