@topconsultnpm/sdkui-react 6.20.0-dev1.47 → 6.20.0-dev1.48

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

@@ -136,7 +136,7 @@ const TMContextMenu = ({ items, trigger = 'right', children, externalControl, ke
     };
     // iOS-specific touch handlers for long press
     const handleTouchStart = (e) => {
-        if (!isIOS || trigger !== 'right')
+        if (!isIOS)
             return;
         const touch = e.touches[0];
         touchStartPos.current = { x: touch.clientX, y: touch.clientY };
@@ -176,7 +176,6 @@ const TMContextMenu = ({ items, trigger = 'right', children, externalControl, ke
     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;
@@ -186,23 +185,19 @@ const TMContextMenu = ({ items, trigger = 'right', children, externalControl, ke
     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 (unless keepOpenOnClick is true)
             if (!keepOpenOnClick) {
                 handleClose();
             }

package/lib/components/NewComponents/FloatingMenuBar/TMFloatingMenuBar.js

@@ -292,17 +292,70 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
     const handleMouseUp = useCallback(() => {
         setState(s => ({ ...s, isDragging: false }));
     }, []);
+    // Touch event handlers for tablet support
+    const handleTouchStart = (e) => {
+        if (state.isConfigMode)
+            return;
+        const touch = e.touches[0];
+        const containerRect = containerRef.current?.getBoundingClientRect();
+        if (containerRect) {
+            if (isConstrained) {
+                dragOffset.current = {
+                    x: touch.clientX - containerRect.left - state.position.x,
+                    y: touch.clientY - containerRect.top - state.position.y,
+                };
+            }
+            else {
+                dragOffset.current = {
+                    x: touch.clientX - state.position.x,
+                    y: touch.clientY - state.position.y,
+                };
+            }
+        }
+        setState(s => ({ ...s, isDragging: true }));
+    };
+    const handleTouchMove = useCallback((e) => {
+        if (!state.isDragging || !containerRef.current || !floatingRef.current)
+            return;
+        const touch = e.touches[0];
+        const container = containerRef.current.getBoundingClientRect();
+        const floating = floatingRef.current.getBoundingClientRect();
+        let newX, newY;
+        if (isConstrained) {
+            newX = touch.clientX - container.left - dragOffset.current.x;
+            newY = touch.clientY - container.top - dragOffset.current.y;
+            newX = Math.max(0, Math.min(newX, container.width - floating.width));
+            newY = Math.max(0, Math.min(newY, container.height - floating.height));
+        }
+        else {
+            newX = touch.clientX - dragOffset.current.x;
+            newY = touch.clientY - dragOffset.current.y;
+            newX = Math.max(0, Math.min(newX, window.innerWidth - floating.width));
+            newY = Math.max(0, Math.min(newY, window.innerHeight - floating.height));
+        }
+        setState(s => ({
+            ...s,
+            position: { x: newX, y: newY },
+        }));
+    }, [state.isDragging, containerRef, isConstrained]);
+    const handleTouchEnd = useCallback(() => {
+        setState(s => ({ ...s, isDragging: false }));
+    }, []);
     useEffect(() => {
         if (state.isDragging) {
             document.addEventListener('mousemove', handleMouseMove);
             document.addEventListener('mouseup', handleMouseUp);
+            document.addEventListener('touchmove', handleTouchMove);
+            document.addEventListener('touchend', handleTouchEnd);
             return () => {
                 document.removeEventListener('mousemove', handleMouseMove);
                 document.removeEventListener('mouseup', handleMouseUp);
+                document.removeEventListener('touchmove', handleTouchMove);
+                document.removeEventListener('touchend', handleTouchEnd);
             };
         }
         return undefined;
-    }, [state.isDragging, handleMouseMove, handleMouseUp]);
+    }, [state.isDragging, handleMouseMove, handleMouseUp, handleTouchMove, handleTouchEnd]);
     // Save to SDKUI_Globals.userSettings only when NOT in config mode (when applying changes)
     useEffect(() => {
         if (state.isConfigMode)
@@ -530,7 +583,7 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
                                 name: state.orientation === 'horizontal' ? 'Floating bar verticale' : 'Floating bar orizzontale',
                                 onClick: toggleOrientation,
                             },
-                        ], trigger: "right", children: _jsx(S.GripHandle, { "$orientation": state.orientation, onMouseDown: handleMouseDown, onDoubleClick: handleGripDoubleClick, children: _jsx(IconDraggableDots, {}) }) })) : (_jsx(S.GripHandle, { "$orientation": state.orientation, onMouseDown: handleMouseDown, onDoubleClick: handleGripDoubleClick, children: _jsx(IconDraggableDots, {}) })), _jsx(S.Separator, { "$orientation": state.orientation }), state.items.map((item, index) => {
+                        ], trigger: "right", children: _jsx(S.GripHandle, { "$orientation": state.orientation, onMouseDown: handleMouseDown, onTouchStart: handleTouchStart, onDoubleClick: handleGripDoubleClick, children: _jsx(IconDraggableDots, {}) }) })) : (_jsx(S.GripHandle, { "$orientation": state.orientation, onMouseDown: handleMouseDown, onTouchStart: handleTouchStart, onDoubleClick: handleGripDoubleClick, children: _jsx(IconDraggableDots, {}) })), _jsx(S.Separator, { "$orientation": state.orientation }), state.items.map((item, index) => {
                         // Get current state (disabled and onClick) from contextMenuItems
                         const currentState = getCurrentItemState(item.id);
                         const isDisabled = currentState.disabled || false;

package/package.json

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