@topconsultnpm/sdkui-react 6.20.0-dev1.40 → 6.20.0-dev1.41

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useRef, useEffect } from 'react';
 import * as S from './styles';
-import { useIsMobile, useMenuPosition } from './hooks';
+import { useIsMobile, useMenuPosition, useIsIOS } from './hooks';
 import { IconArrowLeft } from '../../../helper';
 const TMContextMenu = ({ items, trigger = 'right', children, externalControl, keepOpenOnClick = false }) => {
     const [menuState, setMenuState] = useState({
@@ -12,9 +12,12 @@ const TMContextMenu = ({ items, trigger = 'right', children, externalControl, ke
     });
     const [hoveredSubmenus, setHoveredSubmenus] = useState([]);
     const isMobile = useIsMobile();
+    const isIOS = useIsIOS();
     const menuRef = useRef(null);
     const triggerRef = useRef(null);
     const submenuTimeoutRef = useRef(null);
+    const longPressTimeoutRef = useRef(null);
+    const touchStartPos = useRef(null);
     const { openLeft, openUp, isCalculated } = useMenuPosition(menuRef, menuState.position);
     const handleClose = () => {
         if (externalControl) {
@@ -131,6 +134,55 @@ const TMContextMenu = ({ items, trigger = 'right', children, externalControl, ke
             });
         }
     };
+    // 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 || !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)
+            return;
+        // Clear long press timeout if touch ended before long press completed
+        if (longPressTimeoutRef.current) {
+            clearTimeout(longPressTimeoutRef.current);
+            longPressTimeoutRef.current = null;
+        }
+        touchStartPos.current = null;
+    };
     const handleItemClick = (item) => {
         if (item.disabled)
             return;
@@ -216,6 +268,9 @@ const TMContextMenu = ({ items, trigger = 'right', children, externalControl, ke
             if (submenuTimeoutRef.current) {
                 clearTimeout(submenuTimeoutRef.current);
             }
+            if (longPressTimeoutRef.current) {
+                clearTimeout(longPressTimeoutRef.current);
+            }
         };
     }, []);
     const renderMenuItems = (menuItems, depth = 0) => {
@@ -239,10 +294,14 @@ const TMContextMenu = ({ items, trigger = 'right', children, externalControl, ke
     };
     const currentMenu = menuState.submenuStack.at(-1) || items;
     const currentParentName = menuState.parentNames.at(-1) || '';
-    return (_jsxs(_Fragment, { children: [!externalControl && 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: [_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}`)))] }))] }));
+                }, role: "button", tabIndex: 0, style: {
+                    display: 'inline-block',
+                    WebkitTouchCallout: isIOS ? 'none' : undefined,
+                    WebkitUserSelect: isIOS ? 'none' : undefined,
+                }, children: children })), menuState.visible && (_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}`)))] }))] }));
 };
 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 {

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

@@ -1,4 +1,13 @@
 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(() => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@topconsultnpm/sdkui-react",
-  "version": "6.20.0-dev1.40",
+  "version": "6.20.0-dev1.41",
   "description": "",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",