refactor: portalRootの監視は暗黙的でわかりにくいので、mount済みかどうかを返す関数を追加する (#4624)

kufu · May 21, 2024 · 5d2cbd9 · 5d2cbd9
1 parent be43b37
commit 5d2cbd9
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 6 deletions.
diff --git a/packages/smarthr-ui/src/components/ComboBox/useListBox.tsx b/packages/smarthr-ui/src/components/ComboBox/useListBox.tsx
@@ -194,7 +194,7 @@ export const useListBox = <T,>({
   )
 
   const { spacing } = useTheme()
-  const { portalRoot, createPortal } = usePortal()
+  const { createPortal } = usePortal()
   const listBoxId = useId()
   const { items: partialOptions, renderIntersection } = usePartialRendering({
     items: options,
@@ -343,7 +343,6 @@ export const useListBox = <T,>({
       handleAdd,
       handleSelect,
       handleHoverOption,
-      portalRoot,
     ],
   )
 

diff --git a/packages/smarthr-ui/src/components/DatePicker/Portal.tsx b/packages/smarthr-ui/src/components/DatePicker/Portal.tsx
@@ -22,7 +22,7 @@ const portal = tv({
 })
 
 export const Portal = forwardRef<HTMLDivElement, Props>(({ inputRect, ...props }, ref) => {
-  const { portalRoot, createPortal } = usePortal()
+  const { isPortalRootMounted, createPortal } = usePortal()
 
   const [position, setPosition] = useState({
     top: 0,
@@ -36,7 +36,7 @@ export const Portal = forwardRef<HTMLDivElement, Props>(({ inputRect, ...props }
       return
     }
     setPosition(getPortalPosition(inputRect, containerRef.current.offsetHeight))
-  }, [inputRect, portalRoot])
+  }, [inputRect, isPortalRootMounted])
 
   const containerStyleProps = useMemo(() => {
     const container = portal()

diff --git a/packages/smarthr-ui/src/components/Dropdown/Dropdown.tsx b/packages/smarthr-ui/src/components/Dropdown/Dropdown.tsx
@@ -49,7 +49,8 @@ export const Dropdown: FC<PropsWithChildren> = ({ children }) => {
   const [triggerRect, setTriggerRect] = useState<Rect>(initialRect)
 
   const { rootTriggerRef } = useContext(DropdownContext)
-  const { createPortal, portalRoot, isChildPortal, PortalParentProvider } = usePortal()
+  const { createPortal, portalRoot, isPortalRootMounted, isChildPortal, PortalParentProvider } =
+    usePortal()
 
   const triggerElementRef = useRef<HTMLDivElement>(null)
   const contentId = useId()
@@ -79,7 +80,7 @@ export const Dropdown: FC<PropsWithChildren> = ({ children }) => {
       if (!active) return null
       return createPortal(props.children)
     },
-    [active, createPortal, portalRoot],
+    [active, createPortal, isPortalRootMounted],
   )
   // set the displayName explicit for DevTools
   DropdownContentRoot.displayName = 'DropdownContentRoot'

diff --git a/packages/smarthr-ui/src/hooks/usePortal.tsx b/packages/smarthr-ui/src/hooks/usePortal.tsx
@@ -72,8 +72,11 @@ export function usePortal() {
     [portalRoot],
   )
 
+  const isPortalRootMounted = useCallback(() => portalRoot !== null, [portalRoot])
+
   return {
     portalRoot,
+    isPortalRootMounted,
     isChildPortal,
     PortalParentProvider,
     createPortal: wrappedCreatePortal,