@topconsultnpm/sdkui-react 6.20.0-dev1.3 → 6.20.0-dev1.31

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

@@ -2,7 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useState, useRef, useEffect } from 'react';
 import * as S from './styles';
 import { useIsMobile, useMenuPosition } from './hooks';
-const TMContextMenu = ({ items, trigger = 'right', children }) => {
+import { IconArrowLeft } from '../../../helper';
+const TMContextMenu = ({ items, trigger = 'right', children, externalControl }) => {
     const [menuState, setMenuState] = useState({
         visible: false,
         position: { x: 0, y: 0 },
@@ -14,16 +15,33 @@ const TMContextMenu = ({ items, trigger = 'right', children }) => {
     const menuRef = useRef(null);
     const triggerRef = useRef(null);
     const submenuTimeoutRef = useRef(null);
-    const { openLeft, openUp } = useMenuPosition(menuRef, menuState.position);
+    const { openLeft, openUp, isCalculated } = useMenuPosition(menuRef, menuState.position);
     const handleClose = () => {
-        setMenuState(prev => ({
-            ...prev,
-            visible: false,
-            submenuStack: [items],
-            parentNames: [],
-        }));
+        if (externalControl) {
+            externalControl.onClose();
+        }
+        else {
+            setMenuState(prev => ({
+                ...prev,
+                visible: false,
+                submenuStack: [items],
+                parentNames: [],
+            }));
+        }
         setHoveredSubmenus([]);
     };
+    // Sync with external control when provided
+    useEffect(() => {
+        if (externalControl) {
+            setMenuState(prev => ({
+                ...prev,
+                visible: externalControl.visible,
+                position: externalControl.position,
+                submenuStack: [items],
+                parentNames: [],
+            }));
+        }
+    }, [externalControl, items]);
     useEffect(() => {
         if (!menuState.visible)
             return;
@@ -173,15 +191,15 @@ const TMContextMenu = ({ items, trigger = 'right', children }) => {
                 // if (item.disabled) return;
                 item.onRightIconClick?.();
             };
-            return (_jsxs(S.MenuItem, { "$disabled": item.disabled, "$hasSubmenu": !!item.submenu && item.submenu.length > 0, "$beginGroup": item.beginGroup, onMouseDown: handleClick, onMouseEnter: (e) => !isMobile && handleMouseEnter(item, e, depth + 1), onMouseLeave: () => !isMobile && handleMouseLeave(depth + 1), children: [_jsxs(S.MenuItemContent, { children: [item.icon && _jsx(S.IconWrapper, { children: item.icon }), _jsx(S.MenuItemName, { children: item.name })] }), item.rightIcon && item.onRightIconClick && (_jsx(S.RightIconButton, { onClick: handleRightIconClick, onMouseDown: (e) => e.stopPropagation(), "aria-label": `Action for ${item.name}`, children: item.rightIcon })), item.submenu && item.submenu.length > 0 && (_jsx(S.SubmenuIndicator, { "$isMobile": isMobile, children: isMobile ? '›' : '▸' }))] }, itemKey));
+            return (_jsxs(S.MenuItem, { "$disabled": item.disabled, "$hasSubmenu": !!item.submenu && item.submenu.length > 0, "$beginGroup": item.beginGroup, onMouseDown: handleClick, onMouseEnter: (e) => !isMobile && handleMouseEnter(item, e, depth + 1), onMouseLeave: () => !isMobile && handleMouseLeave(depth + 1), title: item.tooltip, children: [_jsxs(S.MenuItemContent, { children: [item.icon && _jsx(S.IconWrapper, { children: item.icon }), _jsx(S.MenuItemName, { children: item.name })] }), item.rightIcon && item.onRightIconClick && (_jsx(S.RightIconButton, { onClick: handleRightIconClick, onMouseDown: (e) => e.stopPropagation(), "aria-label": `Action for ${item.name}`, children: item.rightIcon })), item.submenu && item.submenu.length > 0 && (_jsx(S.SubmenuIndicator, { "$isMobile": isMobile, children: isMobile ? '›' : '▸' }))] }, itemKey));
         });
     };
     const currentMenu = menuState.submenuStack.at(-1) || items;
     const currentParentName = menuState.parentNames.at(-1) || '';
-    return (_jsxs(_Fragment, { children: [_jsx("div", { ref: triggerRef, onContextMenu: handleContextMenu, onClick: handleClick, onKeyDown: (e) => {
+    return (_jsxs(_Fragment, { children: [!externalControl && children && (_jsx("div", { ref: triggerRef, onContextMenu: handleContextMenu, onClick: handleClick, onKeyDown: (e) => {
                     if (e.key === 'Enter' || e.key === ' ') {
                         handleClick(e);
                     }
-                }, role: "button", tabIndex: 0, style: { display: 'inline-block' }, children: children }), menuState.visible && (_jsxs(_Fragment, { children: [_jsx(S.Overlay, { onClick: handleClose }), _jsxs(S.MenuContainer, { ref: menuRef, "$x": menuState.position.x, "$y": menuState.position.y, "$openLeft": openLeft, "$openUp": openUp, children: [isMobile && menuState.parentNames.length > 0 && (_jsxs(S.MobileMenuHeader, { children: [_jsx(S.BackButton, { onClick: handleBack, "aria-label": "Go back", children: "\u2190" }), _jsx(S.HeaderTitle, { children: currentParentName })] })), renderMenuItems(currentMenu, 0)] }), !isMobile && hoveredSubmenus.map((submenu, idx) => (_jsx(S.Submenu, { "$parentRect": submenu.parentRect, "$openUp": submenu.openUp, "data-submenu": "true", onMouseEnter: handleSubmenuMouseEnter, onMouseLeave: () => handleMouseLeave(submenu.depth), children: renderMenuItems(submenu.items, submenu.depth) }, `submenu-${submenu.depth}-${idx}`)))] }))] }));
+                }, role: "button", tabIndex: 0, style: { display: 'inline-block' }, children: children })), menuState.visible && (_jsxs(_Fragment, { children: [_jsx(S.Overlay, { onClick: handleClose }), _jsxs(S.MenuContainer, { ref: menuRef, "$x": menuState.position.x, "$y": menuState.position.y, "$openLeft": openLeft, "$openUp": openUp, "$isPositioned": isCalculated, "$externalControl": !!externalControl, children: [isMobile && menuState.parentNames.length > 0 && (_jsxs(S.MobileMenuHeader, { children: [_jsx(S.BackButton, { onClick: handleBack, "aria-label": "Go back", children: _jsx(IconArrowLeft, {}) }), _jsx(S.HeaderTitle, { children: currentParentName })] })), renderMenuItems(currentMenu, 0)] }), !isMobile && hoveredSubmenus.map((submenu, idx) => (_jsx(S.Submenu, { "$parentRect": submenu.parentRect, "$openUp": submenu.openUp, "data-submenu": "true", onMouseEnter: handleSubmenuMouseEnter, onMouseLeave: () => handleMouseLeave(submenu.depth), children: renderMenuItems(submenu.items, submenu.depth) }, `submenu-${submenu.depth}-${idx}`)))] }))] }));
 };
 export default TMContextMenu;

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

@@ -5,6 +5,7 @@ interface Position {
     y: number;
 }
 export declare const useMenuPosition: (menuRef: React.RefObject<HTMLDivElement | null>, position: Position) => {
+    isCalculated: boolean;
     openLeft: boolean;
     openUp: boolean;
 };

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

@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useLayoutEffect, useRef } from 'react';
 export const useIsMobile = () => {
     const [isMobile, setIsMobile] = useState(false);
     useEffect(() => {
@@ -31,9 +31,12 @@ export const useClickOutside = (callback) => {
 };
 export const useMenuPosition = (menuRef, position) => {
     const [adjustedPosition, setAdjustedPosition] = useState({ openLeft: false, openUp: false });
-    useEffect(() => {
-        if (!menuRef.current)
+    const [isCalculated, setIsCalculated] = useState(false);
+    useLayoutEffect(() => {
+        if (!menuRef.current) {
+            setIsCalculated(false);
             return;
+        }
         const menuRect = menuRef.current.getBoundingClientRect();
         const viewportWidth = window.innerWidth;
         const viewportHeight = window.innerHeight;
@@ -43,6 +46,7 @@ export const useMenuPosition = (menuRef, position) => {
             openLeft: spaceRight < menuRect.width + 20,
             openUp: spaceBottom < menuRect.height + 20,
         });
+        setIsCalculated(true);
     }, [position, menuRef]);
-    return adjustedPosition;
+    return { ...adjustedPosition, isCalculated };
 };

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

@@ -3,6 +3,8 @@ export declare const MenuContainer: import("styled-components/dist/types").IStyl
     $y: number;
     $openLeft: boolean;
     $openUp: boolean;
+    $isPositioned: boolean;
+    $externalControl?: boolean;
 }>> & string;
 export declare const MenuItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $disabled?: boolean;
@@ -12,7 +14,9 @@ export declare const MenuItem: import("styled-components/dist/types").IStyledCom
 export declare const MenuItemContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const IconWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
 export declare const MenuItemName: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
-export declare const RightIconButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
+export declare const RightIconButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}>, never>, never>> & string;
 export declare const SubmenuIndicator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
     $isMobile?: boolean;
 }>> & string;

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

@@ -36,6 +36,13 @@ export const MenuContainer = styled.div `
   animation: ${fadeIn} 0.15s ease-out;
   backdrop-filter: blur(10px);
   border: 1px solid rgba(0, 0, 0, 0.06);
+  opacity: ${props => props.$isPositioned ? 1 : 0};
+  transition: opacity 0.05s ease-in;
+
+  /* Reset color inheritance from parent with !important to override panel header styles */
+  & *:not(svg):not(.right-icon-btn):not(.right-icon-btn *) {
+    color: #1a1a1a !important;
+  }
 
   [data-theme='dark'] & {
     background: #2a2a2a;
@@ -43,6 +50,20 @@ export const MenuContainer = styled.div `
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4),
                 0 2px 8px rgba(0, 0, 0, 0.3);
   }
+
+  [data-theme='dark'] & *:not(svg):not(.right-icon-btn):not(.right-icon-btn *) {
+    color: #e0e0e0 !important;
+  }
+
+  ${props => props.$externalControl && `
+    @media (max-width: 768px) {
+      left: 100px !important;
+      right: 100px !important;
+      max-width: calc(100vw - 200px);
+      width: auto;
+      min-width: auto;
+    }
+  `}
 `;
 export const MenuItem = styled.div `
   display: flex;
@@ -50,7 +71,6 @@ export const MenuItem = styled.div `
   justify-content: space-between;
   padding: 4px 12px;
   cursor: ${props => props.$disabled ? 'not-allowed' : 'pointer'};
-  opacity: ${props => props.$disabled ? 0.4 : 1};
   transition: all 0.15s ease;
   position: relative;
   user-select: none;
@@ -63,12 +83,26 @@ export const MenuItem = styled.div `
     padding-top: 8px;
   `}
 
+  /* Apply opacity only to direct children except right-icon-btn */
+  & > *:not(.right-icon-btn) {
+    opacity: ${props => props.$disabled ? 0.4 : 1};
+  }
+
+  /* Right icon button hidden by default, shown on hover */
+  & .right-icon-btn {
+    cursor: pointer !important;
+  }
+
   &:hover {
     ${props => !props.$disabled && `
       background: linear-gradient(90deg, #f0f7ff 0%, #e6f2ff 100%);
       color: #0066cc;
-      padding-left: 14px;
     `}
+    
+    /* Show right icon on hover */
+    & .right-icon-btn {
+      opacity: 1 !important;
+    }
   }
 
   &:active {
@@ -99,8 +133,8 @@ export const MenuItem = styled.div `
   }
 
   @media (max-width: 768px) {
-    padding: 14px 16px;
-    font-size: 15px;
+    padding: 4px 10px;
+    font-size: 12px;
   }
 `;
 export const MenuItemContent = styled.div `
@@ -124,23 +158,23 @@ export const MenuItemName = styled.span `
   overflow-wrap: break-word;
   line-height: 1.4;
 `;
-export const RightIconButton = styled.button `
+export const RightIconButton = styled.button.attrs({
+    className: 'right-icon-btn'
+}) `
   display: flex;
   align-items: center;
   justify-content: center;
   background: transparent;
   border: none;
-  cursor: pointer;
+  cursor: pointer !important;
   padding: 4px 8px;
   margin-left: 8px;
   border-radius: 6px;
-  color: inherit;
   font-size: 14px;
-  opacity: 0.6;
-  transition: all 0.15s ease;
+  opacity: 0 !important;
+  transition: opacity 0.15s ease, background 0.15s ease, transform 0.15s ease;
 
   &:hover {
-    opacity: 1;
     background: rgba(0, 0, 0, 0.05);
     transform: scale(1.1);
   }
@@ -223,17 +257,26 @@ export const Submenu = styled.div `
     background: transparent;
   }
 
+  /* Reset color inheritance from parent with !important to override panel header styles */
+  & *:not(svg):not(.right-icon-btn):not(.right-icon-btn *) {
+    color: #1a1a1a !important;
+  }
+
   [data-theme='dark'] & {
     background: #2a2a2a;
     border-color: rgba(255, 255, 255, 0.1);
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4),
                 0 2px 8px rgba(0, 0, 0, 0.3);
   }
+
+  [data-theme='dark'] & *:not(svg):not(.right-icon-btn):not(.right-icon-btn *) {
+    color: #e0e0e0 !important;
+  }
 `;
 export const MobileMenuHeader = styled.div `
   display: flex;
   align-items: center;
-  padding: 12px 16px;
+  padding: 4px 8px;
   border-bottom: 1px solid rgba(0, 0, 0, 0.08);
   margin-bottom: 8px;
   gap: 12px;
@@ -249,33 +292,18 @@ export const BackButton = styled.button `
   display: flex;
   align-items: center;
   justify-content: center;
-  background: #0066cc;
-  color: white;
   border: none;
   border-radius: 8px;
   width: 32px;
   height: 32px;
   cursor: pointer;
-  font-size: 18px;
   transition: all 0.15s ease;
-
-  &:hover {
-    background: #0052a3;
-    transform: scale(1.05);
-  }
+  font-size: 16px;
+  transform: translateY(-2px);
 
   &:active {
     transform: scale(0.95);
   }
-
-  [data-theme='dark'] & {
-    background: #4db8ff;
-    color: #1a1a1a;
-
-    &:hover {
-      background: #66c2ff;
-    }
-  }
 `;
 export const HeaderTitle = styled.h3 `
   margin: 0;

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

@@ -8,11 +8,21 @@ export interface TMContextMenuItemProps {
     rightIcon?: React.ReactNode;
     onRightIconClick?: () => void;
     beginGroup?: boolean;
+    tooltip?: string;
+    operationType?: 'singleRow' | 'multiRow';
 }
 export interface TMContextMenuProps {
     items: TMContextMenuItemProps[];
     trigger?: 'right' | 'left';
     children?: React.ReactNode;
+    externalControl?: {
+        visible: boolean;
+        position: {
+            x: number;
+            y: number;
+        };
+        onClose: () => void;
+    };
 }
 export interface Position {
     x: number;

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

@@ -1,36 +1,37 @@
 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 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 { IconApply, IconMenuKebab, IconMenuVertical, IconPencil, IconPin, SDKUI_Globals } from '../../../helper';
 const IconDraggableDots = (props) => (_jsx("svg", { fontSize: 18, viewBox: "0 0 24 24", fill: "currentColor", height: "1em", width: "1em", ...props, children: _jsx("path", { d: "M9 3a2 2 0 11-4 0 2 2 0 014 0zm0 9a2 2 0 11-4 0 2 2 0 014 0zm0 9a2 2 0 11-4 0 2 2 0 014 0zm10-18a2 2 0 11-4 0 2 2 0 014 0zm0 9a2 2 0 11-4 0 2 2 0 014 0zm0 9a2 2 0 11-4 0 2 2 0 014 0z" }) }));
-const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], storageKey = 'floatingMenuBar-config', isConstrained = false, defaultPosition = { x: 100, y: 100 }, maxItems = 8, }) => {
+const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained = false, defaultPosition = { x: 100, y: 100 }, maxItems = 8, }) => {
     const loadConfig = () => {
         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;
+            // Check if position was actually saved (not just the default class value)
+            const hasSavedPosition = settings.position &&
+                (settings.position.x !== 100 || settings.position.y !== 100 ||
+                    (settings.itemIds && settings.itemIds.length > 0));
+            return {
+                orientation: settings.orientation || 'horizontal',
+                savedItemIds: settings.itemIds || [],
+                position: hasSavedPosition ? settings.position : defaultPosition,
+            };
         }
         catch (error) {
             console.error('Failed to load FloatingMenuBar config:', error);
+            return {
+                orientation: 'horizontal',
+                savedItemIds: [],
+                position: defaultPosition,
+            };
         }
-        return {
-            orientation: 'horizontal',
-            pinnedItemIds: new Set(),
-            savedItemIds: [],
-        };
     };
     const initialConfig = loadConfig();
     const [state, setState] = useState({
-        position: defaultPosition,
+        position: initialConfig.position,
         isDragging: false,
         isConfigMode: false,
         orientation: initialConfig.orientation,
@@ -39,9 +40,7 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], storageKey = '
     });
     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 floatingBarItemIds = useRef(new Set());
     const floatingBarItemNames = useRef(new Set());
@@ -57,13 +56,15 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], storageKey = '
             const itemId = `${parentPath}${item.name}-${index}`;
             // Only add items that have onClick (final actions, not submenu parents)
             if (item.onClick && !item.submenu) {
+                // Check if item is currently in the floating bar
+                const isPinned = state.items.some(i => i.id === itemId || i.name === item.name);
                 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),
+                    isPinned: isPinned,
                     originalMenuItem: item,
                 });
             }
@@ -73,7 +74,7 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], storageKey = '
             }
         });
         return result;
-    }, [pinnedItemIds]);
+    }, [state.items]);
     // Restore items on mount from savedItemIds
     useEffect(() => {
         if (contextMenuItems.length > 0) {
@@ -98,24 +99,17 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], storageKey = '
             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) => {
@@ -150,7 +144,7 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], storageKey = '
                 const isInFloatingBar = currentItemIds.has(itemId) || currentItemNames.has(item.name);
                 const enhanced = {
                     ...item,
-                    rightIcon: item.onClick && !item.submenu ? (isInFloatingBar ? _jsx(IconStar, { color: "#FFD700" }) : _jsx(IconStar, {})) : undefined,
+                    rightIcon: item.onClick && !item.submenu ? (isInFloatingBar ? _jsx(IconPin, { color: "#e12a2a" }) : _jsx(IconPin, {})) : undefined,
                     onRightIconClick: item.onClick && !item.submenu ? () => {
                         if (flatItem) {
                             togglePin(flatItem);
@@ -229,20 +223,20 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], storageKey = '
         }
         return undefined;
     }, [state.isDragging, handleMouseMove, handleMouseUp]);
-    // Save to localStorage whenever config changes (excluding position)
+    // Save to SDKUI_Globals.userSettings whenever config changes (including position)
     useEffect(() => {
         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: state.items.map(item => item.id),
+                position: state.position,
             };
-            localStorage.setItem(storageKey, JSON.stringify(config));
         }
         catch (error) {
             console.error('Failed to save FloatingMenuBar config:', error);
         }
-    }, [state.orientation, state.items, pinnedItemIds, storageKey]);
+    }, [state.orientation, state.items, state.position]);
     const toggleConfigMode = () => {
         setState(s => ({ ...s, isConfigMode: !s.isConfigMode }));
     };
@@ -286,12 +280,6 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], storageKey = '
             ...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;
-        });
     };
     // Drag and drop for reordering
     const handleDragStart = (e, index) => {
@@ -347,7 +335,7 @@ 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) => {
+    return (_jsxs(_Fragment, { children: [_jsx(S.Overlay, { "$visible": state.isConfigMode }), _jsxs(S.FloatingContainer, { ref: floatingRef, "$x": state.position.x, "$y": state.position.y, "$orientation": state.orientation, "$isDragging": state.isDragging, "$isConfigMode": state.isConfigMode, "$isConstrained": isConstrained, children: [_jsx(S.GripHandle, { "$orientation": state.orientation, onMouseDown: handleMouseDown, children: _jsx(IconDraggableDots, {}) }), _jsx(S.Separator, { "$orientation": state.orientation }), state.items.map((item, index) => {
                         // Get current state (disabled and onClick) from contextMenuItems
                         const currentState = getCurrentItemState(item.name);
                         const isDisabled = currentState.disabled || false;
@@ -365,6 +353,6 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], storageKey = '
                                                 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) }) }))] }));
+                    }), !state.isConfigMode && contextMenuItems.length > 0 && (_jsx(ContextMenu, { items: enhancedContextMenuItems(), trigger: "left", children: _jsx(S.ContextMenuButton, { children: _jsx(IconMenuVertical, {}) }) }, state.items.map(i => i.id).join(','))), _jsx(S.ConfigButton, { onClick: toggleConfigMode, "$isActive": state.isConfigMode, children: state.isConfigMode ? _jsx(IconApply, {}) : _jsx(IconPencil, {}) }), !state.isConfigMode && (_jsx(S.OrientationToggle, { "$orientation": state.orientation, onClick: toggleOrientation, children: _jsx(IconMenuKebab, {}) }))] })] }));
 };
 export default TMFloatingMenuBar;

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

@@ -21,12 +21,20 @@ export declare const FloatingContainer: import("styled-components/dist/types").I
 export declare const GripHandle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $orientation: "horizontal" | "vertical";
 }>> & string;
+export declare const Separator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $orientation: "horizontal" | "vertical";
+}>> & string;
 export declare const MenuButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
     $isActive?: boolean;
 }>> & string;
 export declare const ConfigButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
     $isActive?: boolean;
 }>> & string;
+export declare const ContextMenuButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "$isActive"> & {
+    $isActive?: boolean;
+}, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, never>> & string;
 export declare const RemoveButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
 export declare const OrientationToggle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
     $orientation: "horizontal" | "vertical";