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

packages/form/src/components/ToggleField/__stories__/Checked.stories.tsx

@@ -3,6 +3,8 @@ import { Template } from './Template.stories'
 export const Checked = Template.bind({})
 
 Checked.args = {
+  label: 'label',
   name: 'checked',
+  tooltip: 'checked',
   value: true,
 }

packages/form/src/components/ToggleField/__stories__/index.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta } from '@storybook/react-vite'
 import { Snippet, Stack, Text } from '@ultraviolet/ui'
-import { Form, ToggleField } from '../..'
+import { Form } from '../..'
+import { ToggleField } from '..'
 import { useForm } from '../../..'
 import { mockErrors } from '../../../mocks'
 
@@ -80,3 +81,5 @@ export default {
 
 export { Playground } from './Playground.stories'
 export { Required } from './Required.stories'
+export { Checked } from './Checked.stories'
+export { ActAsRadio } from './ActAsRadio.stories'

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/Popup/index.tsx

@@ -17,6 +17,7 @@ import {
   useEffect,
   useId,
   useImperativeHandle,
+  useLayoutEffect,
   useMemo,
   useRef,
   useState,
@@ -64,6 +65,8 @@ const stopClickPropagation: MouseEventHandler = event => {
   event.nativeEvent.stopImmediatePropagation()
 }
 
+type PopupRole = 'dialog' | ('popup' & string)
+
 type PopupProps = {
   /**
    * Id is automatically generated if not set. It is used for associating popup wrapper with popup portal.
@@ -106,7 +109,7 @@ type PopupProps = {
    */
   visible?: boolean
   innerRef?: Ref<HTMLDivElement | null>
-  role?: string
+  role?: PopupRole
   'data-testid'?: string
   hasArrow?: boolean
   onClose?: () => void
@@ -141,6 +144,38 @@ type PopupProps = {
   style?: CSSProperties
 }
 
+const getPopupPortalTarget = ({
+  node,
+  role,
+  portalTarget,
+}: {
+  node: HTMLElement | null
+  role: PopupRole
+  portalTarget?: HTMLElement
+}) => {
+  if (portalTarget) {
+    return portalTarget
+  }
+
+  if (role === 'dialog') {
+    if (node) {
+      return node
+    }
+    if (isClientSide) {
+      return document.body
+    }
+
+    return null
+  }
+
+  // We check if window exists for SSR
+  if (typeof window !== 'undefined') {
+    return document.body
+  }
+
+  return null
+}
+
 /**
  * @experimental This component is experimental and may be subject to breaking changes in the future.
  */
@@ -182,30 +217,11 @@ export const Popup = forwardRef(
     useImperativeHandle(ref, () => innerPopupRef.current as HTMLDivElement)
 
     const timer = useRef<ReturnType<typeof setTimeout>>(undefined)
-    const popupPortalTarget = useMemo(() => {
-      if (portalTarget) {
-        return portalTarget
-      }
-
-      if (role === 'dialog') {
-        if (childrenRef.current) {
-          return childrenRef.current
-        }
-        if (isClientSide) {
-          return document.body
-        }
-
-        return null
-      }
-
-      // We check if window exists for SSR
-      if (typeof window !== 'undefined') {
-        return document.body
-      }
-
-      return null
-      // oxlint-disable react/exhaustive-deps
-    }, [portalTarget, role, childrenRef.current])
+    const popupPortalTarget = getPopupPortalTarget({
+      node: 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,19 +243,19 @@ export const Popup = forwardRef(
     )
 
     const generatePopupPositions = useCallback(() => {
-      if (childrenRef.current && innerPopupRef.current) {
+      if (childrenRef.current && innerPopupRef.current && popupPortalTarget) {
         setPositions(
           computePositions({
             align,
             childrenRef,
             hasArrow,
             placement,
-            popupPortalTarget: popupPortalTarget as HTMLElement,
+            popupPortalTarget,
             popupRef: innerPopupRef,
           }),
         )
       }
-    }, [hasArrow, placement, popupPortalTarget, align, children])
+    }, [hasArrow, placement, align, popupPortalTarget])
 
     /**
      * This function is called when we need to recompute positions of popup due to window scroll or resize.
@@ -346,11 +362,33 @@ export const Popup = forwardRef(
       [closePopup, debounceDelay, visible],
     )
 
+    useLayoutEffect(() => {
+      const currentRef = childrenRef.current
+      const mutationObserver = new MutationObserver(() => {
+        generatePopupPositions()
+      })
+      const resizeObserver = new ResizeObserver(() => {
+        generatePopupPositions()
+      })
+
+      if (currentRef) {
+        resizeObserver.observe(currentRef)
+        mutationObserver.observe(currentRef, { characterData: true })
+      }
+
+      return () => {
+        if (currentRef) {
+          resizeObserver.unobserve(currentRef)
+          mutationObserver.disconnect()
+        }
+      }
+    }, [visibleInDom, generatePopupPositions])
+
     /**
      * 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 +417,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])
+    }, [visibleInDom, positions])
 
     /**
      * If popup has `visible` prop it means the popup is manually controlled through this prop.