ui-manchette/fix waypoint menu closing

ui-manchette-with-spacetimechart/src/stories/Menu.tsx

@@ -7,14 +7,15 @@ export type MenuItem = {
 };
 
 type MenuProps = {
+  menuRef: React.RefObject<HTMLDivElement>;
   items: MenuItem[];
 };
 
 /**
  * Example of waypoint menu that could be passed to the manchette as props
  */
-const Menu = ({ items }: MenuProps) => (
-  <div className="menu">
+const Menu = ({ menuRef, items }: MenuProps) => (
+  <div ref={menuRef} className="menu">
     {items.map(({ title, icon, onClick }) => (
       <button key={title} type="button" className="menu-item" onClick={onClick}>
         <span className="icon">{icon}</span>

ui-manchette-with-spacetimechart/src/stories/base-with-waypoint-menu.stories.tsx

@@ -1,14 +1,14 @@
-import React, { useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 
 import { EyeClosed, Telescope } from '@osrd-project/ui-icons';
 import Manchette, { type ProjectPathTrainResult, type Waypoint } from '@osrd-project/ui-manchette';
 import { PathLayer, SpaceTimeChart } from '@osrd-project/ui-spacetimechart';
 import type { Meta } from '@storybook/react';
-import cx from 'classnames';
-
 import '@osrd-project/ui-core/dist/theme.css';
 import '@osrd-project/ui-manchette/dist/theme.css';
 import '@osrd-project/ui-manchette-with-spacetimechart/dist/theme.css';
+import cx from 'classnames';
+import { createPortal } from 'react-dom';
 
 import Menu, { type MenuItem } from './Menu';
 import { SAMPLE_WAYPOINTS, SAMPLE_PATHS_DATA } from '../assets/sampleData';
@@ -39,6 +39,8 @@ const ManchetteWithSpaceTimeWrapper = ({
   // Allow us to know which waypoint has been clicked and change its style
   const [activeWaypointId, setActiveWaypointId] = useState<string>();
 
+  const menuRef = useRef<HTMLDivElement>(null);
+
   const menuItems: MenuItem[] = [
     {
       title: 'Action 1',
@@ -69,10 +71,43 @@ const ManchetteWithSpaceTimeWrapper = ({
     selectedTrain
   );
 
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      // Close the menu if the user clicks outside of it
+      if (!menuRef.current?.contains(event.target as Node)) {
+        setActiveWaypointId(undefined);
+      }
+    };
+
+    if (activeWaypointId) {
+      document.addEventListener('mousedown', handleClickOutside);
+    } else {
+      document.removeEventListener('mousedown', handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [activeWaypointId]);
+
   return (
     // Ref needs to be on the parent on the scrollable element (.manchette) and have a position
     // relative so the menu can properly overflow the manchette
     <div ref={manchetteWithSpaceTimeCharWrappertRef} className="manchette-space-time-chart-wrapper">
+      {activeWaypointId &&
+        manchetteWithSpaceTimeCharWrappertRef.current &&
+        createPortal(
+          <div
+            style={{
+              width: '100%',
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              bottom: 0,
+            }}
+          />,
+          manchetteWithSpaceTimeCharWrappertRef.current
+        )}
       <div
         className="header bg-ambientB-5 w-full border-b border-grey-30"
         style={{ height: '40px' }}
@@ -92,7 +127,7 @@ const ManchetteWithSpaceTimeWrapper = ({
             onClick: handleWaypointClick,
           }))}
           waypointMenuData={{
-            menu: <Menu items={menuItems} />,
+            menu: <Menu menuRef={menuRef} items={menuItems} />,
             activeWaypointId,
             manchetteWrapperRef: manchetteWithSpaceTimeCharWrappertRef,
           }}

ui-manchette/src/styles/manchette.css

@@ -33,6 +33,10 @@
         border-top: solid 1px white;
         height: 100%;
         padding-inline: 12px;
+
+        &.zoom-reset {
+          padding-bottom: 2px;
+        }
       }
 
       button:disabled {