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

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.41",
+  "version": "6.20.0-dev1.42",
   "description": "",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",