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

package/lib/assets/headergradient.svg

@@ -0,0 +1,87 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Livello_2" data-name="Livello 2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1920 505.45">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: url(#Sfumatura_senza_nome_6);
+      }
+
+      .cls-1, .cls-2, .cls-3, .cls-4 {
+        opacity: .5;
+      }
+
+      .cls-5 {
+        clip-path: url(#clippath-2);
+      }
+
+      .cls-5, .cls-6, .cls-7, .cls-8, .cls-9 {
+        fill: none;
+      }
+
+      .cls-2 {
+        fill: url(#Sfumatura_senza_nome_2);
+      }
+
+      .cls-6 {
+        clip-path: url(#clippath-3);
+      }
+
+      .cls-8 {
+        clip-path: url(#clippath);
+      }
+
+      .cls-3 {
+        fill: url(#Sfumatura_senza_nome_3-2);
+      }
+
+      .cls-9 {
+        clip-path: url(#clippath-1);
+      }
+
+      .cls-4 {
+        fill: url(#Sfumatura_senza_nome_3);
+      }
+    </style>
+    <clipPath id="clippath">
+      <rect class="cls-7" x="1237.53" y="0" width="682.47" height="326.62"/>
+    </clipPath>
+    <radialGradient id="Sfumatura_senza_nome_3" data-name="Sfumatura senza nome 3" cx="1285.93" cy="3418.23" fx="1285.93" fy="3418.23" r="50" gradientTransform="translate(-6983.46 -9577.73) scale(6.82 2.8)" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#2459a4"/>
+      <stop offset="1" stop-color="#fff" stop-opacity="0"/>
+    </radialGradient>
+    <clipPath id="clippath-1">
+      <rect class="cls-7" x="0" y="0" width="682.47" height="326.62" transform="translate(682.47 326.62) rotate(-180)"/>
+    </clipPath>
+    <radialGradient id="Sfumatura_senza_nome_6" data-name="Sfumatura senza nome 6" cx="1673.12" cy="3418.23" fx="1673.12" fy="3418.23" r="50" gradientTransform="translate(11545.93 -9577.73) rotate(-180) scale(6.82 -2.8)" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#2459a4"/>
+      <stop offset="1" stop-color="#fff" stop-opacity="0"/>
+    </radialGradient>
+    <clipPath id="clippath-2">
+      <rect class="cls-7" x="0" y="0" width="1055.7" height="297.5"/>
+    </clipPath>
+    <radialGradient id="Sfumatura_senza_nome_3-2" data-name="Sfumatura senza nome 3" cx="955.6" cy="3436.6" fx="955.6" fy="3436.6" r="50" gradientTransform="translate(-9560.44 -8770.57) scale(10.56 2.55)" xlink:href="#Sfumatura_senza_nome_3"/>
+    <clipPath id="clippath-3">
+      <rect class="cls-7" x="297.09" y="0" width="1055.7" height="505.45"/>
+    </clipPath>
+    <radialGradient id="Sfumatura_senza_nome_2" data-name="Sfumatura senza nome 2" cx="983.74" cy="3351.83" fx="983.74" fy="3351.83" r="50" gradientTransform="translate(-9560.44 -14533.91) scale(10.56 4.33)" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#2459a4"/>
+      <stop offset="1" stop-color="#fff"/>
+    </radialGradient>
+  </defs>
+  <g id="Livello_1-2" data-name="Livello 1">
+    <g>
+      <g class="cls-8">
+        <ellipse class="cls-4" cx="1792.58" cy="-7.96" rx="341.23" ry="139.98"/>
+      </g>
+      <g class="cls-9">
+        <ellipse class="cls-1" cx="127.42" cy="-7.96" rx="341.23" ry="139.98"/>
+      </g>
+      <g class="cls-5">
+        <ellipse class="cls-3" cx="527.85" cy="-7.25" rx="527.85" ry="127.5"/>
+      </g>
+      <g class="cls-6">
+        <ellipse class="cls-2" cx="824.94" cy="-12.32" rx="527.85" ry="216.62"/>
+      </g>
+    </g>
+  </g>
+</svg>

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 },
@@ -10,24 +12,217 @@ const TMContextMenu = ({ items, trigger = 'right', children }) => {
         parentNames: [],
     });
     const [hoveredSubmenus, setHoveredSubmenus] = useState([]);
+    // Tracks items whose rightIconProps have been clicked, so the icon color flips immediately
+    const [toggledItemIds, setToggledItemIds] = useState(new Set());
     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);
+    // Get current menu to pass items count to positioning hook
+    const currentMenu = menuState.submenuStack.at(-1) || items;
+    const { openLeft, openUp, isCalculated, needsScroll, maxHeight } = useMenuPosition(menuRef, menuState.position, currentMenu.length);
     const handleClose = () => {
-        setMenuState(prev => ({
-            ...prev,
-            visible: false,
-            submenuStack: [items],
-            parentNames: [],
-        }));
+        if (externalControl) {
+            externalControl.onClose();
+        }
+        else {
+            setMenuState(prev => ({
+                ...prev,
+                visible: false,
+                submenuStack: [items],
+                parentNames: [],
+            }));
+        }
         setHoveredSubmenus([]);
+        setToggledItemIds(new Set());
     };
+    // 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];
+            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,
+                });
+                // Mark this as our synthetic event
+                syntheticEvent.isSynthetic = true;
+                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 (but allow our synthetic events)
+        const handleContextMenu = (e) => {
+            // Don't prevent our own synthetic contextmenu events
+            if (e.isSynthetic)
+                return;
+            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 - must be set before touch starts
+            const style = el.style;
+            style.webkitTouchCallout = 'none';
+            style.webkitUserSelect = '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;
+                // Restore webkit properties
+                const style = el.style;
+                style.webkitTouchCallout = '';
+                style.webkitUserSelect = '';
+                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 500ms for iOS, 300ms for others)
+            // This handles the case where touchend from long-press triggers touchstart listener
+            const delay = isIOS ? 500 : 300;
+            if (Date.now() - menuOpenedAtRef.current < delay) {
+                return;
+            }
             const target = event.target;
             // Check if click is inside main menu
             if (menuRef.current?.contains(target)) {
@@ -45,20 +240,35 @@ const TMContextMenu = ({ items, trigger = 'right', children }) => {
         };
         document.addEventListener('mousedown', handleClickOutside);
         document.addEventListener('touchstart', handleClickOutside);
+        document.addEventListener('contextmenu', handleClickOutside); // Close on right-click outside
         return () => {
             document.removeEventListener('mousedown', handleClickOutside);
             document.removeEventListener('touchstart', handleClickOutside);
+            document.removeEventListener('contextmenu', handleClickOutside);
         };
     }, [menuState.visible]);
     const handleContextMenu = (e) => {
         if (trigger === 'right') {
             e.preventDefault();
-            setMenuState({
-                visible: true,
-                position: { x: e.clientX, y: e.clientY },
-                submenuStack: [items],
-                parentNames: [],
+            // Close any other open context menus by dispatching a synthetic contextmenu event to document
+            // This triggers the document listener in other ContextMenu instances to close them
+            const syntheticEvent = new MouseEvent('contextmenu', {
+                bubbles: true,
+                cancelable: true,
+                clientX: -1000, // Position outside viewport so it doesn't interfere
+                clientY: -1000,
             });
+            document.dispatchEvent(syntheticEvent);
+            e.stopPropagation(); // Prevent event from bubbling after closing others
+            // Small delay to ensure other menus close first
+            setTimeout(() => {
+                setMenuState({
+                    visible: true,
+                    position: { x: e.clientX, y: e.clientY },
+                    submenuStack: [items],
+                    parentNames: [],
+                });
+            }, 0);
         }
     };
     const handleClick = (e) => {
@@ -72,27 +282,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 (!keepOpenOnClick) {
+                handleClose();
+            }
         }
     };
     const handleBack = () => {
@@ -103,20 +359,24 @@ const TMContextMenu = ({ items, trigger = 'right', children }) => {
         }));
     };
     const handleMouseEnter = (item, event, depth = 0) => {
-        if (isMobile || !item.submenu || item.submenu.length === 0)
+        if (isMobile || !item.submenu || item.submenu.length === 0 || item.disabled)
             return;
         if (submenuTimeoutRef.current) {
             clearTimeout(submenuTimeoutRef.current);
             submenuTimeoutRef.current = null;
         }
         const rect = event.currentTarget.getBoundingClientRect();
-        // Calculate if submenu should open upward based on available space
-        // Estimate submenu height: ~35px per item (accounting for smaller padding) + container padding
+        // Calculate submenu height dynamically
         const estimatedSubmenuHeight = (item.submenu.length * 35) + 8;
         const spaceBelow = window.innerHeight - rect.top;
         const spaceAbove = rect.bottom;
-        // Open upward only if there's not enough space below AND there's more space above
+        const padding = 8;
+        // Determine if submenu should open upward
         const shouldOpenUp = spaceBelow < estimatedSubmenuHeight && spaceAbove > spaceBelow;
+        // Calculate if submenu needs scroll and max-height
+        const availableSpace = shouldOpenUp ? spaceAbove : spaceBelow;
+        const needsScroll = estimatedSubmenuHeight > availableSpace - padding;
+        const maxHeight = needsScroll ? availableSpace - padding : undefined;
         // Remove all submenus at this depth and deeper
         setHoveredSubmenus(prev => {
             const filtered = prev.filter(sub => sub.depth < depth);
@@ -129,6 +389,8 @@ const TMContextMenu = ({ items, trigger = 'right', children }) => {
                     parentRect: rect,
                     depth: depth,
                     openUp: shouldOpenUp,
+                    needsScroll,
+                    maxHeight,
                 }
             ];
         });
@@ -155,6 +417,9 @@ const TMContextMenu = ({ items, trigger = 'right', children }) => {
             if (submenuTimeoutRef.current) {
                 clearTimeout(submenuTimeoutRef.current);
             }
+            if (longPressTimeoutRef.current) {
+                clearTimeout(longPressTimeoutRef.current);
+            }
         };
     }, []);
     const renderMenuItems = (menuItems, depth = 0) => {
@@ -168,20 +433,47 @@ const TMContextMenu = ({ items, trigger = 'right', children }) => {
                 e.stopPropagation();
                 handleItemClick(item);
             };
-            const handleRightIconClick = (e) => {
+            const handleRightIconPropsClick = (e) => {
+                e.preventDefault();
                 e.stopPropagation();
-                // if (item.disabled) return;
-                item.onRightIconClick?.();
+                e.nativeEvent.stopImmediatePropagation();
+                item.rightIconProps?.onClick?.();
+                if (item.id) {
+                    setToggledItemIds(prev => {
+                        const next = new Set(prev);
+                        if (next.has(item.id))
+                            next.delete(item.id);
+                        else
+                            next.add(item.id);
+                        return next;
+                    });
+                }
             };
-            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));
+            // rightIconProps takes precedence over rightIcon
+            let rightIconElement = null;
+            let rightIconClickHandler = null;
+            if (item.rightIconProps) {
+                const rip = item.rightIconProps;
+                const wasToggled = item.id ? toggledItemIds.has(item.id) : false;
+                const isActive = wasToggled ? !rip.isActive : rip.isActive;
+                const color = isActive ? (rip.activeColor || '#d32f2f') : (rip.inactiveColor || '#626262');
+                rightIconElement = _jsx("span", { style: { color, display: 'flex', alignItems: 'center' }, children: rip.icon });
+                if (rip.onClick) {
+                    rightIconClickHandler = handleRightIconPropsClick;
+                }
+            }
+            return (_jsxs(S.MenuItem, { "$disabled": item.disabled, "$hasSubmenu": !!item.submenu && item.submenu.length > 0, "$beginGroup": item.beginGroup, "data-disabled": item.disabled ? "true" : undefined, 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 })] }), rightIconElement && rightIconClickHandler ? (_jsx(S.RightIconButton, { onClick: rightIconClickHandler, onMouseDown: (e) => e.stopPropagation(), "aria-label": `Action for ${item.name}`, children: rightIconElement })) : rightIconElement ? (_jsx(S.IconWrapper, { children: rightIconElement })) : null, 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, "$needsScroll": needsScroll, "$maxHeight": maxHeight, 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,11 +1,18 @@
+export declare const useIsIOS: () => boolean;
 export declare const useIsMobile: () => boolean;
 export declare const useClickOutside: (callback: () => void) => import("react").RefObject<HTMLDivElement>;
 interface Position {
     x: number;
     y: number;
 }
-export declare const useMenuPosition: (menuRef: React.RefObject<HTMLDivElement | null>, position: Position) => {
+export declare const useMenuPosition: (menuRef: React.RefObject<HTMLDivElement | null>, position: Position, itemsCount?: number) => {
+    isCalculated: boolean;
     openLeft: boolean;
     openUp: boolean;
+    needsScroll: boolean;
+    maxHeight: number | undefined;
 };
+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 {};