feat(Tooltip): fix dynamic width

[alexbrillant]

DS-791

Ajouter une key prop au tooltip permet de forcer react à re-calculer le css dynamique avec les transform dans le component de la librairie react-popper-tooltip. Cette solution semble plus intéressante que d'overrider les styles de react-popper-tooltip.

Quand le label du tooltip change, on change la prop key et cela permet de mounter une nouvelle instance du tooltip et de re-calculer le css correctement pour le nouveau label. Cette amélioration garantira que le tooltip maintienne sa position indépendamment des changements de contenu, améliorant ainsi l'expérience utilisateur.

[github-actions]

Storybook for this build: https://ds.equisoft.io/pr-778/

[savutsang]

Je ne connais pas react-popper-tooltip et son API a l'air tres limite. Cependant j'ai trouve ceci https://popper.js.org/docs/v2/lifecycle/#manual-update

Et cette methode est expose par react-tooltip-popper

const popperTooltip = usePopperTooltip(...)

popperTooltip.update(); 
// ou .forceUpdate()

Donc si on appelle ca quand on affiche le tooltip, ca devrait fixer le probleme. Si ca corrige, je prefere ca que le key.

[savutsang]

Ca va causer un double render. Tu peux utiliser un useRef+useMemo a la place du useState+useEffect

[alexbrillant]

c'est un peu ça le but. je veux trigger un re-render du tooltip pour que react popper tooltip re-calcul le css quand le texte change pendant qu'il est ouvert

[alexbrillant]

    useEffect(() => {
        popperTooltip.update?.();
    }, [currentLabel]);

mieux avec update pas besoin de state et c'est plus explicite. mais il faut quand meme que j'utilise le useEffect pour forcer l'update seulement quand le text a changé