fix(popup): handle auto scroll and remove useless deps effect

biome.json

@@ -14,6 +14,7 @@
       ".oxlintrc.json",
       "**/*.ts",
       "**/*.tsx",
+      "!.next/**",
       "!**/dist/**",
       "!**/build/**",
       "!**/.turbo/**",
@@ -38,8 +39,9 @@
   "files": {
     "includes": [
       "**",
-      "!**/.turbo/",
-      "!**/.next/",
+      "!.turbo/*",
+      "!**/.turbo/*",
+      "!**/.next/*",
       "!**/coverage",
       "!**/node_modules/",
       "!**/storybook-static",

packages/ui/src/components/DateInput/components/Popup.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import type { Dispatch, ReactNode, RefObject, SetStateAction } from 'react'
-import { useEffect, useRef } from 'react'
+import { useLayoutEffect, useRef } from 'react'
 import { Popup } from '../../Popup'
 import { POPUP_WIDTH } from '../constants'
 import { dateinputPopup } from './styles.css'
@@ -38,7 +38,7 @@ export const CalendarPopup = ({
 }: PopupProps) => {
   const ref = useRef<HTMLDivElement>(null)
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     document.addEventListener('mousedown', event =>
       handleClickOutside(event, ref, setVisible, refInput),
     )

packages/ui/src/components/LineChart/helpers.ts

@@ -54,7 +54,7 @@ export const getMinChartValue = (preppedData?: Serie[]): number => {
 }
 
 export const getCurrent = (values: number[] = []): number =>
-  values.length > 0 ? values[values.length - 1] : 0
+  values.length > 0 ? values.at(-1) : 0
 
 export const getSelected = (
   label: string,

packages/ui/src/components/Menu/MenuContent.tsx

@@ -198,7 +198,7 @@ export const Menu = forwardRef(
               if (indexOfCurrent > 0) {
                 listItem[indexOfCurrent - 1].focus()
               } else {
-                listItem[listItem.length - 1].focus()
+                listItem.at(-1).focus()
               }
             } else if (event.key === 'ArrowLeft' && triggerMethod === 'hover') {
               disclosureRef.current?.focus()

packages/ui/src/components/Modal/components/Dialog.tsx

@@ -172,7 +172,7 @@ export const Dialog = ({
     }
 
     const firstFocusableEl = focusableEls[0] as HTMLElement
-    const lastFocusableEl = focusableEls[focusableEls.length - 1] as HTMLElement
+    const lastFocusableEl = focusableEls.at(-1) as HTMLElement
 
     if (event.shiftKey) {
       if (

packages/ui/src/components/Popup/index.tsx

@@ -17,6 +17,7 @@ import {
   useEffect,
   useId,
   useImperativeHandle,
+  useLayoutEffect,
   useMemo,
   useRef,
   useState,
@@ -58,7 +59,7 @@ export type PositionsType = {
 }
 
 /**
- * This event handle allow us to not bubble the event to document.body like this react-select works fine
+ * This event handle allow us to not bubble the event to document.body like this select works fine
  */
 const stopClickPropagation: MouseEventHandler = event => {
   event.nativeEvent.stopImmediatePropagation()
@@ -182,6 +183,7 @@ export const Popup = forwardRef(
     useImperativeHandle(ref, () => innerPopupRef.current as HTMLDivElement)
 
     const timer = useRef<ReturnType<typeof setTimeout>>(undefined)
+
     const popupPortalTarget = useMemo(() => {
       if (portalTarget) {
         return portalTarget
@@ -204,8 +206,7 @@ export const Popup = forwardRef(
       }
 
       return null
-      // oxlint-disable react/exhaustive-deps
-    }, [portalTarget, role, childrenRef.current])
+    }, [portalTarget, role])
 
     // There are some issue when mixing animation and maxHeight on some browsers, so we disable animation if maxHeight is set.
     const animationDuration =
@@ -227,17 +228,18 @@ export const Popup = forwardRef(
     )
 
     const generatePopupPositions = useCallback(() => {
-      if (childrenRef.current && innerPopupRef.current) {
-        setPositions(
-          computePositions({
-            align,
-            childrenRef,
-            hasArrow,
-            placement,
-            popupPortalTarget: popupPortalTarget as HTMLElement,
-            popupRef: innerPopupRef,
-          }),
-        )
+      console.debug('generatePopupPositions')
+      if (childrenRef.current && innerPopupRef.current && popupPortalTarget) {
+        const position = computePositions({
+          align,
+          childrenRef,
+          hasArrow,
+          placement,
+          popupPortalTarget,
+          popupRef: innerPopupRef,
+        })
+        setPositions(prevPosition => ({ ...prevPosition, ...position }))
+        console.debug({ ...position })
       }
     }, [hasArrow, placement, popupPortalTarget, align])
 
@@ -350,7 +352,7 @@ export const Popup = forwardRef(
      * Once popup is visible in the dom we can compute positions, then set it visible on screen and add event to
      * recompute positions on scroll or screen resize.
      */
-    useEffect(() => {
+    useLayoutEffect(() => {
       if (visibleInDom) {
         generatePopupPositions()
 
@@ -379,12 +381,11 @@ export const Popup = forwardRef(
     ])
 
     // This will be triggered when positions are computed and popup is visible in the dom.
-    useEffect(() => {
+    useLayoutEffect(() => {
       if (visibleInDom && innerPopupRef.current) {
         innerPopupRef.current.style.opacity = '1'
       }
-      // oxlint-disable react/exhaustive-deps
-    }, [positions])
+    }, [positions, visibleInDom])
 
     /**
      * If popup has `visible` prop it means the popup is manually controlled through this prop.
@@ -439,6 +440,7 @@ export const Popup = forwardRef(
       visibleInDom,
       innerPopupRef,
       childrenRef,
+      id,
       hideOnClickOutside,
     ])
 
@@ -463,9 +465,7 @@ export const Popup = forwardRef(
       }
 
       const firstFocusableEl = focusableEls[0] as HTMLElement
-      const lastFocusableEl = focusableEls[
-        focusableEls.length - 1
-      ] as HTMLElement
+      const lastFocusableEl = focusableEls.at(-1) as HTMLElement
 
       if (event.shiftKey) {
         if (