From 23dfd21a8c7b8909f2f494f47945831de79f40cc Mon Sep 17 00:00:00 2001
From: Andrei Miron <andrei.miron@mcro-e.com>
Date: Wed, 12 Aug 2026 14:51:24 +0300
Subject: [PATCH] fix(hotspot): render hovered shape on top of other shapes
 PIE-900

---
 packages/hotspot/src/hotspot/circle.jsx    | 29 +++++++++++++++++++++-
 packages/hotspot/src/hotspot/polygon.jsx   | 29 +++++++++++++++++++++-
 packages/hotspot/src/hotspot/rectangle.jsx | 29 +++++++++++++++++++++-
 3 files changed, 84 insertions(+), 3 deletions(-)

diff --git a/packages/hotspot/src/hotspot/circle.jsx b/packages/hotspot/src/hotspot/circle.jsx
index 82e0ca2d9b..aa2ae64d01 100644
--- a/packages/hotspot/src/hotspot/circle.jsx
+++ b/packages/hotspot/src/hotspot/circle.jsx
@@ -10,8 +10,28 @@ class CircleComponent extends React.Component {
     this.state = {
       hovered: false,
     };
+    this.groupRef = React.createRef();
   }
 
+  componentDidMount() {
+    if (this.props.focused) {
+      this.moveGroupToTop();
+    }
+  }
+
+  componentDidUpdate(prevProps) {
+    // `focused` (keyboard focus) can turn on the hovered style without going through handleMouseEnter
+    if (!prevProps.focused && this.props.focused) {
+      this.moveGroupToTop();
+    }
+  }
+
+  moveGroupToTop = () => {
+    if (this.groupRef.current) {
+      this.groupRef.current.moveToTop();
+    }
+  };
+
   handleClick = (e) => {
     const { onClick, id, selected, disabled } = this.props;
 
@@ -28,6 +48,7 @@ class CircleComponent extends React.Component {
       document.body.style.cursor = 'pointer';
     }
     this.setState({ hovered: true });
+    this.moveGroupToTop();
   };
 
   handleMouseLeave = () => {
@@ -92,7 +113,13 @@ class CircleComponent extends React.Component {
     const useHoveredStyle = (hovered || focused) && hoverOutlineColor;
 
     return (
-      <Group scaleX={scale} scaleY={scale} onMouseLeave={this.handleMouseLeave} onMouseEnter={this.handleMouseEnter}>
+      <Group
+        ref={this.groupRef}
+        scaleX={scale}
+        scaleY={scale}
+        onMouseLeave={this.handleMouseLeave}
+        onMouseEnter={this.handleMouseEnter}
+      >
         <Circle
           radius={radius}
           fill={selected && selectedHotspotColor ? selectedHotspotColor : hotspotColor}
diff --git a/packages/hotspot/src/hotspot/polygon.jsx b/packages/hotspot/src/hotspot/polygon.jsx
index 71027f273a..0ae30ddada 100644
--- a/packages/hotspot/src/hotspot/polygon.jsx
+++ b/packages/hotspot/src/hotspot/polygon.jsx
@@ -10,8 +10,28 @@ class PolygonComponent extends React.Component {
     this.state = {
       hovered: false,
     };
+    this.groupRef = React.createRef();
   }
 
+  componentDidMount() {
+    if (this.props.focused) {
+      this.moveGroupToTop();
+    }
+  }
+
+  componentDidUpdate(prevProps) {
+    // `focused` (keyboard focus) can turn on the hovered style without going through handleMouseEnter
+    if (!prevProps.focused && this.props.focused) {
+      this.moveGroupToTop();
+    }
+  }
+
+  moveGroupToTop = () => {
+    if (this.groupRef.current) {
+      this.groupRef.current.moveToTop();
+    }
+  };
+
   getPolygonCenter = (points) => {
     const x = points.map(({ x }) => x);
     const y = points.map(({ y }) => y);
@@ -47,6 +67,7 @@ class PolygonComponent extends React.Component {
       document.body.style.cursor = 'pointer';
     }
     this.setState({ hovered: true });
+    this.moveGroupToTop();
   };
 
   handleMouseLeave = () => {
@@ -137,7 +158,13 @@ class PolygonComponent extends React.Component {
     const rectHeight = maxY - minY;
 
     return (
-      <Group scaleX={scale} scaleY={scale} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
+      <Group
+        ref={this.groupRef}
+        scaleX={scale}
+        scaleY={scale}
+        onMouseEnter={this.handleMouseEnter}
+        onMouseLeave={this.handleMouseLeave}
+      >
         <Line
           points={pointsParsed}
           closed={true}
diff --git a/packages/hotspot/src/hotspot/rectangle.jsx b/packages/hotspot/src/hotspot/rectangle.jsx
index 313dd31687..8b8b7458f7 100644
--- a/packages/hotspot/src/hotspot/rectangle.jsx
+++ b/packages/hotspot/src/hotspot/rectangle.jsx
@@ -10,8 +10,28 @@ class RectComponent extends React.Component {
     this.state = {
       hovered: false,
     };
+    this.groupRef = React.createRef();
   }
 
+  componentDidMount() {
+    if (this.props.focused) {
+      this.moveGroupToTop();
+    }
+  }
+
+  componentDidUpdate(prevProps) {
+    // `focused` (keyboard focus) can turn on the hovered style without going through handleMouseEnter
+    if (!prevProps.focused && this.props.focused) {
+      this.moveGroupToTop();
+    }
+  }
+
+  moveGroupToTop = () => {
+    if (this.groupRef.current) {
+      this.groupRef.current.moveToTop();
+    }
+  };
+
   handleClick = (e) => {
     const { onClick, id, selected, disabled } = this.props;
 
@@ -28,6 +48,7 @@ class RectComponent extends React.Component {
       document.body.style.cursor = 'pointer';
     }
     this.setState({ hovered: true });
+    this.moveGroupToTop();
   };
 
   handleMouseLeave = () => {
@@ -107,7 +128,13 @@ class RectComponent extends React.Component {
     const useHoveredStyle = (hovered || focused) && hoverOutlineColor;
 
     return (
-      <Group scaleX={scale} scaleY={scale} onMouseLeave={this.handleMouseLeave} onMouseEnter={this.handleMouseEnter}>
+      <Group
+        ref={this.groupRef}
+        scaleX={scale}
+        scaleY={scale}
+        onMouseLeave={this.handleMouseLeave}
+        onMouseEnter={this.handleMouseEnter}
+      >
         <Rect
           x={x}
           y={y}