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

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/lib/components/NewComponents/FloatingMenuBar/TMFloatingMenuBar.js

@@ -236,6 +236,8 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
         setState(s => ({ ...s, isDragging: true }));
     };
     const handleGripDoubleClick = () => {
+        if (state.isConfigMode)
+            return;
         toggleOrientation();
     };
     const handleMouseMove = useCallback((e) => {
@@ -313,6 +315,58 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
             }
         });
     };
+    // Auto-reposition when entering edit mode to ensure Apply/Undo buttons are visible
+    useEffect(() => {
+        if (!state.isConfigMode || !floatingRef.current)
+            return;
+        requestAnimationFrame(() => {
+            if (!floatingRef.current)
+                return;
+            const floating = floatingRef.current.getBoundingClientRect();
+            let newX = state.position.x;
+            let newY = state.position.y;
+            let needsUpdate = false;
+            if (isConstrained && containerRef.current) {
+                const container = containerRef.current.getBoundingClientRect();
+                if (state.orientation === 'horizontal') {
+                    if (state.position.x + floating.width > container.width) {
+                        newX = Math.max(0, container.width - floating.width);
+                        needsUpdate = true;
+                    }
+                }
+                else {
+                    if (state.position.y + floating.height > container.height) {
+                        newY = Math.max(0, container.height - floating.height);
+                        needsUpdate = true;
+                    }
+                }
+            }
+            else {
+                if (state.orientation === 'horizontal') {
+                    if (state.position.x + floating.width > window.innerWidth) {
+                        newX = Math.max(0, window.innerWidth - floating.width - 10);
+                        needsUpdate = true;
+                    }
+                }
+                else {
+                    if (state.position.y + floating.height > window.innerHeight) {
+                        newY = Math.max(0, window.innerHeight - floating.height - 10);
+                        needsUpdate = true;
+                    }
+                }
+            }
+            if (needsUpdate) {
+                setState(s => ({
+                    ...s,
+                    position: { x: newX, y: newY },
+                }));
+                // Update snapshot position to the corrected position so Undo restores to visible position
+                if (stateSnapshot.current) {
+                    stateSnapshot.current.position = { x: newX, y: newY };
+                }
+            }
+        });
+    }, [state.isConfigMode, state.orientation, isConstrained]);
     const handleUndo = () => {
         if (stateSnapshot.current) {
             setState(s => ({
@@ -320,7 +374,7 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
                 items: [...stateSnapshot.current.items],
                 orientation: stateSnapshot.current.orientation,
                 position: { ...stateSnapshot.current.position },
-                isConfigMode: true, // Stay in edit mode
+                isConfigMode: true,
             }));
         }
     };

package/package.json

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