fix comments 20-11

Author: SharglutDev

storybook/.storybook/main.ts

@@ -24,13 +24,13 @@ const config: StorybookConfig = {
   },
   staticDirs: ['../public'],
   logLevel: 'debug',
-  async viteFinal(config) {
-    return mergeConfig(config, {
-      resolve: {
-        preserveSymlinks: true,
-      },
-    });
-  },
+  // async viteFinal(config) {
+  //   return mergeConfig(config, {
+  //     resolve: {
+  //       preserveSymlinks: true,
+  //     },
+  //   });
+  // },
 };
 export default config;
 

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

@@ -1,4 +1,3 @@
-/* eslint-disable import/no-unresolved */
 import React, { useRef, useState } from 'react';
 
 import { EyeClosed, Telescope } from '@osrd-project/ui-icons';
@@ -12,7 +11,6 @@ import '@osrd-project/ui-manchette/dist/theme.css';
 import '@osrd-project/ui-manchette-with-spacetimechart/dist/theme.css';
 
 import Menu, { type MenuItem } from './Menu';
-import useElementInView from './useElementInView';
 import { SAMPLE_WAYPOINTS, SAMPLE_PATHS_DATA } from '../assets/sampleData';
 import useManchettesWithSpaceTimeChart from '../hooks/useManchetteWithSpaceTimeChart';
 
@@ -34,9 +32,6 @@ const ManchetteWithSpaceTimeWrapper = ({
   const manchetteWithSpaceTimeChartRef = useRef<HTMLDivElement>(null);
 
   const [activeWaypointId, setActiveWaypointPointId] = useState<string>();
-  const [activeWaypointRef, setActiveWaypointRef] = useState<React.RefObject<HTMLDivElement>>();
-
-  const isElementInView = useElementInView(activeWaypointRef, manchetteWithSpaceTimeChartRef);
 
   const menuItems: MenuItem[] = [
     {
@@ -57,12 +52,8 @@ const ManchetteWithSpaceTimeWrapper = ({
     },
   ];
 
-  const handleWaypointClick = (
-    waypointId: string,
-    waypointRef: React.RefObject<HTMLDivElement>
-  ) => {
+  const handleWaypointClick = (waypointId: string) => {
     setActiveWaypointPointId(waypointId);
-    setActiveWaypointRef(waypointRef);
   };
 
   const { manchetteProps, spaceTimeChartProps, handleScroll } = useManchettesWithSpaceTimeChart(
@@ -93,7 +84,7 @@ const ManchetteWithSpaceTimeWrapper = ({
           waypointMenuData={{
             activeWaypointId,
             menu: <Menu items={menuItems} />,
-            isWaypointInView: isElementInView,
+            scrollableParentRef: manchetteWithSpaceTimeChartRef,
           }}
         />
         <div

ui-manchette/src/components/Waypoint.tsx

@@ -2,26 +2,33 @@ import React, { useRef } from 'react';
 
 import cx from 'classnames';
 
+import useElementInView from '../hooks/useElementInView';
 import { type InteractiveWaypoint } from '../types';
 import '@osrd-project/ui-core/dist/theme.css';
 import { positionMmToKm } from '../utils';
 
+const MANCHETTE_ACTIONS_HEIGHT = '-40px';
+
 type WaypointProps = {
   waypoint: InteractiveWaypoint;
   isActive: boolean;
   waypointMenu?: React.ReactNode;
-  waypointsContainerRef: React.RefObject<HTMLDivElement>;
-  isWaypointInView?: boolean;
+  scrollableParentRef?: React.RefObject<HTMLElement>;
 };
 
 const Waypoint = ({
   waypoint: { name, secondaryCode, id, position, display, onClick },
   isActive,
   waypointMenu,
-  isWaypointInView,
+  scrollableParentRef,
 }: WaypointProps) => {
   const waypointRef = useRef<HTMLDivElement>(null);
 
+  const isWaypointInView = useElementInView(waypointRef, scrollableParentRef, {
+    threshold: 1,
+    rootMargin: `0px 0px ${MANCHETTE_ACTIONS_HEIGHT} 0px`,
+  });
+
   if (!display) return null;
 
   return (
@@ -31,7 +38,7 @@ const Waypoint = ({
       })}
       id={id}
       onClick={() => {
-        if (onClick) onClick(id, waypointRef);
+        if (onClick) onClick(id);
       }}
     >
       <div ref={waypointRef} className="waypoint-position justify-self-start text-end">

ui-manchette/src/components/WaypointList.tsx

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import React from 'react';
 
 import Waypoint from './Waypoint';
 import type { WaypointMenuData, InteractiveWaypoint } from '../types';
@@ -8,28 +8,23 @@ type WaypointListProps = {
   waypointMenuData?: WaypointMenuData;
 };
 
-const WaypointList = ({ waypoints, waypointMenuData }: WaypointListProps) => {
-  const waypointsContainerRef = useRef<HTMLDivElement>(null);
-
-  return (
-    <div ref={waypointsContainerRef} className="waypoint-list ">
-      {waypoints.map((waypoint) => (
-        <div
-          key={waypoint.id}
-          className="waypoint-wrapper flex flex-col justify-start"
-          style={waypoint.styles}
-        >
-          <Waypoint
-            waypoint={waypoint}
-            isActive={waypointMenuData?.activeWaypointId === waypoint.id}
-            waypointMenu={waypointMenuData?.menu}
-            waypointsContainerRef={waypointsContainerRef}
-            isWaypointInView={waypointMenuData?.isWaypointInView}
-          />
-        </div>
-      ))}
-    </div>
-  );
-};
+const WaypointList = ({ waypoints, waypointMenuData }: WaypointListProps) => (
+  <div className="waypoint-list ">
+    {waypoints.map((waypoint) => (
+      <div
+        key={waypoint.id}
+        className="waypoint-wrapper flex flex-col justify-start"
+        style={waypoint.styles}
+      >
+        <Waypoint
+          waypoint={waypoint}
+          isActive={waypointMenuData?.activeWaypointId === waypoint.id}
+          waypointMenu={waypointMenuData?.menu}
+          scrollableParentRef={waypointMenuData?.scrollableParentRef}
+        />
+      </div>
+    ))}
+  </div>
+);
 
 export default WaypointList;

ui-manchette-with-spacetimechart/src/stories/useElementInView.ts ui-manchette/src/hooks/useElementInView.ts

@@ -1,7 +1,4 @@
 import { useState, useEffect, type RefObject } from 'react';
-
-const MANCHETTE_ACTIONS_HEIGHT = '-40px';
-
 /**
  * Check if an element is in the viewport of a container
  * @param ref the element we want to observe
@@ -16,7 +13,7 @@ const useElementInView = <T extends HTMLElement>(
   containerRef?: RefObject<HTMLElement>,
   options: IntersectionObserverInit = {
     threshold: 1,
-    rootMargin: `0px 0px ${MANCHETTE_ACTIONS_HEIGHT} 0px`,
+    rootMargin: `0px`,
   }
 ): boolean => {
   const [isInView, setIsInView] = useState(false);
@@ -25,7 +22,12 @@ const useElementInView = <T extends HTMLElement>(
     const currentRef = ref?.current;
     const root = containerRef?.current || null;
 
-    if (!currentRef) return;
+    if (!currentRef) {
+      // If the user implementing ui-manchette doesn't provide a ref to handle the menu visibility,
+      // the menu should always be visible
+      setIsInView(true);
+      return;
+    }
 
     const observer = new IntersectionObserver(
       ([entry]) => {

ui-manchette/src/index.ts

@@ -5,3 +5,4 @@ import './components/consts';
 export { default as Waypoint } from './components/Waypoint';
 export { default as WaypointList } from './components/WaypointList';
 export { default as Manchette } from './components/Manchette';
+export { WaypointMenuData } from './types';

ui-manchette/src/types.ts

@@ -10,13 +10,14 @@ export type Waypoint = {
 export type InteractiveWaypoint = Waypoint & {
   styles?: CSSProperties;
   display?: boolean;
-  onClick?: (waypointId: string, waypointRef: React.RefObject<HTMLDivElement>) => void;
+  onClick?: (waypointId: string) => void;
 };
 
 export type WaypointMenuData = {
   menu: React.ReactNode;
   activeWaypointId?: string;
-  isWaypointInView?: boolean;
+  // Ref of the scrollable parent of the waypoints list to enable the menu hidding behavior
+  scrollableParentRef?: React.RefObject<HTMLElement>;
 };
 
 export type ProjectPathTrainResult = {