@topconsultnpm/sdkui-react 6.20.0-dev1.7 → 6.20.0-dev1.71

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

@@ -1,8 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useRef, useEffect } from 'react';
+import { createPortal } from 'react-dom';
 import * as S from './styles';
-import { useIsMobile, useMenuPosition } from './hooks';
-const TMContextMenu = ({ items, trigger = 'right', children }) => {
+import { useIsMobile, useMenuPosition, useIsIOS } from './hooks';
+import { IconArrowLeft } from '../../../helper';
+const TMContextMenu = ({ items, trigger = 'right', children, target, externalControl, keepOpenOnClick = false }) => {
     const [menuState, setMenuState] = useState({
         visible: false,
         position: { x: 0, y: 0 },
@@ -11,23 +13,208 @@ const TMContextMenu = ({ items, trigger = 'right', children }) => {
     });
     const [hoveredSubmenus, setHoveredSubmenus] = useState([]);
     const isMobile = useIsMobile();
+    const isIOS = useIsIOS();
     const menuRef = useRef(null);
     const triggerRef = useRef(null);
     const submenuTimeoutRef = useRef(null);
-    const { openLeft, openUp } = useMenuPosition(menuRef, menuState.position);
+    const longPressTimeoutRef = useRef(null);
+    const touchStartPos = useRef(null);
+    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]);
+    // iOS long-press support: attach touch listeners to target elements
+    // On long-press, dispatch synthetic contextmenu event to trigger existing handlers
+    useEffect(() => {
+        if (!target || !isIOS)
+            return;
+        const elements = document.querySelectorAll(target);
+        if (elements.length === 0)
+            return;
+        const touchStateMap = new WeakMap();
+        const handleTouchStart = (e) => {
+            const touchEvent = e;
+            const element = e.currentTarget;
+            const touch = touchEvent.touches[0];
+            // Prevent text selection during long press
+            e.preventDefault();
+            let state = touchStateMap.get(element);
+            if (!state) {
+                state = { timeout: null, startX: 0, startY: 0, longPressTriggered: false };
+                touchStateMap.set(element, state);
+            }
+            state.startX = touch.clientX;
+            state.startY = touch.clientY;
+            state.longPressTriggered = false;
+            if (state.timeout)
+                clearTimeout(state.timeout);
+            state.timeout = setTimeout(() => {
+                if (state)
+                    state.longPressTriggered = true;
+                // Haptic feedback
+                if ('vibrate' in navigator)
+                    navigator.vibrate(50);
+                const syntheticEvent = new MouseEvent('contextmenu', {
+                    bubbles: true,
+                    cancelable: true,
+                    clientX: touch.clientX,
+                    clientY: touch.clientY,
+                });
+                element.dispatchEvent(syntheticEvent);
+                if (state)
+                    state.timeout = null;
+            }, 500);
+        };
+        const handleTouchMove = (e) => {
+            const touchEvent = e;
+            const element = e.currentTarget;
+            const state = touchStateMap.get(element);
+            if (!state?.timeout)
+                return;
+            const touch = touchEvent.touches[0];
+            const dx = Math.abs(touch.clientX - state.startX);
+            const dy = Math.abs(touch.clientY - state.startY);
+            if (dx > 10 || dy > 10) {
+                clearTimeout(state.timeout);
+                state.timeout = null;
+            }
+        };
+        const handleTouchEnd = (e) => {
+            const element = e.currentTarget;
+            const state = touchStateMap.get(element);
+            if (state?.timeout) {
+                clearTimeout(state.timeout);
+                state.timeout = null;
+            }
+        };
+        // Prevent click event after long-press was triggered
+        const handleClick = (e) => {
+            const element = e.currentTarget;
+            const state = touchStateMap.get(element);
+            if (state?.longPressTriggered) {
+                e.preventDefault();
+                e.stopPropagation();
+                e.stopImmediatePropagation();
+                state.longPressTriggered = false;
+            }
+        };
+        // Prevent default iOS context menu
+        const handleContextMenu = (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            return false;
+        };
+        // Attach listeners to all matching elements
+        elements.forEach(element => {
+            const el = element;
+            // Prevent iOS native callout and text selection
+            const style = el.style;
+            style.webkitTouchCallout = 'none';
+            style.webkitUserSelect = 'none';
+            style.userSelect = 'none';
+            el.addEventListener('touchstart', handleTouchStart, { passive: true });
+            el.addEventListener('touchmove', handleTouchMove, { passive: true });
+            el.addEventListener('touchend', handleTouchEnd);
+            el.addEventListener('touchcancel', handleTouchEnd);
+            el.addEventListener('contextmenu', handleContextMenu);
+            el.addEventListener('click', handleClick, { capture: true });
+        });
+        return () => {
+            elements.forEach(element => {
+                const el = element;
+                const style = el.style;
+                style.webkitTouchCallout = '';
+                style.webkitUserSelect = '';
+                style.userSelect = '';
+                el.removeEventListener('touchstart', handleTouchStart);
+                el.removeEventListener('touchmove', handleTouchMove);
+                el.removeEventListener('touchend', handleTouchEnd);
+                el.removeEventListener('touchcancel', handleTouchEnd);
+                el.removeEventListener('contextmenu', handleContextMenu);
+                el.removeEventListener('click', handleClick, { capture: true });
+            });
+        };
+    }, [target, isIOS]);
+    // Update items when they change while menu is visible (for keepOpenOnClick behavior)
+    useEffect(() => {
+        if (!keepOpenOnClick)
+            return;
+        if (!externalControl && menuState.visible) {
+            setMenuState(prev => ({
+                ...prev,
+                submenuStack: [items],
+            }));
+            // Update hoveredSubmenus with fresh items while keeping them open
+            setHoveredSubmenus(prev => {
+                if (prev.length === 0)
+                    return prev;
+                // Rebuild hoveredSubmenus with updated items from the new items structure
+                return prev.map(submenu => {
+                    // Find the matching submenu in the new items structure
+                    const findSubmenuInItems = (searchItems) => {
+                        for (const item of searchItems) {
+                            if (item.submenu && item.submenu.length > 0) {
+                                // Check if this submenu matches (compare first item name as identifier)
+                                if (submenu.items.length > 0 && item.submenu.length > 0 &&
+                                    item.submenu[0].name === submenu.items[0].name) {
+                                    return item.submenu;
+                                }
+                                // Recursively search in nested submenus
+                                const found = findSubmenuInItems(item.submenu);
+                                if (found)
+                                    return found;
+                            }
+                        }
+                        return null;
+                    };
+                    const updatedItems = findSubmenuInItems(items);
+                    return {
+                        ...submenu,
+                        items: updatedItems || submenu.items, // Use updated items if found, otherwise keep old
+                    };
+                });
+            });
+        }
+    }, [items, menuState.visible, externalControl, keepOpenOnClick]);
+    // Track when the menu was opened to prevent immediate close on iOS
+    const menuOpenedAtRef = useRef(0);
+    useEffect(() => {
+        if (menuState.visible) {
+            menuOpenedAtRef.current = Date.now();
+        }
+    }, [menuState.visible]);
     useEffect(() => {
         if (!menuState.visible)
             return;
         const handleClickOutside = (event) => {
+            // On iOS, prevent closing immediately after opening (within 300ms)
+            // This handles the case where touchend from long-press triggers touchstart listener
+            if (Date.now() - menuOpenedAtRef.current < 300) {
+                return;
+            }
             const target = event.target;
             // Check if click is inside main menu
             if (menuRef.current?.contains(target)) {
@@ -72,27 +259,73 @@ const TMContextMenu = ({ items, trigger = 'right', children }) => {
             });
         }
     };
+    // iOS-specific touch handlers for long press
+    const handleTouchStart = (e) => {
+        if (!isIOS || trigger !== 'right')
+            return;
+        const touch = e.touches[0];
+        touchStartPos.current = { x: touch.clientX, y: touch.clientY };
+        if (longPressTimeoutRef.current) {
+            clearTimeout(longPressTimeoutRef.current);
+        }
+        longPressTimeoutRef.current = setTimeout(() => {
+            if (touchStartPos.current) {
+                if ('vibrate' in navigator) {
+                    navigator.vibrate(50);
+                }
+                setMenuState({
+                    visible: true,
+                    position: { x: touchStartPos.current.x, y: touchStartPos.current.y },
+                    submenuStack: [items],
+                    parentNames: [],
+                });
+            }
+        }, 500);
+    };
+    const handleTouchMove = (e) => {
+        if (!isIOS || trigger !== 'right' || !touchStartPos.current)
+            return;
+        const touch = e.touches[0];
+        const moveThreshold = 10; // pixels
+        // If finger moved too much, cancel long press
+        const deltaX = Math.abs(touch.clientX - touchStartPos.current.x);
+        const deltaY = Math.abs(touch.clientY - touchStartPos.current.y);
+        if (deltaX > moveThreshold || deltaY > moveThreshold) {
+            if (longPressTimeoutRef.current) {
+                clearTimeout(longPressTimeoutRef.current);
+                longPressTimeoutRef.current = null;
+            }
+            touchStartPos.current = null;
+        }
+    };
+    const handleTouchEnd = () => {
+        if (!isIOS || trigger !== 'right')
+            return;
+        if (longPressTimeoutRef.current) {
+            clearTimeout(longPressTimeoutRef.current);
+            longPressTimeoutRef.current = null;
+        }
+        touchStartPos.current = null;
+    };
     const handleItemClick = (item) => {
         if (item.disabled)
             return;
-        // Always execute onClick if present
         if (item.onClick) {
             item.onClick();
         }
         if (item.submenu && item.submenu.length > 0) {
             if (isMobile) {
-                // Mobile: Push submenu to stack
                 setMenuState(prev => ({
                     ...prev,
                     submenuStack: [...prev.submenuStack, item.submenu],
                     parentNames: [...prev.parentNames, item.name],
                 }));
             }
-            // Desktop: Submenus are handled by hover, don't close menu
         }
         else {
-            // No submenu: close menu after executing action
-            handleClose();
+            if (item.onClick || !keepOpenOnClick) {
+                handleClose();
+            }
         }
     };
     const handleBack = () => {
@@ -155,6 +388,9 @@ const TMContextMenu = ({ items, trigger = 'right', children }) => {
             if (submenuTimeoutRef.current) {
                 clearTimeout(submenuTimeoutRef.current);
             }
+            if (longPressTimeoutRef.current) {
+                clearTimeout(longPressTimeoutRef.current);
+            }
         };
     }, []);
     const renderMenuItems = (menuItems, depth = 0) => {
@@ -172,16 +408,21 @@ const TMContextMenu = ({ items, trigger = 'right', children }) => {
                 e.stopPropagation();
                 // if (item.disabled) return;
                 item.onRightIconClick?.();
+                handleClose();
             };
-            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, onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd, onTouchCancel: handleTouchEnd, 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',
+                    WebkitTouchCallout: isIOS ? 'none' : undefined,
+                    WebkitUserSelect: isIOS ? 'none' : undefined,
+                }, children: children })), menuState.visible && createPortal(_jsxs(_Fragment, { children: [_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}`)))] }), document.body)] }));
 };
 export default TMContextMenu;

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

@@ -1,3 +1,4 @@
+export declare const useIsIOS: () => boolean;
 export declare const useIsMobile: () => boolean;
 export declare const useClickOutside: (callback: () => void) => import("react").RefObject<HTMLDivElement>;
 interface Position {
@@ -5,7 +6,11 @@ interface Position {
     y: number;
 }
 export declare const useMenuPosition: (menuRef: React.RefObject<HTMLDivElement | null>, position: Position) => {
+    isCalculated: boolean;
     openLeft: boolean;
     openUp: boolean;
 };
+export declare const getContextMenuTarget: <T extends {
+    id: string;
+}>(event: React.MouseEvent | undefined, focusedItem: T | undefined, selectedItem: T | undefined, dataSource: T[], idPrefix: string, isMobile: boolean) => T | undefined;
 export {};

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

@@ -1,4 +1,13 @@
-import { useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useLayoutEffect, useRef } from 'react';
+export const useIsIOS = () => {
+    const [isIOS, setIsIOS] = useState(false);
+    useEffect(() => {
+        const iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) ||
+            (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1);
+        setIsIOS(iOS);
+    }, []);
+    return isIOS;
+};
 export const useIsMobile = () => {
     const [isMobile, setIsMobile] = useState(false);
     useEffect(() => {
@@ -31,9 +40,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 +55,28 @@ export const useMenuPosition = (menuRef, position) => {
             openLeft: spaceRight < menuRect.width + 20,
             openUp: spaceBottom < menuRect.height + 20,
         });
+        setIsCalculated(true);
     }, [position, menuRef]);
-    return adjustedPosition;
+    return { ...adjustedPosition, isCalculated };
+};
+export const getContextMenuTarget = (event, focusedItem, selectedItem, dataSource, idPrefix, isMobile) => {
+    if (!event)
+        return undefined;
+    let targetItem = focusedItem ?? selectedItem;
+    if (!focusedItem && isMobile) {
+        // Find the actual item that was long-pressed by traversing up from the event target
+        let element = event.target;
+        while (element && element !== event.currentTarget) {
+            if (element.id && element.id.startsWith(`${idPrefix}-`)) {
+                const itemId = element.id.replace(`${idPrefix}-`, '');
+                const foundItem = dataSource.find(item => item.id === itemId);
+                if (foundItem) {
+                    targetItem = foundItem;
+                    break;
+                }
+            }
+            element = element.parentElement;
+        }
+    }
+    return targetItem;
 };

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

@@ -1,2 +1,5 @@
 export { default as ContextMenu } from './TMContextMenu';
 export type { TMContextMenuItemProps, TMContextMenuProps } from './types';
+export { useLongPress, triggerContextMenuEvent } from './useLongPress';
+export type { UseLongPressOptions } from './useLongPress';
+export { useIsIOS } from './hooks';

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

@@ -1 +1,3 @@
 export { default as ContextMenu } from './TMContextMenu';
+export { useLongPress, triggerContextMenuEvent } from './useLongPress';
+export { useIsIOS } from './hooks';

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

@@ -25,7 +25,7 @@ export const MenuContainer = styled.div `
   right: ${props => props.$openLeft ? `${window.innerWidth - props.$x}px` : 'auto'};
   top: ${props => props.$openUp ? 'auto' : `${props.$y}px`};
   bottom: ${props => props.$openUp ? `${window.innerHeight - props.$y}px` : 'auto'};
-  z-index: 10000;
+  z-index: 10100;
   background: #ffffff;
   border-radius: 12px;
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12),
@@ -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,14 +50,27 @@ 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;
   align-items: center;
   justify-content: space-between;
   padding: 4px 12px;
-  cursor: ${props => props.$disabled ? 'not-allowed' : 'pointer'};
-  opacity: ${props => props.$disabled ? 0.4 : 1};
+  cursor: ${props => props.$disabled ? 'default' : 'pointer'};
   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);
   }
@@ -189,7 +223,7 @@ export const Submenu = styled.div `
     // If openUp is true, anchor to bottom and grow upward
     return props.$openUp ? `${globalThis.innerHeight - props.$parentRect.bottom - 8}px` : 'auto';
 }};
-  z-index: 10001;
+  z-index: 10101;
   background: #ffffff;
   border-radius: 12px;
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12),
@@ -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

@@ -1,4 +1,5 @@
 export interface TMContextMenuItemProps {
+    id?: string;
     name: string;
     icon?: React.ReactNode;
     disabled?: boolean;
@@ -8,11 +9,23 @@ 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;
+    target?: string;
+    externalControl?: {
+        visible: boolean;
+        position: {
+            x: number;
+            y: number;
+        };
+        onClose: () => void;
+    };
+    keepOpenOnClick?: boolean;
 }
 export interface Position {
     x: number;