@topconsultnpm/sdkui-react 6.20.0-dev1.11 → 6.20.0-dev1.111

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 },
@@ -11,23 +13,213 @@ 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);
+    // 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([]);
     };
+    // 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 +237,26 @@ 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: [],
-            });
+            e.stopPropagation(); // Prevent event from bubbling to close other menus prematurely
+            // Small delay to ensure other menus receive the contextmenu event and close first
+            setTimeout(() => {
+                setMenuState({
+                    visible: true,
+                    position: { x: e.clientX, y: e.clientY },
+                    submenuStack: [items],
+                    parentNames: [],
+                });
+            }, 0);
         }
     };
     const handleClick = (e) => {
@@ -72,27 +270,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 +347,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 +377,8 @@ const TMContextMenu = ({ items, trigger = 'right', children }) => {
                     parentRect: rect,
                     depth: depth,
                     openUp: shouldOpenUp,
+                    needsScroll,
+                    maxHeight,
                 }
             ];
         });
@@ -155,6 +405,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 +425,20 @@ 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, "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 })] }), 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, "$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 {};

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(() => {
@@ -29,20 +38,83 @@ export const useClickOutside = (callback) => {
     }, [callback]);
     return ref;
 };
-export const useMenuPosition = (menuRef, position) => {
-    const [adjustedPosition, setAdjustedPosition] = useState({ openLeft: false, openUp: false });
-    useEffect(() => {
-        if (!menuRef.current)
+export const useMenuPosition = (menuRef, position, itemsCount) => {
+    const [adjustedPosition, setAdjustedPosition] = useState({ openLeft: false, openUp: false, needsScroll: false, maxHeight: undefined });
+    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;
+        const isMobile = viewportWidth <= 768;
         const spaceRight = viewportWidth - position.x;
         const spaceBottom = viewportHeight - position.y;
+        const spaceAbove = position.y;
+        const padding = 8; // Minimal padding from viewport edges - be more aggressive about using available space
+        // Use scrollHeight to get natural content height, not constrained height
+        const menuHeight = menuRef.current.scrollHeight;
+        // Mobile: Always calculate max-height based on position to prevent overflow
+        if (isMobile) {
+            const maxHeightFromBottom = spaceBottom - padding;
+            const maxHeightFromTop = spaceAbove - padding;
+            const mobileMaxHeight = Math.max(maxHeightFromBottom, maxHeightFromTop);
+            setAdjustedPosition({
+                openLeft: spaceRight < menuRect.width + 20,
+                openUp: maxHeightFromTop > maxHeightFromBottom && menuHeight > maxHeightFromBottom,
+                needsScroll: menuHeight > mobileMaxHeight,
+                maxHeight: mobileMaxHeight,
+            });
+            setIsCalculated(true);
+            return;
+        }
+        // Desktop: Check if menu is too tall to fit in either direction
+        const fitsBelow = menuHeight + padding <= spaceBottom;
+        const fitsAbove = menuHeight + padding <= spaceAbove;
+        const needsScroll = !fitsBelow && !fitsAbove;
+        // Calculate max height when scrolling is needed
+        let maxHeight = undefined;
+        let shouldOpenUp = false;
+        if (needsScroll) {
+            // When scrolling is needed, open in the direction with MORE space
+            const availableSpace = Math.max(spaceBottom, spaceAbove);
+            maxHeight = availableSpace - padding;
+            shouldOpenUp = spaceAbove > spaceBottom; // Open upward if more space above
+        }
+        else {
+            // Normal behavior: open up only if it fits above but not below
+            shouldOpenUp = !fitsBelow && fitsAbove;
+        }
         setAdjustedPosition({
             openLeft: spaceRight < menuRect.width + 20,
-            openUp: spaceBottom < menuRect.height + 20,
+            openUp: shouldOpenUp,
+            needsScroll,
+            maxHeight,
         });
-    }, [position, menuRef]);
-    return adjustedPosition;
+        setIsCalculated(true);
+    }, [position, menuRef, itemsCount]); // Added itemsCount to recalculate when menu content changes
+    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';