@topconsultnpm/sdkui-react 6.20.0-dev1.10 → 6.20.0-dev1.101

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

@@ -0,0 +1,821 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useRef, useEffect, useCallback } from 'react';
+import { ContextMenu } from '../ContextMenu';
+import 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 { 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 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: contextMenuDefaultPinnedIds,
+        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 (disbaleConfigMode) {
+            return {
+                orientation: defaultOrientation,
+                savedItemIds: contextMenuDefaultPinnedIds,
+                position: defaultPosition,
+            };
+        }
+        try {
+            const settings = SDKUI_Globals.userSettings.searchSettings.floatingMenuBar;
+            // If localStorage is empty (first time), use props as defaults
+            if (!settings || !settings.position || !settings.itemIds) {
+                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();
+        }
+    };
+    const initialConfig = loadConfig();
+    const [state, setState] = useState({
+        position: initialConfig.position, // Stored as percentage
+        isDragging: false,
+        isConfigMode: false,
+        orientation: initialConfig.orientation,
+        items: [],
+        draggedItemIndex: null,
+    });
+    const floatingRef = useRef(null);
+    const dragOffset = useRef({ x: 0, y: 0 });
+    const [dragOverIndex, setDragOverIndex] = useState(null);
+    const [pixelPosition, setPixelPosition] = useState({ x: 0, y: 0 }); // Calculated pixel position
+    const containerSizeRef = useRef({ width: 0, height: 0 });
+    const stateSnapshot = useRef(null);
+    const floatingBarItemIds = useRef(new Set());
+    const floatingBarItemNames = useRef(new Set());
+    useEffect(() => {
+        floatingBarItemIds.current = new Set(state.items.map(i => i.id));
+        floatingBarItemNames.current = new Set(state.items.map(i => i.name));
+    }, [state.items]);
+    // 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 = 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(IconPin, {}),
+                    onClick: item.onClick,
+                    disabled: item.disabled,
+                    isPinned: isPinned,
+                });
+            }
+            // Recursively process submenus
+            if (item.submenu) {
+                result.push(...flattenMenuItems(item.submenu, `${itemId}/`));
+            }
+        });
+        return result;
+    }, [state.items]);
+    // Restore items on mount from savedItemIds
+    useEffect(() => {
+        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) {
+                itemsToSet = defaultItems;
+            }
+            else if (!disbaleConfigMode && initialConfig.savedItemIds.length > 0) {
+                // Restore items in the saved order from localStorage (only if config mode is enabled)
+                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;
+            }
+            else if (contextMenuDefaultPinnedIds.length > 0) {
+                // First time: Use contextMenuDefaultPinnedIds from props to find items by ID
+                const defaultPinnedItems = contextMenuDefaultPinnedIds
+                    .map((id) => flatItems.find(item => item.id === id))
+                    .filter((item) => item !== undefined);
+                itemsToSet = defaultPinnedItems;
+            }
+            else if (defaultItems.length > 0) {
+                // Use defaultItems as fallback
+                itemsToSet = defaultItems;
+            }
+            if (itemsToSet.length > 0) {
+                setState(s => ({ ...s, items: itemsToSet }));
+            }
+        }
+    }, disbaleConfigMode ? [defaultItems] : []); // Update when defaultItems change if config mode is disabled
+    const togglePin = useCallback((item) => {
+        setState(s => {
+            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);
+                return { ...s, items: newItems };
+            }
+            else {
+                // Add to floating bar
+                if (s.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 s;
+                }
+                return { ...s, items: [...s.items, item] };
+            }
+        });
+    }, [maxItems]);
+    // Get current item state (disabled and onClick) from contextMenuItems
+    const getCurrentItemState = useCallback((itemId) => {
+        const findInItems = (items) => {
+            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)
+                        return found;
+                }
+            }
+            return undefined;
+        };
+        const foundItem = findInItems(contextMenuItems);
+        return {
+            disabled: foundItem?.disabled,
+            onClick: foundItem?.onClick
+        };
+    }, [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 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,
+                    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));
+        const addPinIcons = (items) => {
+            return items.map(item => {
+                const flatItem = flatItems.find(fi => fi.id === item.id);
+                const itemId = flatItem?.id || item.id || '';
+                const isPinned = currentItemIds.has(itemId);
+                const itemWithPin = {
+                    ...item,
+                    rightIcon: flatItem ? _jsx(IconPin, { color: isPinned ? 'red' : 'black' }) : undefined,
+                    onRightIconClick: flatItem ? () => {
+                        togglePin(flatItem);
+                    } : undefined,
+                };
+                if (item.submenu) {
+                    itemWithPin.submenu = addPinIcons(item.submenu);
+                }
+                return itemWithPin;
+            });
+        };
+        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 - pixelPosition.x,
+                    y: e.clientY - containerRect.top - pixelPosition.y,
+                };
+            }
+            else {
+                // For fixed positioning, offset is relative to viewport
+                dragOffset.current = {
+                    x: e.clientX - pixelPosition.x,
+                    y: e.clientY - pixelPosition.y,
+                };
+            }
+        }
+        setState(s => ({ ...s, isDragging: true }));
+    };
+    const handleGripDoubleClick = () => {
+        if (state.isConfigMode)
+            return;
+        toggleOrientation();
+    };
+    const handleMouseMove = useCallback((e) => {
+        if (!state.isDragging || !containerRef.current || !floatingRef.current)
+            return;
+        const container = containerRef.current.getBoundingClientRect();
+        const floating = floatingRef.current.getBoundingClientRect();
+        let newX, newY;
+        if (isConstrained) {
+            // For constrained (absolute positioning), use container coordinates
+            newX = e.clientX - container.left - dragOffset.current.x;
+            newY = e.clientY - container.top - dragOffset.current.y;
+            // Constrain to container bounds
+            newX = Math.max(0, Math.min(newX, container.width - floating.width));
+            newY = Math.max(0, Math.min(newY, container.height - floating.height));
+        }
+        else {
+            // For unconstrained (fixed positioning), use viewport coordinates
+            newX = e.clientX - dragOffset.current.x;
+            newY = e.clientY - dragOffset.current.y;
+            // Constrain to viewport bounds
+            newX = Math.max(0, Math.min(newX, window.innerWidth - floating.width));
+            newY = Math.max(0, Math.min(newY, window.innerHeight - floating.height));
+        }
+        // Update pixel position directly during drag
+        setPixelPosition({ x: newX, y: newY });
+    }, [state.isDragging, containerRef, isConstrained]);
+    const handleMouseUp = useCallback(() => {
+        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),
+            };
+            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) => {
+        if (state.isConfigMode)
+            return;
+        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,
+                };
+            }
+        }
+        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),
+            };
+            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, handleTouchMove, handleTouchEnd]);
+    // Save to SDKUI_Globals.userSettings only when NOT in config mode (when applying changes)
+    useEffect(() => {
+        if (state.isConfigMode)
+            return; // Don't save during edit mode
+        if (disbaleConfigMode)
+            return; // Don't save if config mode is disabled
+        try {
+            // Replace the entire object to trigger the Proxy
+            SDKUI_Globals.userSettings.searchSettings.floatingMenuBar = {
+                orientation: state.orientation,
+                itemIds: state.items.map(item => item.id),
+                position: state.position,
+                positionFormat: 'percentage',
+            };
+        }
+        catch (error) {
+            console.error('Failed to save FloatingMenuBar config:', error);
+        }
+    }, [state.orientation, state.items, state.position, state.isConfigMode, disbaleConfigMode]);
+    const toggleConfigMode = () => {
+        setState(s => {
+            if (!s.isConfigMode) {
+                stateSnapshot.current = {
+                    items: [...s.items],
+                    orientation: s.orientation,
+                    position: { ...s.position },
+                };
+                return { ...s, isConfigMode: true };
+            }
+            else {
+                // Exiting edit mode (applying changes) - clean up trailing separators and clear snapshot
+                stateSnapshot.current = null;
+                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,
+                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,
+                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,
+                        position: { ...stateSnapshot.current.position },
+                        isConfigMode: false,
+                    }));
+                    stateSnapshot.current = null;
+                }
+            },
+        });
+    };
+    const toggleOrientation = () => {
+        const newOrientation = state.orientation === 'horizontal' ? 'vertical' : 'horizontal';
+        if (state.orientation === 'horizontal' && newOrientation === 'vertical') {
+            if (floatingRef.current) {
+                const floating = floatingRef.current.getBoundingClientRect();
+                const screenHeight = window.innerHeight;
+                if (floating.width > screenHeight - 70) {
+                    ShowAlert({
+                        mode: 'warning',
+                        title: 'Troppi elementi',
+                        message: 'Ci sono troppi elementi nella barra mobile per la modalità verticale.',
+                        duration: 4000,
+                    });
+                    return;
+                }
+            }
+        }
+        setState(s => ({
+            ...s,
+            orientation: newOrientation,
+        }));
+        requestAnimationFrame(() => {
+            requestAnimationFrame(() => {
+                if (containerRef.current && floatingRef.current) {
+                    const container = containerRef.current.getBoundingClientRect();
+                    const floating = floatingRef.current.getBoundingClientRect();
+                    let newX, newY;
+                    if (isConstrained) {
+                        // For constrained mode, use container bounds
+                        newX = Math.max(0, Math.min(state.position.x, container.width - floating.width));
+                        newY = Math.max(0, Math.min(state.position.y, container.height - floating.height));
+                    }
+                    else {
+                        // For unconstrained mode, use viewport bounds
+                        newX = Math.max(0, Math.min(state.position.x, window.innerWidth - floating.width));
+                        newY = Math.max(0, Math.min(state.position.y, window.innerHeight - floating.height));
+                    }
+                    // Only update position if it changed (to avoid unnecessary re-render)
+                    if (newX !== state.position.x || newY !== state.position.y) {
+                        setState(s => ({
+                            ...s,
+                            position: { x: newX, y: newY },
+                        }));
+                    }
+                }
+            });
+        });
+    };
+    const removeItem = (itemId) => {
+        setState(s => ({
+            ...s,
+            items: s.items.filter(item => item.id !== itemId),
+        }));
+    };
+    // Drag and drop for reordering
+    const handleDragStart = (e, index) => {
+        if (!state.isConfigMode)
+            return;
+        e.dataTransfer.effectAllowed = 'move';
+        e.dataTransfer.setData('text/plain', index.toString());
+        setState(s => ({ ...s, draggedItemIndex: index }));
+    };
+    const handleDragEnter = (e, index) => {
+        if (!state.isConfigMode)
+            return;
+        e.preventDefault();
+        if (state.draggedItemIndex !== index) {
+            setDragOverIndex(index);
+        }
+    };
+    const handleDragOver = (e) => {
+        if (!state.isConfigMode)
+            return;
+        e.preventDefault();
+        e.dataTransfer.dropEffect = 'move';
+    };
+    const handleDragLeave = (_e, index) => {
+        if (!state.isConfigMode)
+            return;
+        // Only clear if we're actually leaving this specific item
+        if (dragOverIndex === index) {
+            setDragOverIndex(null);
+        }
+    };
+    const handleDrop = (e, dropIndex) => {
+        if (!state.isConfigMode || state.draggedItemIndex === null)
+            return;
+        e.preventDefault();
+        e.stopPropagation();
+        const dragIndex = state.draggedItemIndex;
+        if (dragIndex === dropIndex) {
+            setDragOverIndex(null);
+            return;
+        }
+        const newItems = [...state.items];
+        const [draggedItem] = newItems.splice(dragIndex, 1);
+        newItems.splice(dropIndex, 0, draggedItem);
+        setState(s => ({
+            ...s,
+            items: newItems,
+            draggedItemIndex: null,
+        }));
+        setDragOverIndex(null);
+    };
+    const handleDragEnd = () => {
+        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, "$isDragging": state.isDragging, "$isConfigMode": state.isConfigMode, "$isConstrained": isConstrained, "$bgColor": bgColor, onContextMenu: (e) => e.preventDefault(), children: [!state.isConfigMode ? (_jsx(ContextMenu, { items: [
+                            ...(!disbaleConfigMode ? [{
+                                    name: SDKUI_Localizator.Configure,
+                                    onClick: () => {
+                                        if (!state.isConfigMode) {
+                                            toggleConfigMode();
+                                        }
+                                    },
+                                }] : []),
+                            {
+                                name: state.orientation === 'horizontal' ? 'Floating bar verticale' : 'Floating bar orizzontale',
+                                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 (_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: [_jsx(S.ItemSeparator, { "$orientation": state.orientation, "$isConfigMode": state.isConfigMode }), state.isConfigMode && (_jsx(S.RemoveButton, { onClick: () => removeItem(item.id), children: "\u00D7" }))] }, 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: 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
+                                            ? '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 }) }) })] })] }))] })] }));
+};
+export default TMFloatingMenuBar;