@topconsultnpm/sdkui-react 6.20.0-dev1.2 → 6.20.0-dev1.21

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

@@ -14,7 +14,7 @@ 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,
@@ -173,7 +173,7 @@ 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;
@@ -182,6 +182,6 @@ const TMContextMenu = ({ items, trigger = 'right', children }) => {
                     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, 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}`)))] }))] }));
 };
 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,7 @@ export declare const MenuContainer: import("styled-components/dist/types").IStyl
     $y: number;
     $openLeft: boolean;
     $openUp: boolean;
+    $isPositioned: 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 +13,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,10 @@ 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;
+  }
 `;
 export const MenuItem = styled.div `
   display: flex;
@@ -50,7 +61,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 +73,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 {
@@ -124,23 +148,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,12 +247,21 @@ 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;

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

@@ -8,6 +8,7 @@ export interface TMContextMenuItemProps {
     rightIcon?: React.ReactNode;
     onRightIconClick?: () => void;
     beginGroup?: boolean;
+    tooltip?: string;
 }
 export interface TMContextMenuProps {
     items: TMContextMenuItemProps[];

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

@@ -1,36 +1,40 @@
 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 = [], storageKey = 'floatingMenuBar-config', // Kept for backward compatibility but not used
+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',
+                pinnedItemIds: new Set(settings.pinnedItemIds || []),
+                savedItemIds: settings.itemIds || [],
+                position: hasSavedPosition ? settings.position : defaultPosition,
+            };
         }
         catch (error) {
             console.error('Failed to load FloatingMenuBar config:', error);
+            return {
+                orientation: 'horizontal',
+                pinnedItemIds: new Set(),
+                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,
@@ -41,7 +45,6 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], storageKey = '
     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());
@@ -60,7 +63,7 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], storageKey = '
                 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),
@@ -98,8 +101,12 @@ 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] };
@@ -150,7 +157,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 +236,21 @@ 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, pinnedItemIds]);
     const toggleConfigMode = () => {
         setState(s => ({ ...s, isConfigMode: !s.isConfigMode }));
     };
@@ -347,7 +355,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 +373,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, {}) }) }, Array.from(pinnedItemIds).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";

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

@@ -55,7 +55,7 @@ export const FloatingContainer = styled.div.attrs(props => ({
   transition: none;
 
   &:hover {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    background: linear-gradient(135deg, #0071BC 0%, #1B1464 100%);
     border: 1px solid #667eea;
     box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3),
                 0 6px 16px rgba(0, 0, 0, 0.2);
@@ -98,6 +98,13 @@ export const GripHandle = styled.div `
     height: 14px;
   }
 `;
+export const Separator = styled.div `
+  background: rgba(255, 255, 255, 0.25);
+  width: ${props => props.$orientation === 'horizontal' ? '1px' : '100%'};
+  height: ${props => props.$orientation === 'horizontal' ? '24px' : '1px'};
+  margin: ${props => props.$orientation === 'horizontal' ? '0 4px' : '4px 0'};
+  flex-shrink: 0;
+`;
 export const MenuButton = styled.button `
   display: flex;
   align-items: center;
@@ -110,36 +117,35 @@ export const MenuButton = styled.button `
   color: white;
   font-size: 16px;
   cursor: pointer;
-  transition: all 0.2s ease;
+  transition: background 0.2s ease;
   position: relative;
 
   &:hover:not(:disabled) {
     background: rgba(255, 255, 255, 0.2);
-    transform: scale(1.1);
   }
 
   &:active:not(:disabled) {
-    transform: scale(0.95);
+    opacity: 0.8;
   }
 
   &:disabled {
-    opacity: 0.3;
+    opacity: 0.5;
     cursor: not-allowed;
-    background: rgba(255, 255, 255, 0.05);
-    color: rgba(255, 255, 255, 0.4);
+    color: rgba(255, 255, 255, 0.6);
   }
 
   svg {
     width: 18px;
     height: 18px;
+    transform: translateY(2px);
   }
 `;
 export const ConfigButton = styled.button `
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 34px;
-  height: 34px;
+  width: 28px;
+  height: 28px;
   background: ${props => props.$isActive
     ? 'rgba(0, 0, 0, 0.2)'
     : 'rgba(0, 0, 0, 0.1)'};
@@ -148,9 +154,9 @@ export const ConfigButton = styled.button `
     : 'rgba(255, 255, 255, 0.15)'};
   border-radius: 8px;
   color: white;
-  font-size: 16px;
+  font-size: 14px;
   cursor: pointer;
-  transition: all 0.2s ease;
+  transition: background 0.2s ease, border-color 0.2s ease;
   position: relative;
 
   &:hover {
@@ -158,16 +164,20 @@ export const ConfigButton = styled.button `
     ? 'rgba(0, 0, 0, 0.25)'
     : 'rgba(0, 0, 0, 0.15)'};
     border-color: rgba(255, 255, 255, 0.35);
-    transform: scale(1.05);
   }
 
   &:active {
-    transform: scale(0.95);
+    opacity: 0.8;
   }
 
   svg {
-    width: 20px;
-    height: 20px;
+    width: 16px;
+    height: 16px;
+  }
+`;
+export const ContextMenuButton = styled(MenuButton) `
+  svg {
+    transform: translateY(0);
   }
 `;
 export const RemoveButton = styled.button `
@@ -177,25 +187,26 @@ export const RemoveButton = styled.button `
   width: 20px;
   height: 20px;
   background: #ef4444;
-  border: 2px solid white;
+  border: none;
   border-radius: 50%;
   color: white;
-  font-size: 12px;
+  font-size: 14px;
   font-weight: bold;
+  line-height: 1;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
+  padding: 0;
   transition: all 0.2s ease;
   z-index: 1;
 
   &:hover {
     background: #dc2626;
-    transform: scale(1.15);
   }
 
   &:active {
-    transform: scale(0.9);
+    background: #b91c1c;
   }
 `;
 export const OrientationToggle = styled.button `

package/lib/components/base/TMAccordion.js

@@ -47,12 +47,12 @@ const StyledGroupTemplate = styled.div `
     &::after {
         content: '';
         display: block;
-        width: 90%;
+        width: calc(100% - 35px);
         margin: 0 auto;
         border-bottom: 1px solid #00A99D;
         margin-top: 8px;
         position: absolute;
-        left: 5%;
+        left: 35px;
         bottom: 0;
     }
 `;

package/lib/components/base/TMCustomButton.js

@@ -8,7 +8,6 @@ const IframeContainer = styled.div `
   display: flex;
   height: 100%;
   flex-direction: column;
-  padding-left: 15px;
 `;
 const StyledIframe = styled.iframe `
   border: none;

package/lib/components/base/TMDataGrid.d.ts

@@ -39,8 +39,8 @@ export interface TMDataGridProps<T> extends IDataGridOptions {
     showFilterPanel?: boolean;
     /** Show the load panel */
     showLoadPanel?: boolean;
-    /** Show the column chooser */
-    showColumnChooser?: boolean;
+    /** Show the header column chooser in context menu */
+    showHeaderColumnChooser?: boolean;
     /** Show the search panel */
     showSearchPanel?: boolean;
     /** Show the group panel */

package/lib/components/base/TMDataGrid.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
-import DataGrid, { Column, HeaderFilter, Selection, Scrolling, LoadPanel, SearchPanel, Pager, Sorting, Paging, FilterPanel, ColumnChooser, Grouping, GroupPanel, Summary, Editing, FilterRow, StateStoring, RowDragging, MasterDetail } from 'devextreme-react/data-grid';
+import DataGrid, { Column, HeaderFilter, Selection, Scrolling, LoadPanel, SearchPanel, Pager, Sorting, Paging, FilterPanel, ColumnChooser, Grouping, GroupPanel, Summary, Editing, FilterRow, StateStoring, RowDragging, MasterDetail, Position, ColumnChooserSearch, ColumnChooserSelection } from 'devextreme-react/data-grid';
 import DataSource from 'devextreme/data/data_source';
 import { IconAll, IconSelected, IconVisible, SDKUI_Globals, SDKUI_Localizator } from '../../helper';
 import TMCounterContainer, { CounterItemKey } from './TMCounterContainer';
@@ -16,9 +16,9 @@ const TMDataGrid = React.forwardRef((props, ref) => {
     // main properties
     keyExpr = 'id', dataSource, focusedRowEnabled = true, hoverStateEnabled = true, focusedRowKey, selectedRowKeys = [], 
     // custom options
-    dataColumns = [], pageSize = TMDataGridPageSize.Large, showHeaderFilter = true, showFilterPanel = true, showLoadPanel = true, showSearchPanel = true, searchPanelToolbarPosition = 'before', searchPanelFocusStarting = false, counterConfig = { show: false, items: new Map() }, onHasFiltersChange, 
+    dataColumns = [], pageSize = TMDataGridPageSize.Large, showHeaderFilter = true, showFilterPanel = true, showHeaderColumnChooser = false, showLoadPanel = true, showSearchPanel = true, searchPanelToolbarPosition = 'before', searchPanelFocusStarting = false, counterConfig = { show: false, items: new Map() }, onHasFiltersChange, 
     // events and callbacks
-    onSelectionChanged, onFocusedRowChanged, onRowDblClick, onRowClick, onCellClick, onCellDblClick, onOptionChanged, onContentReady, onContextMenuPreparing, onInitialized, onEditorPreparing, onCellPrepared, onRowPrepared, onRowUpdating, onRowExpanded, onRowCollapsed, onRowUpdated, onSaved, onEditCanceled, onEditingStart, onEditingChange, customizeColumns, onKeyDown, scrolling = { mode: 'standard', useNative: SDKUI_Globals.userSettings?.themeSettings.gridSettings.useNativeScrollbar === 1 }, paging = { enabled: true, pageSize: pageSize }, pager = { visible: true, showInfo: true, showNavigationButtons: true }, selection = { mode: 'multiple', showCheckBoxesMode: "always", selectAllMode: "allPages" }, sorting, summary, stateStoring, columnChooser, grouping, groupPanel, filterRow, headerFilter, editing, rowDragging, masterDetail, 
+    onSelectionChanged, onFocusedRowChanged, onRowDblClick, onRowClick, onCellClick, onCellDblClick, onOptionChanged, onContentReady, onContextMenuPreparing, onInitialized, onEditorPreparing, onCellPrepared, onRowPrepared, onRowUpdating, onRowExpanded, onRowCollapsed, onRowUpdated, onSaved, onEditCanceled, onEditingStart, onEditingChange, customizeColumns, onKeyDown, scrolling = { mode: 'standard', useNative: SDKUI_Globals.userSettings?.themeSettings.gridSettings.useNativeScrollbar === 1 }, paging = { enabled: true, pageSize: pageSize }, pager = { visible: true, showInfo: true, showNavigationButtons: true }, selection = { mode: 'multiple', showCheckBoxesMode: "always", selectAllMode: "allPages" }, sorting, summary, stateStoring, grouping, groupPanel, filterRow, headerFilter, editing, rowDragging, masterDetail, 
     // other properties
     disabled = false, autoNavigateToFocusedRow = true, columnResizingMode = 'widget', columnHidingEnabled = true, columnAutoWidth = true, allowColumnResizing = true, allowColumnReordering = true, showBorders = true, showRowLines = SDKUI_Globals.userSettings?.themeSettings.gridSettings.showRowLines === 1, showColumnLines = SDKUI_Globals.userSettings?.themeSettings.gridSettings.showColumnLines === 1, showColumnHeaders = true, rowAlternationEnabled = false, wordWrapEnabled = false, noDataText, 
     // styles
@@ -146,7 +146,18 @@ const TMDataGrid = React.forwardRef((props, ref) => {
                 e.items = [...updatedContextMenuItems];
             }
         }
-    }, [updateContextMenuItems, onContextMenuPreparing]);
+        // Add column chooser to header context menu
+        if (e.target === 'header' && showHeaderColumnChooser) {
+            e.items = e.items || [];
+            e.items.push({
+                text: SDKUI_Localizator.ShowColumnSelection,
+                icon: 'columnchooser',
+                onItemClick: () => {
+                    internalRef.current?.instance().showColumnChooser();
+                }
+            });
+        }
+    }, [updateContextMenuItems, onContextMenuPreparing, showHeaderColumnChooser]);
     // Handle toolbar preparation, especially for the search panel
     const onToolbarPreparingCallback = useCallback((e) => {
         if (e === undefined || e.toolbarOptions === undefined || e.toolbarOptions.items === undefined)
@@ -223,7 +234,7 @@ const TMDataGrid = React.forwardRef((props, ref) => {
                     // other properties
                     disabled: disabled, autoNavigateToFocusedRow: autoNavigateToFocusedRow, focusedRowKey: focusedRowKey, columnHidingEnabled: columnHidingEnabled, columnResizingMode: columnResizingMode, columnAutoWidth: columnAutoWidth, allowColumnResizing: allowColumnResizing, allowColumnReordering: allowColumnReordering, showBorders: showBorders, showRowLines: showRowLines, showColumnLines: showColumnLines, showColumnHeaders: showColumnHeaders, rowAlternationEnabled: rowAlternationEnabled, wordWrapEnabled: wordWrapEnabled, noDataText: noDataText, 
                     // styles
-                    width: width, height: height, style: { userSelect: 'none' }, children: [dataColumns.map((column, index) => (_jsx(Column, { ...column }, column.caption + index.toString()))), sorting && _jsx(Sorting, { ...sorting }), selection && _jsx(Selection, { ...selection }), scrolling && _jsx(Scrolling, { ...scrolling }), summary && _jsx(Summary, { ...summary }), showHeaderFilter && _jsx(HeaderFilter, { visible: true, ...headerFilter }), rowDragging && _jsx(RowDragging, { ...rowDragging }), filterRow && _jsx(FilterRow, { ...filterRow }), showFilterPanel && _jsx(FilterPanel, { visible: true }), columnChooser && _jsx(ColumnChooser, { ...columnChooser }), stateStoring && _jsx(StateStoring, { ...stateStoring }), groupPanel && _jsx(GroupPanel, { ...groupPanel }), _jsx(Grouping, { contextMenuEnabled: true, ...grouping }), _jsx(LoadPanel, { enabled: showLoadPanel }), _jsx(SearchPanel, { visible: showSearchPanel, searchVisibleColumnsOnly: true, highlightSearchText: true }), editing && _jsx(Editing, { ...editing }), paging && _jsx(Paging, { ...paging }), pager && _jsx(Pager, { ...pager, visible: totalRecordCount > pageSize }), masterDetail && _jsx(MasterDetail, { ...masterDetail })] }) }), counterConfig.show && _jsx("div", { style: { width: "100%", height: "25px", display: "flex", alignItems: "center", gap: "15px", backgroundColor: "#e0e0e0" }, children: _jsx(TMCounterContainer, { items: counterValues, bgColorContainer: counterConfig.bgColorContainer, bgColorItem: counterConfig.bgColorItem, hoverColorItem: counterConfig.hoverColorItem, textColorItem: counterConfig.textColorItem }) })] });
+                    width: width, height: height, style: { userSelect: 'none' }, children: [dataColumns.map((column, index) => (_jsx(Column, { ...column }, column.caption + index.toString()))), sorting && _jsx(Sorting, { ...sorting }), selection && _jsx(Selection, { ...selection }), scrolling && _jsx(Scrolling, { ...scrolling }), summary && _jsx(Summary, { ...summary }), showHeaderFilter && _jsx(HeaderFilter, { visible: true, ...headerFilter }), rowDragging && _jsx(RowDragging, { ...rowDragging }), filterRow && _jsx(FilterRow, { ...filterRow }), showFilterPanel && _jsx(FilterPanel, { visible: true }), showHeaderColumnChooser && _jsxs(ColumnChooser, { height: "400px", enabled: !showHeaderColumnChooser, mode: "select", children: [_jsx(Position, { my: "center", at: "center", of: window }), _jsx(ColumnChooserSearch, { enabled: true }), _jsx(ColumnChooserSelection, { allowSelectAll: false, selectByClick: true, recursive: true })] }), stateStoring && _jsx(StateStoring, { ...stateStoring }), groupPanel && _jsx(GroupPanel, { ...groupPanel }), _jsx(Grouping, { contextMenuEnabled: true, ...grouping }), _jsx(LoadPanel, { enabled: showLoadPanel }), _jsx(SearchPanel, { visible: showSearchPanel, searchVisibleColumnsOnly: true, highlightSearchText: true }), editing && _jsx(Editing, { ...editing }), paging && _jsx(Paging, { ...paging }), pager && _jsx(Pager, { ...pager, visible: totalRecordCount > pageSize }), masterDetail && _jsx(MasterDetail, { ...masterDetail })] }) }), counterConfig.show && _jsx("div", { style: { width: "100%", height: "25px", display: "flex", alignItems: "center", gap: "15px", backgroundColor: "#e0e0e0" }, children: _jsx(TMCounterContainer, { items: counterValues, bgColorContainer: counterConfig.bgColorContainer, bgColorItem: counterConfig.bgColorItem, hoverColorItem: counterConfig.hoverColorItem, textColorItem: counterConfig.textColorItem }) })] });
 });
 export default TMDataGrid;
 const getRecordCount = (dataSource) => {

package/lib/components/editors/TMHtmlEditor.js

@@ -170,7 +170,7 @@ const TMHtmlEditor = (props) => {
                         justifyContent: 'flex-end',
                         fontSize: 12,
                         color: '#6c757d',
-                        marginTop: 4,
+                        marginTop: showInfoIcon ? 0 : 4,
                         gap: 4,
                     }, children: [`${Math.max(charactersRemaining, 0)} ${SDKUI_Localizator.CharactersRemaining}`, showInfoIcon && (_jsx(TMTooltip, { content: 'Markup HTML', children: _jsx("span", { className: "dx-icon-codeblock", style: { fontSize: 22, cursor: 'pointer' }, onClick: () => {
                                     TMMessageBoxManager.show({