@topconsultnpm/sdkui-react 6.20.0-dev1.13 → 6.20.0-dev1.130

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

@@ -1,70 +1,201 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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 Notification from '../Notification';
+import ShowAlert from '../../base/TMAlert';
 import TMTooltip from '../../base/TMTooltip';
 import * as S from './styles';
-import { IconApply, IconMenuKebab, IconMenuVertical, IconSettings, IconStar } from '../../../helper';
+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 = [], storageKey = 'floatingMenuBar-config', isConstrained = false, defaultPosition = { x: 100, y: 100 }, maxItems = 8, }) => {
+const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained = false, defaultPosition = { x: 1, y: 90 }, defaultOrientation = 'horizontal', maxItems = 100, defaultPinnedItems = [], fixedItems = [], enableConfigMode = true, bgColor = undefined, hasContextMenu = true, pinnedItemIds: externalPinnedItemIds, onPinChange, }) => {
+    const percentToPixels = (percent, containerSize) => {
+        return (percent / 100) * containerSize;
+    };
+    const pixelsToPercent = (pixels, containerSize) => {
+        return (pixels / containerSize) * 100;
+    };
+    const isPixelFormat = (pos) => {
+        return pos.x > 100 || pos.y > 100;
+    };
+    const migrateToPercentage = (pixelPos) => {
+        const container = containerRef.current?.getBoundingClientRect();
+        const containerWidth = isConstrained && container ? container.width : window.innerWidth;
+        const containerHeight = isConstrained && container ? container.height : window.innerHeight;
+        return {
+            x: pixelsToPercent(pixelPos.x, containerWidth),
+            y: pixelsToPercent(pixelPos.y, containerHeight),
+        };
+    };
+    const getDefaultConfig = () => ({
+        orientation: defaultOrientation,
+        savedItemIds: defaultPinnedItems,
+        position: defaultPosition,
+    });
+    const resetFloatingBarSettings = () => {
+        // Reset the floatingMenuBar settings in SDKUI_Globals to empty
+        SDKUI_Globals.userSettings.searchSettings.floatingMenuBar = {
+            orientation: undefined,
+            itemIds: undefined,
+            position: undefined,
+        };
+    };
     const loadConfig = () => {
+        // If config mode is disabled, use default position and orientation
+        if (!enableConfigMode) {
+            return {
+                orientation: defaultOrientation,
+                savedItemIds: defaultPinnedItems,
+                position: defaultPosition,
+            };
+        }
         try {
-            const saved = localStorage.getItem(storageKey);
-            if (saved) {
-                const config = JSON.parse(saved);
-                return {
-                    orientation: config.orientation || 'horizontal',
-                    pinnedItemIds: new Set(config.pinnedItemIds || []),
-                    savedItemIds: config.itemIds || [],
+            const settings = SDKUI_Globals.userSettings.searchSettings.floatingMenuBar;
+            // If localStorage is empty (first time) or itemIds is empty array, use props as defaults
+            if (!settings || !settings.position || !settings.itemIds || settings.itemIds.length === 0) {
+                return getDefaultConfig();
+            }
+            // Validate position
+            const hasValidPosition = settings.position &&
+                typeof settings.position.x === 'number' &&
+                typeof settings.position.y === 'number' &&
+                !Number.isNaN(settings.position.x) &&
+                !Number.isNaN(settings.position.y) &&
+                Number.isFinite(settings.position.x) &&
+                Number.isFinite(settings.position.y);
+            if (!hasValidPosition) {
+                console.warn('FloatingMenuBar: Invalid position, resetting to defaults');
+                resetFloatingBarSettings();
+                return getDefaultConfig();
+            }
+            // Ensure position is within reasonable viewport bounds
+            const maxX = globalThis.window?.innerWidth ? globalThis.window.innerWidth - 50 : 1000;
+            const maxY = globalThis.window?.innerHeight ? globalThis.window.innerHeight - 50 : 800;
+            if (settings.position.x < 0 || settings.position.x > maxX ||
+                settings.position.y < 0 || settings.position.y > maxY) {
+                console.warn('FloatingMenuBar: Position out of bounds, resetting to defaults');
+                resetFloatingBarSettings();
+                return getDefaultConfig();
+            }
+            // Validate orientation
+            const validOrientation = (settings.orientation === 'horizontal' || settings.orientation === 'vertical')
+                ? settings.orientation
+                : 'horizontal';
+            // Validate itemIds
+            const validItemIds = Array.isArray(settings.itemIds) ? settings.itemIds : [];
+            if (validItemIds.length > 0) {
+                // Check if any ID looks like the old format (contains language-specific text or is too long)
+                const hasOldFormatIds = validItemIds.some(id => typeof id === 'string' &&
+                    !id.startsWith('separator-') &&
+                    (id.length > 20 || id.includes(' ')));
+                if (hasOldFormatIds) {
+                    console.warn('FloatingMenuBar: Detected old name-based configuration, resetting to defaults');
+                    resetFloatingBarSettings();
+                    return getDefaultConfig();
+                }
+            }
+            // Migrate old pixel-based position to percentage-based
+            let finalPosition = settings.position;
+            if (isPixelFormat(settings.position) || settings.positionFormat === 'pixels') {
+                console.log('FloatingMenuBar: Migrating pixel-based position to percentage-based');
+                finalPosition = migrateToPercentage(settings.position);
+                // Save migrated position immediately
+                SDKUI_Globals.userSettings.searchSettings.floatingMenuBar = {
+                    orientation: validOrientation,
+                    itemIds: validItemIds,
+                    position: finalPosition,
+                    positionFormat: 'percentage',
                 };
             }
+            return {
+                orientation: validOrientation,
+                savedItemIds: validItemIds,
+                position: finalPosition,
+            };
         }
         catch (error) {
             console.error('Failed to load FloatingMenuBar config:', error);
+            // Reset to defaults on any error
+            try {
+                resetFloatingBarSettings();
+            }
+            catch (e) {
+                console.error('Failed to reset FloatingMenuBar settings:', e);
+            }
+            return getDefaultConfig();
         }
-        return {
-            orientation: 'horizontal',
-            pinnedItemIds: new Set(),
-            savedItemIds: [],
-        };
     };
     const initialConfig = loadConfig();
     const [state, setState] = useState({
-        position: defaultPosition,
+        position: initialConfig.position, // Stored as percentage
         isDragging: false,
-        isConfigMode: false,
         orientation: initialConfig.orientation,
+        verticalDirection: 'down',
         items: [],
         draggedItemIndex: null,
     });
     const floatingRef = useRef(null);
     const dragOffset = useRef({ x: 0, y: 0 });
-    const [pinnedItemIds, setPinnedItemIds] = useState(initialConfig.pinnedItemIds);
     const [dragOverIndex, setDragOverIndex] = useState(null);
-    const [showMaxItemsNotification, setShowMaxItemsNotification] = useState(false);
-    // Use refs to track item IDs without causing re-renders
+    const [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 positionBeforeOrientationChange = useRef(null);
     const floatingBarItemIds = useRef(new Set());
     const floatingBarItemNames = useRef(new Set());
-    // Update refs when items change, but don't trigger re-renders
+    const isSyncingFromExternal = useRef(false);
+    const isLocalChange = useRef(false);
+    const dragStartPosition = useRef(null);
+    const isItemsInitialized = useRef(false);
     useEffect(() => {
         floatingBarItemIds.current = new Set(state.items.map(i => i.id));
         floatingBarItemNames.current = new Set(state.items.map(i => i.name));
     }, [state.items]);
-    // Convert menu items to flat list with pinned status
+    // Calculate pixel position from percentage when container size or position changes
+    useEffect(() => {
+        const updatePixelPosition = () => {
+            if (!containerRef.current || !floatingRef.current)
+                return;
+            const container = containerRef.current.getBoundingClientRect();
+            const floating = floatingRef.current.getBoundingClientRect();
+            const containerWidth = isConstrained ? container.width : window.innerWidth;
+            const containerHeight = isConstrained ? container.height : window.innerHeight;
+            containerSizeRef.current = { width: containerWidth, height: containerHeight };
+            let newX = percentToPixels(state.position.x, containerWidth);
+            let newY = percentToPixels(state.position.y, containerHeight);
+            newX = Math.max(0, Math.min(newX, containerWidth - floating.width));
+            newY = Math.max(0, Math.min(newY, containerHeight - floating.height));
+            setPixelPosition({ x: newX, y: newY });
+        };
+        updatePixelPosition();
+        const resizeObserver = new ResizeObserver(() => {
+            updatePixelPosition();
+        });
+        if (containerRef.current) {
+            resizeObserver.observe(containerRef.current);
+        }
+        if (!isConstrained) {
+            window.addEventListener('resize', updatePixelPosition);
+        }
+        return () => {
+            resizeObserver.disconnect();
+            if (!isConstrained) {
+                window.removeEventListener('resize', updatePixelPosition);
+            }
+        };
+    }, [state.position, isConstrained]);
     const flattenMenuItems = useCallback((items, parentPath = '') => {
         const result = [];
         items.forEach((item, index) => {
-            const itemId = `${parentPath}${item.name}-${index}`;
-            // Only add items that have onClick (final actions, not submenu parents)
+            const itemId = item.id || `${parentPath}${item.name}-${index}`;
             if (item.onClick && !item.submenu) {
+                const isPinned = state.items.some(i => i.id === itemId);
                 result.push({
                     id: itemId,
                     name: item.name,
-                    icon: item.icon || _jsx(IconStar, {}),
+                    icon: item.icon || _jsx(IconPin, {}),
                     onClick: item.onClick,
                     disabled: item.disabled,
-                    isPinned: pinnedItemIds.has(itemId),
-                    originalMenuItem: item,
+                    isPinned: isPinned,
                 });
             }
             // Recursively process submenus
@@ -73,56 +204,126 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], storageKey = '
             }
         });
         return result;
-    }, [pinnedItemIds]);
-    // Restore items on mount from savedItemIds
+    }, [state.items]);
+    // Restore items on mount (and when contextMenuItems become available) from savedItemIds
     useEffect(() => {
-        if (contextMenuItems.length > 0) {
-            const flatItems = flattenMenuItems(contextMenuItems);
+        // For enableConfigMode=false: always sync with fixedItems
+        if (!enableConfigMode) {
+            if (fixedItems.length > 0) {
+                setState(s => ({ ...s, items: fixedItems }));
+            }
+            return;
+        }
+        // For enableConfigMode=true: only initialize once
+        if (isItemsInitialized.current)
+            return;
+        // Wait until contextMenuItems is populated
+        if (contextMenuItems.length === 0)
+            return;
+        const flatItems = flattenMenuItems(contextMenuItems);
+        if (flatItems.length === 0)
+            return;
+        let itemsToSet = [];
+        if (initialConfig.savedItemIds.length > 0) {
             // Restore items in the saved order from localStorage
             const restoredItems = initialConfig.savedItemIds
+                .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);
+            itemsToSet = restoredItems;
+        }
+        // If still empty, try defaultPinnedItems
+        if (itemsToSet.length === 0 && defaultPinnedItems.length > 0) {
+            const resolvedDefaultItems = defaultPinnedItems
                 .map((id) => flatItems.find(item => item.id === id))
                 .filter((item) => item !== undefined);
-            if (restoredItems.length > 0) {
-                setState(s => ({ ...s, items: restoredItems }));
+            itemsToSet = resolvedDefaultItems;
+        }
+        if (itemsToSet.length > 0) {
+            isItemsInitialized.current = true;
+            setState(s => ({ ...s, items: itemsToSet }));
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [contextMenuItems, fixedItems, enableConfigMode]);
+    // Sync with external pinnedItemIds when they change (from parent component)
+    useEffect(() => {
+        // 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 || !enableConfigMode)
+            return;
+        // Skip sync if external is empty but we have initialized items (first login case)
+        // The parent hook starts with [] but we've initialized with defaults
+        if (externalPinnedItemIds.length === 0 && state.items.length > 0)
+            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 }));
         }
-    }, []); // Only run once on mount
+    }, [externalPinnedItemIds, contextMenuItems, enableConfigMode, flattenMenuItems]);
     const togglePin = useCallback((item) => {
         setState(s => {
-            const isInFloatingBar = s.items.some(i => i.id === item.id || i.name === item.name);
+            const isInFloatingBar = s.items.some(i => i.id === item.id);
             if (isInFloatingBar) {
                 // Remove from floating bar
-                const newItems = s.items.filter(i => i.id !== item.id && i.name !== item.name);
+                const newItems = s.items.filter(i => i.id !== item.id);
                 return { ...s, items: newItems };
             }
             else {
                 // Add to floating bar
                 if (s.items.length >= maxItems) {
-                    setShowMaxItemsNotification(true);
-                    setTimeout(() => setShowMaxItemsNotification(false), 3000);
+                    ShowAlert({
+                        mode: 'warning',
+                        title: 'Limite Massimo Raggiunto',
+                        message: `Hai raggiunto il massimo di ${maxItems} elementi. Rimuovine uno prima di aggiungerne altri.`,
+                        duration: 4000,
+                    });
                     return s;
                 }
                 return { ...s, items: [...s.items, item] };
             }
         });
-        // Update pinned IDs for context menu items
-        setPinnedItemIds(prev => {
-            const newSet = new Set(prev);
-            if (newSet.has(item.id)) {
-                newSet.delete(item.id);
-            }
-            else {
-                newSet.add(item.id);
-            }
-            return newSet;
-        });
     }, [maxItems]);
     // Get current item state (disabled and onClick) from contextMenuItems
-    const getCurrentItemState = useCallback((itemName) => {
+    const getCurrentItemState = useCallback((itemId) => {
         const findInItems = (items) => {
-            for (const item of items) {
-                if (item.name === itemName)
+            for (let i = 0; i < items.length; i++) {
+                const item = items[i];
+                // Match by ID if the item has one
+                if (item.id === itemId)
                     return item;
+                // Check in submenu
                 if (item.submenu) {
                     const found = findInItems(item.submenu);
                     if (found)
@@ -136,58 +337,92 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], storageKey = '
             disabled: foundItem?.disabled,
             onClick: foundItem?.onClick
         };
-    }, [contextMenuItems]); // Enhanced context menu items with pin functionality
-    const enhancedContextMenuItems = useCallback(() => {
+    }, [contextMenuItems]);
+    // Remove trailing separators from items array
+    const removeTrailingSeparators = useCallback((items) => {
+        const result = [...items];
+        while (result.length > 0 && result.at(-1)?.isSeparator) {
+            result.pop();
+        }
+        return result;
+    }, []);
+    // Create a new separator item
+    const createSeparator = useCallback(() => {
+        const separatorId = `separator-${Date.now()}-${Math.random().toString(36).substring(2, 11)}`;
+        return {
+            id: separatorId,
+            name: 'Separator',
+            icon: _jsx(Separator, {}),
+            onClick: () => { },
+            isSeparator: true,
+        };
+    }, []);
+    // Add separator to items
+    const addSeparator = useCallback(() => {
+        if (state.items.length >= maxItems) {
+            ShowAlert({
+                mode: 'warning',
+                title: 'Limite Massimo Raggiunto',
+                message: `Hai raggiunto il massimo di ${maxItems} elementi. Rimuovine uno prima di aggiungerne altri.`,
+                duration: 4000,
+            });
+            return;
+        }
+        const separator = createSeparator();
+        setState(s => ({ ...s, items: [...s.items, separator] }));
+    }, [state.items.length, maxItems, createSeparator]);
+    const getContextMenuItemsWithPinIcons = useCallback(() => {
         const flatItems = flattenMenuItems(contextMenuItems);
-        // Calculate current pinned items directly from state.items (not refs)
         const currentItemIds = new Set(state.items.map(i => i.id));
-        const currentItemNames = new Set(state.items.map(i => i.name));
-        const enhanceItems = (items) => {
+        const addPinIcons = (items) => {
             return items.map(item => {
-                const flatItem = flatItems.find(fi => fi.name === item.name);
-                const itemId = flatItem?.id || '';
-                // Check if item is in the floating bar using current state
-                const isInFloatingBar = currentItemIds.has(itemId) || currentItemNames.has(item.name);
-                const enhanced = {
+                const flatItem = flatItems.find(fi => fi.id === item.id);
+                const itemId = flatItem?.id || item.id || '';
+                const isPinned = currentItemIds.has(itemId);
+                const itemWithPin = {
                     ...item,
-                    rightIcon: item.onClick && !item.submenu ? (isInFloatingBar ? _jsx(IconStar, { color: "#FFD700" }) : _jsx(IconStar, {})) : undefined,
-                    onRightIconClick: item.onClick && !item.submenu ? () => {
-                        if (flatItem) {
-                            togglePin(flatItem);
-                        }
+                    rightIconProps: flatItem ? {
+                        icon: _jsx(IconPin, {}),
+                        activeColor: 'red',
+                        inactiveColor: 'black',
+                        isActive: isPinned,
+                        onClick: () => togglePin(flatItem),
                     } : undefined,
                 };
                 if (item.submenu) {
-                    enhanced.submenu = enhanceItems(item.submenu);
+                    itemWithPin.submenu = addPinIcons(item.submenu);
                 }
-                return enhanced;
+                return itemWithPin;
             });
         };
-        return enhanceItems(contextMenuItems);
+        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
             if (isConstrained) {
                 // For absolute positioning, offset is relative to container
                 dragOffset.current = {
-                    x: e.clientX - containerRect.left - state.position.x,
-                    y: e.clientY - containerRect.top - state.position.y,
+                    x: e.clientX - containerRect.left - pixelPosition.x,
+                    y: e.clientY - containerRect.top - pixelPosition.y,
                 };
             }
             else {
                 // For fixed positioning, offset is relative to viewport
                 dragOffset.current = {
-                    x: e.clientX - state.position.x,
-                    y: e.clientY - state.position.y,
+                    x: e.clientX - pixelPosition.x,
+                    y: e.clientY - pixelPosition.y,
                 };
             }
         }
+        // Save starting position to detect if user actually moved the bar
+        dragStartPosition.current = { ...pixelPosition };
         setState(s => ({ ...s, isDragging: true }));
     };
+    const handleGripDoubleClick = () => {
+        toggleOrientation();
+    };
     const handleMouseMove = useCallback((e) => {
         if (!state.isDragging || !containerRef.current || !floatingRef.current)
             return;
@@ -210,50 +445,230 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], storageKey = '
             newX = Math.max(0, Math.min(newX, window.innerWidth - floating.width));
             newY = Math.max(0, Math.min(newY, window.innerHeight - floating.height));
         }
-        setState(s => ({
-            ...s,
-            position: { x: newX, y: newY },
-        }));
+        // Update pixel position directly during drag
+        setPixelPosition({ x: newX, y: newY });
     }, [state.isDragging, containerRef, isConstrained]);
     const handleMouseUp = useCallback(() => {
-        setState(s => ({ ...s, isDragging: false }));
-    }, []);
+        if (state.isDragging && containerSizeRef.current.width > 0) {
+            // Convert final pixel position to percentage before updating state
+            const percentagePosition = {
+                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,
+                position: percentagePosition,
+            }));
+        }
+        else {
+            setState(s => ({ ...s, isDragging: false }));
+        }
+    }, [state.isDragging, pixelPosition]);
+    // Touch event handlers for tablet support
+    const handleTouchStart = (e) => {
+        const touch = e.touches[0];
+        const containerRect = containerRef.current?.getBoundingClientRect();
+        if (containerRect) {
+            if (isConstrained) {
+                dragOffset.current = {
+                    x: touch.clientX - containerRect.left - pixelPosition.x,
+                    y: touch.clientY - containerRect.top - pixelPosition.y,
+                };
+            }
+            else {
+                dragOffset.current = {
+                    x: touch.clientX - pixelPosition.x,
+                    y: touch.clientY - pixelPosition.y,
+                };
+            }
+        }
+        // Save starting position to detect if user actually moved the bar
+        dragStartPosition.current = { ...pixelPosition };
+        setState(s => ({ ...s, isDragging: true }));
+    };
+    const handleTouchMove = useCallback((e) => {
+        if (!state.isDragging || !containerRef.current || !floatingRef.current)
+            return;
+        const touch = e.touches[0];
+        const container = containerRef.current.getBoundingClientRect();
+        const floating = floatingRef.current.getBoundingClientRect();
+        let newX, newY;
+        if (isConstrained) {
+            newX = touch.clientX - container.left - dragOffset.current.x;
+            newY = touch.clientY - container.top - dragOffset.current.y;
+            newX = Math.max(0, Math.min(newX, container.width - floating.width));
+            newY = Math.max(0, Math.min(newY, container.height - floating.height));
+        }
+        else {
+            newX = touch.clientX - dragOffset.current.x;
+            newY = touch.clientY - dragOffset.current.y;
+            newX = Math.max(0, Math.min(newX, window.innerWidth - floating.width));
+            newY = Math.max(0, Math.min(newY, window.innerHeight - floating.height));
+        }
+        setPixelPosition({ x: newX, y: newY });
+    }, [state.isDragging, containerRef, isConstrained]);
+    const handleTouchEnd = useCallback(() => {
+        if (state.isDragging && containerSizeRef.current.width > 0) {
+            const percentagePosition = {
+                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,
+                position: percentagePosition,
+            }));
+        }
+        else {
+            setState(s => ({ ...s, isDragging: false }));
+        }
+    }, [state.isDragging, pixelPosition]);
     useEffect(() => {
         if (state.isDragging) {
             document.addEventListener('mousemove', handleMouseMove);
             document.addEventListener('mouseup', handleMouseUp);
+            document.addEventListener('touchmove', handleTouchMove);
+            document.addEventListener('touchend', handleTouchEnd);
             return () => {
                 document.removeEventListener('mousemove', handleMouseMove);
                 document.removeEventListener('mouseup', handleMouseUp);
+                document.removeEventListener('touchmove', handleTouchMove);
+                document.removeEventListener('touchend', handleTouchEnd);
             };
         }
         return undefined;
-    }, [state.isDragging, handleMouseMove, handleMouseUp]);
-    // Save to localStorage whenever config changes (excluding position)
+    }, [state.isDragging, handleMouseMove, handleMouseUp, handleTouchMove, handleTouchEnd]);
+    // Save to SDKUI_Globals.userSettings
     useEffect(() => {
+        if (!enableConfigMode)
+            return; // Don't save if config mode is disabled
+        const pinnedIds = state.items.map(item => item.id);
         try {
-            const config = {
+            // Replace the entire object to trigger the Proxy
+            SDKUI_Globals.userSettings.searchSettings.floatingMenuBar = {
                 orientation: state.orientation,
-                pinnedItemIds: Array.from(pinnedItemIds),
-                itemIds: state.items.map(item => item.id), // Save only IDs, not functions
+                itemIds: pinnedIds,
+                position: state.position,
+                positionFormat: 'percentage',
             };
-            localStorage.setItem(storageKey, JSON.stringify(config));
         }
         catch (error) {
             console.error('Failed to save FloatingMenuBar config:', error);
         }
-    }, [state.orientation, state.items, pinnedItemIds, storageKey]);
-    const toggleConfigMode = () => {
-        setState(s => ({ ...s, isConfigMode: !s.isConfigMode }));
-    };
+        // 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, enableConfigMode, onPinChange]);
     const toggleOrientation = () => {
         const newOrientation = state.orientation === 'horizontal' ? 'vertical' : 'horizontal';
-        // First, change the orientation
+        // 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);
+                setState(s => ({
+                    ...s,
+                    orientation: newOrientation,
+                    verticalDirection: 'down',
+                    position: savedPosition,
+                }));
+                positionBeforeOrientationChange.current = null;
+                // Show the bar after the state has been applied
+                requestAnimationFrame(() => {
+                    setIsOrientationChanging(false);
+                });
+                return;
+            }
+        }
+        // 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 },
+                pixelPosition: { ...pixelPosition },
+            };
+            if (floatingRef.current) {
+                const floating = floatingRef.current.getBoundingClientRect();
+                const containerHeight = isConstrained && containerRef.current
+                    ? containerRef.current.getBoundingClientRect().height
+                    : window.innerHeight;
+                // Estimate vertical height (horizontal width becomes vertical height)
+                const estimatedVerticalHeight = floating.width;
+                if (estimatedVerticalHeight > containerHeight - 70) {
+                    ShowAlert({
+                        mode: 'warning',
+                        title: 'Troppi elementi',
+                        message: 'Ci sono troppi elementi nella barra mobile per la modalità verticale.',
+                        duration: 4000,
+                    });
+                    positionBeforeOrientationChange.current = null; // Clear saved position since we're not changing
+                    setIsOrientationChanging(false); // Show bar again since we're not changing
+                    return;
+                }
+                // Check if we're in the bottom part of the screen and don't have enough space below
+                const spaceBelow = containerHeight - floating.bottom;
+                const spaceAbove = floating.top;
+                const needsVerticalSpace = estimatedVerticalHeight - floating.height; // Additional space needed
+                // If not enough space below but enough space above, expand upward
+                if (spaceBelow < needsVerticalSpace && spaceAbove >= needsVerticalSpace) {
+                    // Calculate the new Y position so the bottom of the bar stays at the same place
+                    const currentBottom = pixelPosition.y + floating.height;
+                    const newPixelY = currentBottom - estimatedVerticalHeight;
+                    setState(s => ({
+                        ...s,
+                        orientation: newOrientation,
+                        verticalDirection: 'up',
+                    }));
+                    // Update pixel position and percentage after orientation change
+                    requestAnimationFrame(() => {
+                        requestAnimationFrame(() => {
+                            const newY = Math.max(0, newPixelY);
+                            setPixelPosition(prev => ({ ...prev, y: newY }));
+                            const newPercentY = pixelsToPercent(newY, containerHeight);
+                            setState(s => ({
+                                ...s,
+                                position: { ...s.position, y: newPercentY },
+                            }));
+                            setIsOrientationChanging(false);
+                        });
+                    });
+                    return;
+                }
+            }
+        }
+        // Default case: just change orientation without special positioning
         setState(s => ({
             ...s,
             orientation: newOrientation,
+            verticalDirection: 'down',
         }));
-        // Then, after DOM updates, adjust position to stay in bounds
         requestAnimationFrame(() => {
             requestAnimationFrame(() => {
                 if (containerRef.current && floatingRef.current) {
@@ -278,31 +693,97 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], storageKey = '
                         }));
                     }
                 }
+                setIsOrientationChanging(false);
             });
         });
     };
     const removeItem = (itemId) => {
+        isLocalChange.current = true;
         setState(s => ({
             ...s,
             items: s.items.filter(item => item.id !== itemId),
         }));
-        // Also remove from pinned items if it was pinned
-        setPinnedItemIds(prev => {
-            const newSet = new Set(prev);
-            newSet.delete(itemId);
-            return newSet;
-        });
     };
+    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 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 };
+                    });
+                },
+            },
+            {
+                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 };
+                    });
+                },
+            },
+            {
+                beginGroup: true,
+                name: state.orientation === 'horizontal' ? 'Floating bar verticale' : 'Floating bar orizzontale',
+                icon: _jsx(IconRotate, { fontSize: 16 }),
+                onClick: toggleOrientation,
+            },
+        ];
+    }, [state.items, state.orientation, removeItem, createSeparator, toggleOrientation]);
+    const getSeparatorRightClickMenuItems = useCallback((index) => {
+        return [
+            {
+                name: 'Rimuovi',
+                icon: _jsx(IconDelete, { fontSize: 16 }),
+                onClick: () => removeItem(state.items[index].id),
+            },
+            {
+                name: 'Aggiungi separatore a sinistra',
+                icon: _jsx(IconSeparator, { fontSize: 16 }),
+                disabled: true,
+            },
+            {
+                name: 'Aggiungi separatore a destra',
+                icon: _jsx(IconSeparator, { style: { transform: 'rotate(-90deg)' }, fontSize: 16 }),
+                disabled: true,
+            },
+            {
+                beginGroup: true,
+                name: state.orientation === 'horizontal' ? 'Floating bar verticale' : 'Floating bar orizzontale',
+                icon: _jsx(IconRotate, { fontSize: 16 }),
+                onClick: toggleOrientation,
+            },
+        ];
+    }, [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) {
@@ -310,13 +791,13 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], storageKey = '
         }
     };
     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) {
@@ -324,7 +805,7 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], storageKey = '
         }
     };
     const handleDrop = (e, dropIndex) => {
-        if (!state.isConfigMode || state.draggedItemIndex === null)
+        if (!enableConfigMode || state.draggedItemIndex === null)
             return;
         e.preventDefault();
         e.stopPropagation();
@@ -333,6 +814,7 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], storageKey = '
             setDragOverIndex(null);
             return;
         }
+        isLocalChange.current = true;
         const newItems = [...state.items];
         const [draggedItem] = newItems.splice(dragIndex, 1);
         newItems.splice(dropIndex, 0, draggedItem);
@@ -347,24 +829,37 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], storageKey = '
         setState(s => ({ ...s, draggedItemIndex: null }));
         setDragOverIndex(null);
     };
-    return (_jsxs(_Fragment, { children: [_jsx(S.Overlay, { "$visible": state.isConfigMode }), _jsxs(S.FloatingContainer, { ref: floatingRef, "$x": state.position.x, "$y": state.position.y, "$orientation": state.orientation, "$isDragging": state.isDragging, "$isConfigMode": state.isConfigMode, "$isConstrained": isConstrained, children: [_jsx(S.GripHandle, { "$orientation": state.orientation, onMouseDown: handleMouseDown, children: _jsx(IconDraggableDots, {}) }), _jsx(S.ConfigButton, { onClick: toggleConfigMode, "$isActive": state.isConfigMode, children: state.isConfigMode ? _jsx(IconApply, {}) : _jsx(IconSettings, {}) }), state.items.map((item, index) => {
-                        // Get current state (disabled and onClick) from contextMenuItems
-                        const currentState = getCurrentItemState(item.name);
-                        const isDisabled = currentState.disabled || false;
-                        const currentOnClick = currentState.onClick || item.onClick; // Fallback to stored onClick if not found
-                        return (_jsxs(S.DraggableItem, { "$isDragging": state.draggedItemIndex === index, "$isDragOver": dragOverIndex === index && state.draggedItemIndex !== index, draggable: state.isConfigMode, onDragStart: (e) => handleDragStart(e, index), onDragEnter: (e) => handleDragEnter(e, index), onDragOver: handleDragOver, onDragLeave: (e) => handleDragLeave(e, index), onDrop: (e) => handleDrop(e, index), onDragEnd: handleDragEnd, children: [state.isConfigMode ? (_jsx(S.MenuButton, { onClick: () => {
-                                        if (state.isConfigMode || isDisabled)
-                                            return;
-                                        if (currentOnClick) {
-                                            currentOnClick();
-                                        }
-                                    }, disabled: isDisabled && !state.isConfigMode, children: item.icon })) : (_jsx(TMTooltip, { content: item.name, position: "top", children: _jsx(S.MenuButton, { onClick: () => {
-                                            if (state.isConfigMode || isDisabled)
-                                                return;
-                                            if (currentOnClick) {
-                                                currentOnClick();
-                                            }
-                                        }, disabled: isDisabled, children: item.icon }) })), state.isConfigMode && (_jsx(S.RemoveButton, { onClick: () => removeItem(item.id), children: "\u00D7" }))] }, item.id));
-                    }), !state.isConfigMode && contextMenuItems.length > 0 && (_jsx(ContextMenu, { items: enhancedContextMenuItems(), trigger: "left", children: _jsx(S.MenuButton, { children: _jsx(IconMenuVertical, {}) }) }, Array.from(pinnedItemIds).join(','))), !state.isConfigMode && (_jsx(S.OrientationToggle, { "$orientation": state.orientation, onClick: toggleOrientation, children: _jsx(IconMenuKebab, {}) }))] }), showMaxItemsNotification && (_jsx("div", { style: { position: 'fixed', top: '20px', left: '50%', transform: 'translateX(-50%)', zIndex: 100001 }, children: _jsx(Notification, { title: "Maximum Items Reached", message: `You have reached the maximum number of pinned items (${maxItems}). Please unpin an item before adding a new one.`, mode: "warning", position: "top-center", duration: 4000, closable: true, stopOnMouseEnter: true, hasProgress: true, onClose: () => setShowMaxItemsNotification(false) }) }))] }));
+    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;